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. This feature has limited support in 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. Two formats are currently supported - WebVTT and DASH.

WebVTT thumbnails are not supported in the Reduced Size SDK.

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

Enabling WebVTT thumbnails

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.

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>

Enabling DASH thumbnail previews

For DASH, this feature is automatically enabled if the stream contains thumbnails. When available, the built-in control bar will display available thumbnails. Otherwise, the thumbnails are made available for use by external control bars via the OtvToolkit.getThumbnail() function which is suitable in the Reduced Size SDK use case.

JS

playerInstance.otvtoolkit().getThumbnail(time, callback);

The callback function takes a Thumbnail(url:String, x:int, y:int, width:int, height:int) object.

Use the following example code to access DASH 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);

            // This gets the thumbnail at 150s and logs the URL
            playerInstance
              .otvtoolkit()
              .getThumbnail(150, (thumbnail) => console.log.(thumbnail.url));
          }
        );
      }
    );
    </script>
  </body>
</html>

Thumbnail objects returned from getThumbnail() can easily be turned into a displayable element.

JS

function createThumbnail(thumbnailData) {
  let thumbnail = document.createElement("div");
  thumbnail.style.backgroundImage = `url(${thumbnailData.url})`;
  thumbnail.style.backgroundRepeat = "no-repeat";
  thumbnail.style.width = `${thumbnailData.width}px`;
  thumbnail.style.height = `${thumbnailData.height}px`;
  thumbnail.style.backgroundPosition = `-${thumbnailData.x}px -${thumbnailData.y}px`;
  return thumbnail;
}