Thumbnail previews
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
.
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.
<!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>