CODEWITHSUNDEEP
javascriptbrightcove
Angel
Angel

Reputation: 1980

Brightcove two players API

I'm using the brightcove api as the guide shows (below), but my problem is that I can't manage two players this way, and I need it:

<object id="VideoBrightcove?c=4&m=2&s=2" class="BrightcoveExperience">
  <param name="bgcolor" value="#FFFFFF" />
  <param name="width" value="480" />
  <param name="height" value="270" />
  <param name="playerID" value="2549948545001" />
  <param name="playerKey" value="AQ~~,AAABmA9XpXk~,-Kp7jNgisreVadKjzdyJfLcfukyXcGqB" />
  <param name="isVid" value="true" />
  <param name="isUI" value="true" />
  <param name="dynamicStreaming" value="true" />
  <param name="includeAPI" value="true" />
  <param name="templateLoadHandler" value="BCLS.onTemplateLoad" />
  <param name="templateReadyHandler" value="BCLS.onTemplateReady">
  <param name="@videoPlayer" value="1754261637001" />
</object>

<script>
    var BCLS = (function() {
        var player,APIModules,mediaEvent,videoPlayer;
        return {
            onTemplateLoad : function (experienceID) { 
                //do something
            },
            onTemplateReady : function (evt) { 
                //do something
            },
            onProgress : function (evt) {
                //do something
            },
            onBegin : function (evt) {
                //do something
            },
            onComplete : function (evt) {
                //do something
            }
        }
    }());
</script>

Any idea to manage more than one player?

Upvotes: 2

Views: 508

Answers (1)

misterben
misterben

Reputation: 7821

A lot of the code samples you'll for using the Smart Player API use global variables, or as I assume you're doing, BCLS.player for the "experience", BCLS.videoPlayer for the video player module and so on. That won't work well with multiple players unless you maintain a separate set of load/ready handler functions and a separate set of variables for each player. That won't scale well.

The easiest way to work with multiple players is to rely on the event passed to the event handler as this includes the player id at event.target.experience.id.

function onTemplateReady(event) {
  var player = brightcove.api.getExperience(event.target.experience.id);
  var videoPlayer = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
}

When using addEventHandler, you'll need to wrap functions in an anonymous function instead of using just the function name:

videoPlayer.addEventListener(brightcove.api.events.MediaEvent.PLAY, function(event) {onPlay(event)})
//instead of videoPlayer.addEventListener(brightcove.api.events.MediaEvent.PLAY, onPlay})

You could pass other modules etc to those functions if you need to, e.g. if this were done in the onTemplateReady above, the player can be available in the player handler:

videoPlayer.addEventListener(brightcove.api.events.MediaEvent.PLAY, function(event) {onPlay(event,player)})

See this example which uses some of the above techniques, which is an example of stopping other players when one plays.

Upvotes: 2

Related Questions