Thumbnail previews

The OpenTV Player SDK for Browsers can be configured to display preview thumbnails when the mouse pointer hovers over the seek/progress bar. To enable this feature, pass the URL of a WebVTT thumbnail resource to the otvtoolkit:

playerInstance.otvtoolkit().addThumbnailPreview(thumbnailWebvttUrl);

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

Always use low resolution thumbnails as thumbnail rendering can adversely affect video playback.

Example code

The following example code can be used to enable thumbnail previews.

<!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"
    ></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>