brightcove

Load a new video by id into a Brightcove Player loaded via Brightcove Player Loader


I have loaded a Brightcove video player on my page with Brightcove Player Loader:

brightcovePlayerLoader({
    refNode: document.querySelector('#mainvid'),
     accountId: myaccountId, //this is a variable with global scope
    playerId: '947WeZ6d',
        videoId: mainvidID
     })
    .then(function(success) {
        myPlayer = success.ref;
        console.log('success', success);
        myPlayer.on('loadedmetadata',function(){
            //myPlayer.muted(true);
            //myPlayer.play();
         });
    })
    .catch(function(error) {
        console.log('error', error);
}); 

When the user clicks an image, I want to read the ID of the image and use that as a new VideoID for myPlayer. But how would I do that?

$('.vid-thumbnail').on('click', function() {
    myPlayer.videoId = maidvidID; //doesn't work
});

Solution

  • Use the regular player catalog methods with the player returned in success.

    myPlayer.catalog.getVideo('12345', function(error, video){
      myPlayer.catalog.load(video);
    });