Skip to main content
Version: 11.7.0

How to implement preview thumbnails on Web

This article describes how you can enable preview thumbnails, which THEOplayer implements through the TextTrack API. The thumbnails are loaded as a separate text track, by side-loading them as a text track in your source description.

A demo of the preview thumbnails on the THEOplayer Web SDK is available at https://demo.theoplayer.com/preview-thumbnails.

Usage​

player.source = {
  sources: {
    type: 'application/x-mpegurl',
    src: 'https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8',
  },
  textTracks: [
    {
      default: true,
      src: 'https://cdn.theoplayer.com/dash/theoplayer/thumbnails/big_buck_bunny_thumbnails.vtt',
      label: 'thumbnails',
      kind: 'metadata',
    },
  ],
};

If you use the Open Video UI for Web or THEOplayer's default UI, the thumbnails are shown automatically when hovering or scrubbing the seek bar.