support Contact Support | system status System Status
Page Contents

    Display Thumbnail Previews Plugin

    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 embed code

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

    1. In Video Cloud Studio, open the MEDIA module.
    2. Select a video that you want to use, and select the Publish and Embed button.
    3. In the dialog, select either the Brightcove Default Player, or a player that you have configured.
    4. Copy the Advanced embed code, and add an id attribute to the video-js tag. It should look similar to this:

      <video-js
        id="myPlayerID"
        data-account="1752604059001"
        data-player="default"
        data-embed="default"
        controls=""
        data-video-id="2026618970001"
        data-playlist-id=""
        data-application-id=""
        width="960" height="540"></video-js>
      <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
    5. Paste the player embed code into an editor with your HTML page code.
    6. In the head section of your page code, add the following CSS file:
      <link rel="stylesheet" type="text/css" href="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.css">
    7. In the body section, below the player embed code, add the following JavaScript file:
      <script src="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.js"></script>
    8. Below the previous script, add a script block with the following:

      • Get a reference to the player when it is ready
      • Call the thumbnails plugin with preview thumbnail images
      <script>
        videojs.getPlayer('myPlayerID').ready(function() {
          var myPlayer = this;
      
          myPlayer.thumbnails(thumb_data);
        });
        var thumb_data = {
            "0": {
                "src": "http://solutions.brightcove.com/bcls/assets/images/sea-lionfish-thumbnail.png",
                "width": 120
            },
            "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"
            }
        };
      	</script>

      This example 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.

    9. Here is the complete code example:

      <!doctype html>
      <html>
      
      <head>
      	<meta charset="UTF-8">
      	<title>Display Thumbnail Previews</title>
      	<link rel="stylesheet" type="text/css" href="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.css">
      </head>
      
      <body>
      	<video-js
      		id="myPlayerID"
      		data-account="1752604059001"
      		data-player="default"
      		data-embed="default"
      		controls=""
      		data-video-id="2026618970001"
      		data-playlist-id=""
      		data-application-id=""
      		width="960" height="540"></video-js>
      	<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
      
      	<!-- Script for thumbnails plugin -->
      	<script src="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.js"></script>
      
      	<script>
      	  videojs.getPlayer('myPlayerID').ready(function() {
      	    var myPlayer = this;
      
      			myPlayer.thumbnails(thumb_data);
      	  });
      		var thumb_data = {
              "0": {
                  "src": "http://solutions.brightcove.com/bcls/assets/images/sea-lionfish-thumbnail.png",
                  "width": 120
              },
              "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"
              }
          };
      	</script>
      </body>
      </html>

    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.
    • width:
      • This property needs to be included for the first thumbnail image. It keeps the image from sliding out of display when near the beginning or end of the progress bar.

    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",
            "width": 120
        },
        "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


    Page last updated on 16 Jul 2020