Version: 5.x

User Interface

UI components are visually displayed elements inside the media player that may be interactable such as a playback control or slider, or they may be simple visual feedback such as the length of the media (duration). It can be quite time consuming and challenging to setup an entire interface for a video player, so let's start by using the default UI given to us out of the box...

player.html

<!-- Notice we turned off controls? We're supplying our own, so we hide the native ones. -->
<vm-player>
  <vm-video
    cross-origin="true"
    poster="https://files.vidstack.io/agent-327/poster.png"
  >
    <source
      data-src="https://files.vidstack.io/agent-327/720p.mp4"
      type="video/mp4"
    />
    <track
      default
      kind="subtitles"
      src="https://files.vidstack.io/agent-327/subs/english.vtt"
      srclang="en"
      label="English"
    />
  </vm-video>

  <!-- We've replaced the `<vm-ui>` element. -->
  <!-- We can also turn off any features we don't want via properties. -->
  <vm-default-ui no-click-to-play>
    <!-- We can place our own UI components here to extend the default UI. -->
  </vm-default-ui>
</vm-player>

Glorious! Here's the result so far 🥁 ...

tip

Remember to load the default player theme or you might see something you regret 😱

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@vime/core@^5/themes/default.css"
/>

Just like that we've setup an interface for audio/video/live media that looks good on both mobile/desktop and is ARIA friendly... not bad 😎

What if we want to put together our own UI? We can easily achieve this by mixing together predefined components by Vime and creating our own. Let's say we only wanted to be able to click the player to toggle playback, and to able to tap the sides to seek forward/backward. If we look through the components in the Components > UI section in the sidebar (on your left), we see there is a ClickToPlay component which solves our first requirement, but nothing seems to match our second requirement. This calls for a custom component, so let's see how we can go about putting this together...

caution

The following HTML example is not complete, feel free to contribute by helping us complete it 🙂

Here's some links for you to learn about web components:

player.html

<vm-player>
  <vm-video
    cross-origin="true"
    poster="https://files.vidstack.io/agent-327/poster.png"
  >
    <source
      data-src="https://files.vidstack.io/agent-327/720p.mp4"
      type="video/mp4"
    />
    <track
      default
      kind="subtitles"
      src="https://files.vidstack.io/agent-327/subs/english.vtt"
      srclang="en"
      label="English"
    />
  </vm-video>

  <vm-ui>
    <!-- Vime components. -->
    <vm-click-to-play></vm-click-to-play>
    <vm-spinner></vm-spinner>
    <vm-poster></vm-poster>
    <!-- Custom web component. -->
    <tap-sides-to-seek></tap-sides-to-seek>
  </vm-ui>
</vm-player>

info

You can view the custom TapSidesToSeek component here.

Player.tsx

import React from 'react';
import { Player, Video, Ui, ClickToPlay, Spinner, Poster } from '@vime/react';
import TapSidesToSeek from './TapSidesToSeek';

function Player() {
  return (
    <Player>
      <Video
        crossOrigin=""
        poster="https://files.vidstack.io/agent-327/poster.png"
      >
        <source
          data-src="https://files.vidstack.io/agent-327/720p.mp4"
          type="video/mp4"
        />
        <track
          default
          kind="subtitles"
          src="https://files.vidstack.io/agent-327/subs/english.vtt"
          srcLang="en"
          label="English"
        />
      </Video>

      <Ui>
        {/* Vime components. */}
        <ClickToPlay />
        <Spinner />
        <Poster />
        {/* Custom component. */}
        <TapSidesToSeek />
      </Ui>
    </Player>
  );
}

info

You can view the custom TapSidesToSeek component here.

Player.vue

<template>
  <!-- Notice we turned off controls? We're supplying our own, so we hide the native ones. -->
  <Player>
    <video
      crossorigin=""
      poster="https://files.vidstack.io/agent-327/poster.png"
    >
      <source
        data-src="https://files.vidstack.io/agent-327/720p.mp4"
        type="video/mp4"
      />
      <track
        default
        kind="subtitles"
        src="https://files.vidstack.io/agent-327/subs/english.vtt"
        srclang="en"
        label="English"
      />
    </video>

    <Ui>
      <!-- Vime components. -->
      <ClickToPlay />
      <Spinner />
      <Poster />
      <!-- Custom component. -->
      <TapSidesToSeek />
    </Ui>
  </Player>
</template>

<script>
  import { Player, Video, Ui, ClickToPlay, Spinner, Poster } from '@vime/vue';
  import TapSidesToSeek from './TapSidesToSeek.vue';

  export default {
    components: {
      Player,
      Video,
      Ui,
      ClickToPlay,
      Spinner,
      Poster,
      TapSidesToSeek,
    },
  };
</script>

info

You can view the custom TapSidesToSeek component here.

Player.svelte

<Player>
  <video crossorigin="" poster="https://files.vidstack.io/agent-327/poster.png">
    <source
      data-src="https://files.vidstack.io/agent-327/720p.mp4"
      type="video/mp4"
    />
    <track
      default
      kind="subtitles"
      src="https://files.vidstack.io/agent-327/subs/english.vtt"
      srclang="en"
      label="English"
    />
  </video>

  <Ui>
    <!-- Vime components. -->
    <ClickToPlay />
    <Spinner />
    <Poster />
    <!-- Custom component. -->
    <TapSidesToSeek />
  </Ui>
</Player>

<script lang="ts">
  import {
    Player,
    Video,
    Ui,
    ClickToPlay,
    Spinner,
    Poster,
  } from '@vime/svelte';
  import TapSidesToSeek from './TapSidesToSeek.svelte';
</script>

info

You can view the custom <tap-sides-to-seek> component here.

player.tsx

class Player {
  // ...

  render() {
    return (
      <vm-player>
        <vm-video
          crossOrigin=""
          poster="https://files.vidstack.io/agent-327/poster.png"
        >
          <source
            data-src="https://files.vidstack.io/agent-327/720p.mp4"
            type="video/mp4"
          />
          <track
            default
            kind="subtitles"
            src="https://files.vidstack.io/agent-327/subs/english.vtt"
            srclang="en"
            label="English"
          />
        </vm-video>

        <vm-ui>
          {/* Vime components. */}
          <vm-click-to-play />
          <vm-spinner />
          <vm-poster />
          {/* Custom component. */}
          <tap-sides-to-seek />
        </vm-ui>
      </vm-player>
    );
  }
}

info

You can view the custom <tap-sides-to-seek> component here.

player.html

<vm-player>
  <vm-video
    cross-origin="true"
    poster="https://files.vidstack.io/agent-327/poster.png"
  >
    <source
      data-src="https://files.vidstack.io/agent-327/720p.mp4"
      type="video/mp4"
    />
    <track
      default
      kind="subtitles"
      src="https://files.vidstack.io/agent-327/subs/english.vtt"
      srclang="en"
      label="English"
    />
  </vm-video>

  <vm-ui>
    <!-- Vime components. -->
    <vm-click-to-play></vm-click-to-play>
    <vm-spinner></vm-spinner>
    <vm-poster></vm-poster>
    <!-- Custom component. -->
    <tap-sides-to-seek></tap-sides-to-seek>
  </vm-ui>
</vm-player>

Glorious! Here's the result 🥁 ...

tip

Click the player anywhere in the center region to toggle playback, and click to the sides to seek forwards and backwards.

So far we've seen how to setup our player and provider, load the default Vime interface and how to put together our own. It's important to keep in mind, that the examples so far have been kept simple on purpose, as they are focused mainly on getting you up and running... what you create and how far you take it is up to you.

🚂 Let's move onto controls!