attributen

Thema

Met dit attribuut kunnen ontwikkelaars de visuele ervaring van de videospeler eenvoudig aanpassen. Je kiest heel eenvoudig een thema: voeg het attribuut theme toe aan de tag <mave-player>.

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

Thema’s

Label	Beschrijving
dolphin	Alle bedieningselementen staan samen in één transparante balk.
synthwave	In dit thema staat de tijdlijn boven de bedieningselementen.

Voorbeeld

Externe themes

Maak je eigen bediening en vormgeving met een JavaScript-theme:

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

Gebruik een pad relatief aan je pagina of een volledige URL. De namen default, dolphin en synthwave kiezen de ingebouwde themes. Voeg bij updates een versie toe aan de URL, zoals /themes/brand.js?v=2. Mislukt het laden, dan gebruikt de player het standaardtheme.

Een theme maken

Mave bevat de controls en menu’s van Media Chrome. Gebruik ze in je theme met je eigen HTML en CSS. De stylinghandleiding beschrijft CSS-variabelen en eigen iconen. Welke controls beschikbaar zijn, hangt af van de browser en de media.

Exporteer build(name, LitElement, html, css) vanuit je JavaScript-bestand. Mave levert de Lit-helpers; registreer je component met customElements.define(`theme-${name}`, YourTheme) en gebruik de aangeleverde naam.

Voeg binnen <media-controller> een <slot name="media" slot="media"> toe voor de video. Behoud het posterslot en #subtitles_text voor de poster en ondertitels. Gebruik voor Mave-audiotracks <mave-audio-track-menu> met <mave-audio-track-menu-button>.

Serveer het bestand als JavaScript en schakel CORS in als je het op een andere origin host. Optionele globale stijlen, zoals fonts, kunnen in /themes/brand.css naast de module staan.

Voorbeeld

Een zwevende bedieningsbalk met een blauwe afspeelknop en een slanke tijdlijn. Alle styling staat in het themebestand.

Resultaat

Code

Sla dit op 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);
}

Gebruik het met je eigen video. Geef ook de player ronde hoeken, zodat de poster tijdens het laden dezelfde afgeronde vorm heeft:

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