Contact Support | System Status
Page Contents

    Thumbnail Seeking with Brightcove Player

    In this topic, you will learn the how to implement thumbnail seeking with Brightcove Player.

    Overview

    Video thumbnail images allow users to quickly scan the progress bar for the section they are interested in. Brightcove Player displays thumbnail images when the user hovers over the progress bar. Clicking on the progress bar takes them to that location in the video.

    When are images generated?

    Brightcove generates the images dynamically on request. Any video ingested with Dynamic Delivery will have images generated on the first request. This ensures that images are not created for unused videos. Once generated, images are cached locally and on the CDN for repeat viewing, just like any other image.

    What is the image frequency for a video?

    The thumbnails list is filtered down based on the pixel width of the player at initialization. This list varies significantly depending on player styling, window sizing, platform/device, etc. The thumbnail plugin aims to show a new thumbnail roughly every 30px as the user hovers over the progress bar. For example, if the player is 1,500px wide, the player will attempt to filter the list down to 50 thumbnails. The remaining time intervals for the WebVTT cues are adjusted according to the content’s duration.

    Requirements

    The following requirements apply to the thumbnail plugin:

    • You must use a Brightcove Player version 6.41.0+
    • Videos must be ingested for Dynamic Delivery
    • This feature requires using the Playback API v2
    • For server-side ad insertion (SSAI), you must use the videojs-ssai plugin version 1.10.0+

    Player example

    Click on the example below, and hover along the progress bar to see preview thumbnails.

    See the Pen Thumbnails plugin by Brightcove Learning Services (@bcls1969) on CodePen.


    Source code

    You can view the source code by selecting the HTML button in the CodePen above, or you can view the complete solution on GitHub.

    Getting started

    This feature is available to anyone with a Brightcove Video Cloud account.

    Make sure your videos are ingested for Dynamic Delivery.

    Implementing thumbnails using Studio

    The easiest way to configure your player for thumbnail seeking is with Video Cloud Studio.

    1. Open the PLAYERS module. Use an existing player or create a new one.

    2. Select the player link to open the player's properties.
    3. In the left navigation, select Controls.
    4. Check Thumbnail Seeking.

      Thumbnails checkbox
      Brightcove plugin
    5. To publish the player, select Publish & Embed > Publish Changes

      Publish Changes
      Publish Changes
    6. The thumbnails plugin is now configured for your player.

      Use a video ingested for Dynamic Delivery and publish it with the player we configured in the steps above. You should see thumbnail images when you hover over the player's progress bar.

    Implementing WebVTT thumbnails

    If you choose to use your own thumbnail images, you can create a custom WebVTT file and pass it to the player using the player.addRemoteTextTrack() method. Here are the steps:

    1. Create a .vtt file that follows the standard WebVTT format. Replace caption text with the URL for each thumbnail image. It may look something like this:

      WebVTT file
      WebVTT file
    2. In Video Cloud Studio, choose a video ingested for Dynamic Delivery. Copy the Advanced Embed code for a player with version 6.41.0+.
    3. In the HTML file for your web page, paste the Advanced Embed code.
    4. In the head section of your HTML code add the thumbnails CSS file:
      //players.brightcove.net/videojs-thumbnails/1/videojs-thumbnails.css
    5. In the body section of your HTML code add the thumbnails JavaScript file:
      //players.brightcove.net/videojs-thumbnails/1/videojs-thumbnails.js
    6. To the video tag, add an id property.
    7. Before the closing body tag, add a script block.
    8. In the script block you just created, add the following:

      Property Value
      type The mime-type for your video
      src The source URL for your video

      Your code should be similar to this:

      var player = bc('myPlayerID');
      
      player.thumbnails();
      
      player.ready(() => {
        player.src({
          type: 'video/mp4',
          src: '//solutions.brightcove.com/bcls/videos/Great Blue Heron.mp4'
        });
      });
    9. In the same script block, add the following:

      After the plugin is initialized and the player is ready, you will pass thumbnail image sources to the plugin in a WebVTT file using the addRemoteTextTrack() method. When calling the method with the thumbnail file, you must also set:

      Property Value
      src The location of your WebVTT file with thumbnail images
      kind Set to metadata
      label Set to thumbnails
      mode Set to hidden
      addRemoteTextTrack() manualCleanup Set to false so that the track is automatically removed when the source changes

      Your code should be similar to this:

      var player = bc('myPlayerID');
      
      player.thumbnails();
      
        player.ready(() => {
          player.src({
            type: 'video/mp4',
            src: '//solutions.brightcove.com/bcls/videos/Great Blue Heron.mp4'
          });
      
        player.addRemoteTextTrack({
          src: 'thumbnails.vtt',
          kind: 'metadata',
          label: 'thumbnails',
          mode: 'hidden'
        }, false);
      });

    Source code

    For details, see the complete solution on GitHub.

    Changelog

    See the changelog here.


    Page last updated on 19 Jun 2021