Chapter markers

Tip: open your browser's developer console and use the player and THEOplayer variables to interact with this demo.

Add a side-loaded text track of kind chapters to your source. Open Video UI shows a marker on the seek bar for each chapter, and the title of the current chapter above the seek bar. When you hover the seek bar, it shows the title of the chapter under the pointer.

player.source = {
  sources: { src: 'https://cdn.theoplayer.com/video/sintel/nosubs.m3u8' },
  textTracks: [
    {
      kind: 'chapters',
      src: 'https://cdn.theoplayer.com/video/sintel/chapters.vtt',
      format: 'webvtt',
      srclang: 'en',
      label: 'Chapters',
      default: true,
    },
  ],
};

<theoplayer-default-ui> shows chapters by default from Open Video UI version 2.7.0. In a custom layout with <theoplayer-ui>, add the show-chapter-markers attribute to <theoplayer-time-range>, and add a <theoplayer-chapter-display> to show the current chapter title. See the custom UI guide for more on building a layout.

<theoplayer-ui configuration="..." source="...">
  <theoplayer-chapter-display></theoplayer-chapter-display>
  <theoplayer-control-bar>
    <theoplayer-time-range show-chapter-markers></theoplayer-time-range>
  </theoplayer-control-bar>
  ...
</theoplayer-ui>

Code

demo.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Chapter markers</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        font-family: 'Noto Sans', sans-serif;
      }

      theoplayer-default-ui:not(:defined) {
        display: inline-block;
        box-sizing: border-box;
      }

      theoplayer-default-ui {
        width: 100%;
        font-family: 'Noto Sans', sans-serif;
      }
    </style>
    <script src="https://cdn.theoplayer.com/dash/theoplayer/THEOplayer.js"></script>
    <script nomodule src="https://unpkg.com/@theoplayer/web-ui@2/polyfills"></script>
    <script async src="https://unpkg.com/@theoplayer/web-ui@2"></script>
  </head>
  <body>
    <!--
      libraryLocation: For demonstration purposes, we use the THEOplayer CDN.
      For production use, host the library yourself and update this URL and the script above.

      licenseUrl: Point this to your license file, or replace it with a license property.
    -->
    <theoplayer-default-ui
      configuration='{"libraryLocation":"https://cdn.theoplayer.com/dash/theoplayer/","licenseUrl":"../../../../theoplayer-license.txt","mutedAutoplay":"all"}'
      source='{"sources":{"src":"https://cdn.theoplayer.com/video/sintel/nosubs.m3u8"},"poster":"https://cdn.theoplayer.com/video/posters/sintel.jpg","metadata":{"title":"Sintel"},"textTracks":[{"kind":"chapters","src":"https://cdn.theoplayer.com/video/sintel/chapters.vtt","format":"webvtt","srclang":"en","label":"Chapters","default":true}]}'
    ></theoplayer-default-ui>
  </body>
</html>