Thumbnail previews

To test this feature and view the example code, please see the Browsers and Connected TV SDK 5 Example Code Quick Start guide.

The CONNECT Player SDK can be configured to display preview thumbnails when you run your mouse pointer over the seek/progress bar. Currently, only WebVTT format thumbnails are supported.

To enable this feature, pass the URL of a WebVTT thumbnail resource to the otvtoolkit.

JS

playerInstance.otvtoolkit().addThumbnailPreview(thumbnailWebvttUrl);

The thumbnail preview must be added after setting the player source.

Example code

Use the following example code to enable WebVTT thumbnail previews.

XML

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="../../dist/opy-sdk-browser.css" />
    <script src="../../dist/opy-sdk-browser-all-debug.js"></script>
  </head>
  <body>
    <video
      class="video-js vjs-default-skin vjs-16-9"
      id="videoPlayer"
      controls
      crossorigin="anonymous"
    >
    Your browser does not support the video tag.
    </video>
    <script>
      document.addEventListener(
        "DOMContentLoaded",
        function initializeRefApp() {
          const playerInstance = otvplayer(
            "videoPlayer",
            // options
            {
              html5: {
                nativeCaptions: false,
                nativeAudioTracks: false
              },
              autoplay: true,
              plugins: {
                otvtoolkit: {}
              }
            },
            // loaded callback
            () => {
              const source = {
                src: "DASH stream URL",
                type: "application/dash+xml"
              };

              playerInstance.src(source);

              playerInstance
                .otvtoolkit()
                .addThumbnailPreview("Thumbnail URL");
            }
          );
        }
      );
    </script>
  </body>
</html>