How to dynamically change the thumbnail of video using JavaScript?

Printer-friendly version

Retrieving the Embed Code

If you are familiar with the process of finding the relevant embed code, go to change thumbnail.

  1. In the Kaltura Management Console, select the Content tab and then select the entry you want to embed.

  2.  Click the Preview & Embed link.

  3.  Click Show Advanced Options, then change the embed type to Dynamic Embed.

  4. Click the Copy button to copy the embed code to the clipboard and add the code to the source code of the specific webpage.

Changing the Thumbnail

After embedding the player, the JavaScript code needs to be added to the page.

  1. Add the following code to the bottom of your page:
    1
    2
    3
    4
    5
    6
    7
    <script> 
        kWidget.addReadyCallback( function( playerId ){ 
            kdp = document.getElementById( playerId ); 
            var imageUrl = "LOCATION OF THE IMAGE"
            kdp.setKDPAttribute("mediaProxy.entry""thumbnailUrl", imageUrl); 
        }); 
    </script>
  2. In the above code, change the imageUrl value to match the URL of the image.
  3. Save the file. The thumbnail is changed despite the default settings set in the Kaltura Management Console. 

 

Document type: 
(12111 reads)