examples/html/index.html

<!DOCTYPE html>
<html dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>@vime/html-example</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />

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

    <!-- Optional light theme (extends default). -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vime/core@^5/themes/light.css"> -->

    <!-- The library is lazy loaded so you have nothing to worry about, only what you use will be loaded. -->
    <script
      defer
      type="module"
      src="https://cdn.jsdelivr.net/npm/@vime/core@^5/dist/vime/vime.esm.js"
    ></script>
  </head>

  <body>
    <div id="container">
      <vm-player playsinline>
        <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"
          />
          <track
            kind="subtitles"
            src="https://files.vidstack.io/agent-327/subs/spanish.vtt"
            srclang="es"
            label="Spanish"
          />
        </vm-video>

        <vm-default-ui></vm-default-ui>
      </vm-player>
    </div>

    <script>
      window.player = document.querySelector('vm-player');
    </script>

    <style>
      body,
      html {
        width: 100%;
        height: 100%;
      }

      body {
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      #container {
        width: 100%;
        max-width: 960px;
      }
    </style>
  </body>
</html>