Injecting a Custom Script

Support for a JavaScript injection of HVC Premium player (Bitmovin) has been added to the player generator, and works similar to how custom style injection works.

In VCMS, select Players > Player Generator from the left sidebar.  

1. On the Create Player screen, change the dropdown menu at the top left to Player Configuration. (1)
2. Either name and create a player (2) or select an existing one from the left side of the main pane. (3)
3. Next, in the main pane, click the Custom JavaScript Logic tab. (4)
4. Revise the JavaScript as desired. (5)
5. Click the Create Player or Update Player button as appropriate. (6)

All players start with a simple example that is commented out which allows the player to autoplay via .mute() and .play() ) as follows:

HvcPlayer.onLoad(function(player, config){
   //player code here
})

This script can run any code during page load that is passed into the JavaScript editor; but to control a player, you first invoke the HvcPlayer.onLoad function that accepts two parameters:

• player – which is the core Bitmovin Player API.

• config – Bitmovin config for things like thumbnail, video url, captions, etc.

After you have access to the player variable, refer to the Bitmovin Web SDK API: PlayerAPI for more information.

The following are some simplified use cases:

• Auto Play (Muted)

  HvcPlayer.onLoad(function(player, config){
     player.mute()
     player.play()
  })

• Log the Current Time Every Second

  HvcPlayer.onLoad(function(player, config){
     setInterval(function(){
        console.log(player.getCurrentTime())
     },1000)
  })

• Set a Custom Poster Image (Default is set by MPX)

  HvcPlayer.onLoad(function(player, config){
    player.setPosterImage("http://imageserver.com/defaultThumbnail.jpg")
  })

• Go to haivision.com when Playback is Finished

  // This uses player .on (For more information on what .on triggers can do, reference: 
  // https://bitmovin.com/docs/player/api-reference/web/web-sdk-api-reference-v8#/player/web/8/docs/enums/core_events.playerevent.html).
  //
  HvcPlayer.onLoad(function(player, config){
    player.on("playbackfinished", function(){
      window.location.href = "https://haivision.com"
    })
  })
  

Additional Resources

• Bitmovin Web SDK API: Interface PlayerAPI
• Bitmovin Web SDK API: Enumeration PlayerEvent