Attribute

Theme

Dieses Attribut soll Entwicklern eine nahtlose Möglichkeit bieten, das visuelle Erlebnis des Videoplayers anzupassen. Die Auswahl eines Themas ist ein Kinderspiel. Fügen Sie einfach das Attribut theme zum Tag <mave-player> hinzu.

<mave-player embed="{embed id}" theme="synthwave"></mave-player>

Themes

Etikett	Beschreibung
dolphin	Alle Steuerelemente sind in einer einzigen transparenten Leiste gruppiert.
synthwave	Der Zeit-Scrubber befindet sich in diesem Thema über den Steuerelementen.

Vorschau

Externe Themes

Gestalten Sie eigene Bedienelemente mit einem JavaScript-Theme:

<mave-player embed="{embed id}" theme="/themes/brand.js"></mave-player>

Verwenden Sie einen Pfad relativ zur Seite oder eine vollständige URL. Die Namen default, dolphin und synthwave wählen die integrierten Themes aus. Ergänzen Sie bei Updates eine Version in der URL, etwa /themes/brand.js?v=2. Schlägt das Laden fehl, verwendet der Player das Standardtheme.

Ein Theme erstellen

Mave enthält die Bedienelemente und Menüs von Media Chrome. Verwenden Sie diese mit eigenem HTML und CSS in Ihrem Theme. Die Styling-Anleitung erklärt CSS-Variablen und eigene Symbole. Welche Bedienelemente verfügbar sind, hängt vom Browser und den Medien ab.

Exportieren Sie build(name, LitElement, html, css) aus Ihrer JavaScript-Datei. Mave stellt die Lit-Helfer bereit. Registrieren Sie Ihre Komponente mit customElements.define(`theme-${name}`, YourTheme) und verwenden Sie den übergebenen Namen.

Fügen Sie innerhalb von <media-controller> einen <slot name="media" slot="media"> für das Video ein. Behalten Sie den Poster-Slot und #subtitles_text für Poster und Untertitel bei. Verwenden Sie für Mave-Audiospuren <mave-audio-track-menu> mit <mave-audio-track-menu-button>.

Liefern Sie die Datei als JavaScript aus und aktivieren Sie CORS, wenn sie auf einer anderen Origin liegt. Optionale globale Stile, etwa Schriften, können in /themes/brand.css neben dem Modul stehen.

Beispiel

Eine schwebende Bedienleiste mit einer blauen Wiedergabetaste und einer schmalen Zeitleiste. Alle Stile stehen in der Theme-Datei.

Ergebnis

Code

Speichern Sie diese Datei als /themes/brand.js:

export function build(name, LitElement, html, css) {
  class BrandTheme extends LitElement {
    static styles = css`
      :host {
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 22px;
      }
      media-controller {
        width: 100%;
        height: 100%;
        container-type: inline-size;
        --media-primary-color: #253048;
        --media-secondary-color: transparent;
        --media-control-background: transparent;
        --media-control-hover-background: rgb(37 48 72 / 7%);
        --media-focus-box-shadow: inset 0 0 0 2px #365df5;
        --media-range-track-height: 3px;
        --media-range-track-background: rgb(37 48 72 / 16%);
        --media-range-bar-color: #365df5;
        --media-range-thumb-background: #365df5;
        --media-range-thumb-width: 8px;
        --media-range-thumb-height: 8px;
      }
      ::slotted(video) {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      media-control-bar {
        box-sizing: border-box;
        align-items: center;
        gap: 8px;
        width: calc(100% - 32px);
        max-width: 680px;
        margin: 0 auto 16px;
        padding: 7px;
        border: 1px solid rgb(255 255 255 / 70%);
        border-radius: 999px;
        background: rgb(250 250 248 / 90%);
        box-shadow: 0 6px 24px rgb(15 23 42 / 18%);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
      }
      media-play-button, media-mute-button, media-fullscreen-button {
        flex-shrink: 0;
        overflow: hidden;
        border-radius: 50%;
        --media-button-padding: 12px;
        --media-button-icon-width: 18px;
        --media-button-icon-height: 18px;
      }
      media-play-button {
        box-shadow: 0 2px 6px rgb(54 93 245 / 24%);
        --media-primary-color: white;
        --media-control-background: #365df5;
        --media-control-hover-background: #2447d5;
      }
      media-time-range, media-time-display {
        --media-control-hover-background: transparent;
      }
      media-time-range {
        flex: 1;
        min-width: 0;
        --media-text-color: white;
        --media-preview-time-background: #253048;
        --media-preview-time-text-shadow: none;
        --media-preview-time-padding: 6px 10px;
      }
      media-time-display {
        flex-shrink: 0;
        color: #5b6475;
        font: 500 12px/1 system-ui, sans-serif;
        font-variant-numeric: tabular-nums;
        --media-control-padding: 0 4px;
      }
      #subtitles_text {
        position: absolute;
        inset: auto 5% 80px;
        color: white;
        font: 600 18px/1.4 system-ui, sans-serif;
        text-align: center;
        text-shadow: 0 1px 4px black;
        pointer-events: none;
      }
      @container (max-width: 440px) {
        media-time-display { display: none; }
      }
    `;

    render() {
      return html`
        <media-controller>
          <slot name="media" slot="media"></slot>
          <slot name="poster" slot="poster"></slot>
          <media-control-bar>
            <media-play-button></media-play-button>
            <media-time-range></media-time-range>
            <media-time-display showduration></media-time-display>
            <media-mute-button></media-mute-button>
            <media-fullscreen-button></media-fullscreen-button>
          </media-control-bar>
          <div id="subtitles_text"></div>
        </media-controller>
      `;
    }
  }

  customElements.define(`theme-${name}`, BrandTheme);
}

Verwenden Sie das Theme mit Ihrem Video. Runden Sie auch die Ecken des Players ab, damit das Poster beim Laden dieselbe Form hat:

<mave-player
  embed="{embed id}"
  theme="/themes/brand.js"
  style="border-radius: 22px; overflow: hidden;"
></mave-player>