Thumbnails

There are two different ways that the MediaPlayer class can handle the rewind and fast forward commands when dealing with video media. The first method is to pause the media that is currently playing and to display a timeline with an icon indicating the current location. The current time is displayed in a box adjacent to the icon on the timeline.

The second method still pauses the media, but it displays a thumbnail adjacent to the timeline instead of the current time. As the user rewinds or fast forwards, the relative position on the timeline changes as well. The thumbnail displays an image of the video corresponding to that relative position on the timeline. You need to provide these thumbnails in order for them to be displayed properly. This topic demonstrates how to provide those thumbnails.

Supporting Thumbnails

The first step in supporting thumbnails is to make sure that you have set TVJS.MediaPlayer.thumbnailEnabled to true. Once this property is set, your media app will be configured to use thumbnails when rewinding and fast forwarding. This value is set to true by default. Once this parameter is set, you need to add an event handler for the MediaPlayer.thumbnailrequest Event. This event is generated whenever the app needs to display a thumbnail adjacent to the timeline. In this event handler, set the MediaPlayer.thumbnailImage Property.

You will also need to create the thumbnail images to use based on the current timestamp for the media. The most common way to do this is to create an image repository outside of your app running on the console. You can then pull the images from this repository and provide the URI for the thumbnail image to the MediaPlayer object.

The thumbnail will display a black box if you are attempting to display a thumbnail image that is not fully loaded. Because of this, it is recommended that you wait until an image is loaded before you set the value of MediaPlayer.thumbnailImage. The small sample of code below provides one way to cache an image and keep track of whether or not it is ready to use. By checking to see if the image is loaded, you will not display a black box to the user in the thumbnail window. This sample automatically loads the first image in the repository for this title.

JavaScript

// Create an image and set the source  
var tempImage = new Image();  
tempImage.src="http://www.contoso.com/<contentId>/0.png";  
  
// Create a loaded handler to let us know when the image is loaded  
tempImage.addEventListener("load", function () {  
    bImageReady = true;  
});  

The following code sample creates an event handler for the thumbnailRequest event and then sets the image using a repository. In this sample, the assumption is that there will be a new image in the repository for every five seconds of the media.

JavaScript

function showThumbnails() { 
   
    // Get the media player  
    var mediaPlayer = document.getElementById("myMediaPlayer").tvControl;  
  
    // Get the timestamp for the media  
    var currentTime = mediaPlayer.targetCurrentTime;  
 
    // Set it to the lower 5 seconds  
    currentTime = currentTime - (currentTime % 5);   
  
    // Get the thumbnail URI based on the contentId and the timestamp  
    var thumbnailImage = "http://www.contoso.com/<contentId>/" + currentTime.toString() + ".png";  
  
    // Set the thumbnail image  
    mediaPlayer.thumbnailImage = thumbnailImage;  
}  
  
function handleLoadedMetadata() {  
    var mediaPlayer = document.getElementById("myMediaPlayer").tvControl;  
  
    mediaPlayer.addEventListener("thumbnailrequest", showThumbnails, false);  
};