Display Thumbnail Previews Plugin

Product(s)
Video Cloud
Brightcove Player
Role(s)
Player Developer
Topic(s)
Images
Plugins

In this topic, you will learn about the thumbnail previews plugin which allows for the timeline to display a preview image at defined points for your video. The user can mouse over the timeline and images defined by you will be displayed for specified time ranges.

Example

The image below shows a thumbnail displayed as the user mouses over the progress bar:

thumbnail-plugin-display

The sample video below demonstrates the use of the Thumbnails Plugin. Start playing the video. Then, mouse over the progress bar and select a thumbnail image to jump to that section of the video.

This topic contains the following sections:

Collect thumbnail images

At this time you must collect the images yourself. Preview thumbnails can be generated as part of the Zencoder encoding process. Also, tools exist like SnapMotion to automate this process.

No matter how you generate the images, you need to decide the number of images you wish to use and choose an appropriate size.

Implement using Players module

Thumbnails can be configured by using the thumbnails plugin. To implement the thumbnails plugin using the Players module, follow these steps:

  1. Open the PLAYERS module and either create a new player or locate the player to which you wish to add the plugin.
  2. Click the link for the player to open the player's properties.
  3. Click Plugins in the left navigation menu.
  4. Next, click Add a Plugin.
  5. For the Plugin Name enter thumbnails.
  6. For the JavaScript URL, enter:
    https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.js
  7. For the CSS URL, enter:
    https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.css
  8. Enter the configuration options in the Options(JSON) text box. The example below will display a thumbnail preview image as the mouse hovers over the timeline as follows:
    • The sea-lionfish-thumbnail.png image is be displayed from video start to 29 seconds
    • The sea-anemone-thumbnail.png image is displayed from 29 seconds to 54 seconds
    • The sea-clownfish-thumbnail.png image is displayed from 54 seconds to 84 seconds

      . . .

    • The sea-dolphins-thumbnail.png image is displayed from 143 seconds to the end of the video

    For details about the plugin options, see the Properties section.

      {
        "0": {
            "src": "http://solutions.brightcove.com/bcls/assets/images/sea-lionfish-thumbnail.png"
        },
        "29": {
            "src": "http://solutions.brightcove.com/bcls/assets/images/sea-anemone-thumbnail.png"
        },
        "54": {
            "src": "http://solutions.brightcove.com/bcls/assets/images/sea-clownfish-thumbnail.png"
        },
        "84": {
            "src": "http://solutions.brightcove.com/bcls/assets/images/sea-seahorse-thumbnail.png"
        },
        "114": {
            "src": "http://solutions.brightcove.com/bcls/assets/images/sea-crab-thumbnail.png"
        },
        "143": {
            "src": "http://solutions.brightcove.com/bcls/assets/images/sea-dolphins-thumbnail.png"
        }
      }
  9. Click Save.
  10. To publish the player, click Publish & Embed > Publish Changes.
  11. To close the open dialog, click Close.

Properties

The following plugin properties are used to control the thumbnail images:

  • first argument:
    • The value can be a string or number, and is associated with an object.
    • This defines the time in seconds you wish to display your thumbnail image.
    • At a minimum, you need a 0 property with a src value for when users hover over the beginning of the progress bar. If you have additional times, the plugin will partition the progress bar and display the appropriate image as the user hovers over the progress bar.
     
  • src:
    • The value must be a string.
    • This is the URL for your thumbnail image.

Here is an example for setting thumbnail images for three blocks of time in the progress bar:

  • The first image is displayed when a user mouses over the progress bar from video start to 5 seconds
  • The second image is displayed from 5 seconds to 10 seconds
  • The third image is displayed from 10 seconds to video end
  {
    "0": {
        "src": "http://solutions.brightcove.com/bcls/assets/images/Tiger-4-preview.jpg"
    },
    "5": {
        "src": "http://solutions.brightcove.com/bcls/assets/images/Water-4-preview.jpg"
    },
    "10": {
        "src": "http://solutions.brightcove.com/bcls/assets/images/BirdsOfAFeather-4-preview.jpg"
    }
  }

CSS image sprites

If you choose you can use CSS image sprites as your preview thumbnails. The following JSON is an example for the options property when using a CSS image sprite:

{
  0: {
    src: 'thumbnails.png',
    style: {
      left: '-60px',
      width: '600px',
      height: '68px',
      clip: 'rect(0, 120px, 68px, 0)'
    }
  },
  10: {
    style: {
      left: '-180px',
      clip: 'rect(0, 240px, 68px, 120px)'
    }
  },
  20: {
    style: {
      left: '-300px',
      clip: 'rect(0, 360px, 68px, 240px)'
    }
  },
  30: {
    style: {
      left: '-420px',
      clip: 'rect(0, 480px, 68px, 360px)'
    }
  },
  40: {
    style: {
      left: '-540px',
      clip: 'rect(0, 600px, 68px, 480px)'
    }
  }

Changelog

None reported