Thumbnail previews

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

You can configure the CONNECT Player SDK for Browsers to display preview thumbnails when you run your mouse pointer over the seek/progress bar. Two formats are currently supported - WebVTT and DASH.

To enable this feature for WebVTT, 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.

For DASH, this feature is automatically enabled if the stream contains thumbnails. The built-in control bar will display available thumbnails, and the thumbnails are made available for use by external control bars via the OtvToolkit.getThumbnail() function.

JS

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

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

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

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>

The following example code can be used to access DASH 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);

              // 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;
}