support Contact Support | system status 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?

    Images are generated every 5 seconds for content < 1 hour, and every 10 seconds for content > 1 hour.

    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 Plugins.
    4. Expand the Add a Plugin dropdown menu, and select Brightcove plugin.

      Brightcove Plugin
      Brightcove plugin
    5. Expand the Brightcove Plugin dropdown menu, and select thumbnails.

      Thumbnails plugin
      Thumbnails plugin
    6. Select the Save button. You should now see the plugin added to your player.

      Thumbnails plugin added
      Thumbnails plugin added
    7. To publish the player, select Publish & Embed > Publish Changes

      Publish Changes
      Publish Changes
    8. 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.

    Limitations

    Here are the limitation associated with the thumbnails plugin.

    • The current version of this plugin does not support thumbnails on mobile devices.

    Changelog

    See the changelog here.


    Page last updated on 08 Jan 2021