Thumbnail previews | NAGRAVISION Documentation Portal

To test this feature and view the example code, please see the

Browsers and Connected TV SDK 5 Example Code Quick Start

guide. This feature is not supported by the Reduced Size SDK.

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.

JavaScript

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-js.css" />
    <script src="../../dist/opy-sdk-js-all-integration.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>