Javascript for Brightcove video cloud

Question

I am able to play the get the alert to work on myTemplateLoaded and to get the first video to work but after that it doesn't advance to the next video... Please can someone with more experience chime in? I will be very grateful!

<!-- Start of Brightcove Player -->
<div style="display:none"> </div>
<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>
<object id="myExperience1116920512001" class="BrightcoveExperience" >
<param name="bgcolor" value="#FFFFFF" />
<param name="width" value="480" />
<param name="height" value="270" />
<param name="playerID" value="1186083953001" />
<param name="playerKey" value="AQ~~,AAAAwFCyREk~,R6fcmQA_ySLOTNBFvZ0mjvLcTW-_NNbL" />
<param name="isVid" value="true" />
<param name="isUI" value="true" />
<param name="dynamicStreaming" value="true" />
<param name="@videoPlayer" value="ref:spring" />
<param name="includeAPI" value="true" />
<param name="templateLoadHandler" value="myTemplateLoaded" />
</object>

<!-- End of Brightcove Player -->

<script type="text/javascript">
var player;
var modVP;
var modExp;
var modCon;
var previousVideoID=0;
var nextVideo=0;
var videos=new Array(1772963843001,1765076426001,17490792490011);
function myTemplateLoaded(experienceID) {
// alert(experienceID);
player = brightcove.api.getExperience(experienceID);
modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
modExp = player.getModule(brightcove.api.modules.APIModules.EXPERIENCE);
modCon = player.getModule(brightcove.api.modules.APIModules.CONTENT);
modVP.loadVideoByID(videos[nextVideo]);
modExp.addEventListener(brightcove.api.events.ExperienceEvent.TEMPLATE_READY, onTemplateReady);
}

function onTemplateReady(evt) {
modVP.addEventListener(brightcove.api.events.MediaEvent.COMPLETE, onMediaComplete);
modVP.addEventListener(brightcove.api.events.MediaEvent.CHANGE, onMediaChange);
}

function onMediaComplete() {
nextVideo++;
if (nextVideo==videos.length) {
nextVideo=0;
}
modVP.loadVideoByID(videos[nextVideo]);
}

function getCurrentVideoCallback(currentVideo) {
document.getElementById("currentVideoInfo").innerHTML = "Video named '" + currentVideo.displayName + "' loaded. Video ID: " + currentVideo.id;
}

function onMediaChange(evt) {
document.getElementById("mediaInfo").innerHTML = "NOW PLAYING: " + evt.media.displayName;
}
</script>

I have a new update to question above... code is now working in jsfiddler but not locally in browser... any ideas? (http://jsfiddle.net/ZHhKU/) — ristenk1, Aug 08 '12 at 18:35

score 0 · Answer 1 · answered Aug 09 '12 at 11:43

0

The Brightcove API won't work if run locally from the filesystem. Run the code from a web server, as you are doing when you use jsfiddle.

answered Aug 09 '12 at 11:43

misterben

7,455
2
26
47

score 0 · Answer 2 · answered May 01 '13 at 14:49

You can also test your page locally using MAMP on a mac. Just make sure to save you HTML file into the folder designated as the Document Root in the "Apache" tab of the MAMP Preferences. You should also "Set to default Apache and MySQL ports" in the "Ports" tab.

http://www.mamp.info/en/index.html

score 0 · Answer 3 · answered Aug 08 '13 at 21:45

You can also adjust the settings in the player interface inside of Brightcove itself. You can select within the player settings to have the next video begin when the first is done loading, and then just enter the embed code.

http://support.brightcove.com/en/video-cloud/training-videos/setting-playlists-auto-advance

Javascript for Brightcove video cloud

3 Answers3