How to dynamically change player id and key?

1.9k views Asked by At

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>
1

There are 1 answers

0
Robert Crooks On BEST ANSWER

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