How to dynamically change player id and key?

Question

I'm using brightcove video cloud platform and specifically the smartplayer API (http://support.brightcove.com/en/video-cloud/docs/using-smart-player-api) on a website. When a new video link is clicked I'm firing in jQuery modVP.loadVideoByID(); to change the video in the current smart player (which is working). I've included that code below. In addition to changing the active video, how can I change the actual player as well (param playerid and playerkey)?

Working jQuery

function myTemplateLoaded(experienceID) {
player = brightcove.api.getExperience(experienceID);
modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
modExp = player.getModule(brightcove.api.modules.APIModules.EXPERIENCE);
}

Player embed code:

  <div id="video_player_wrapper">   <div id="video_player">
                <object id="myExperience" class="BrightcoveExperience" >
                            <param name="bgcolor" value="#FFFFFF" />
                            <param name="width" value="620" />
                            <param name="height" value="400" />
                            <param name="playerID" value="player-id-value-i-want-to-change-this" />
                            <param name="autoStart" value="false" />
                            <param name="playerKey" value="Player-key-value-i-also-want-to-change-this" />
                            <param name="isVid" value="true" />
                            <param name="isUI" value="true" />
                            <param name="dynamicStreaming" value="true" />
                            <param name="includeAPI" value="true" />
                            <param name="templateLoadHandler" value=myTemplateLoaded />
                            <param name="templateReadyHandler" value=onTemplateReady />
                            <param name="wmode" value="transparent" />
                            <param name="@videoPlayer" value="" />
                        </object>
                        <script type="text/javascript">brightcove.createExperiences();</script>
                        <div onClick="javascript: closeVideoPlayer();" id="videos_player_close">X</div>

You can't change the player once loaded, you'd have to remove the it and create a new one. Why do you need to do that? — misterben
Long story, but the client wants a different advertisement experience based on the number of videos a user has viewed, and the standard way the ad server we are using does this is via a 3rdparty ad cookie, but this is blocked in safari by default, so one alternative solution was to swap the player after so many views and have that player contain the desired ad experience. It's not the clean-ist solution, but at least it's not a "hack". — user1073319
I'll have to test setAdPolicy() on this, I wonder if it's the same as setting the ad policy via the brightcove admin control panel (or how that is implemented). I know if you use LiveRail with frequency caps set in UI (though brightcove integration), it does work, but not in all browsers aka the safari issue I mentioned above. I did get the dynamic replace working, but it's a less than idea solution. I will definitely test setAdPolicy cross browser — user1073319

Robert Crooks Robert Crooks · Accepted Answer · 2013-12-08T19:40:02

You don't need the API for this, just JavaScript/jQuery and the script that's included in the JavaScript (Website) embed code: <script language="JavaScript" type="text/javascript" src="//admin.brightcove.com/js/BrightcoveExperiences.js"></scriptGGT

You need to remove the current player from the DOM and inject the new one - easiest way would be to wrap the player in a div and then set its HTML to the player code. (Simply replacing the player ID and Key after the player has been instantiated won't do it.)

Then you need to call

brightcove.createExperiences();

Also, see this article

How to dynamically change player id and key?

1 Answers