Hi everyone. I need some guidance on this test code that dyanimcally loads a video into the player. When the button is clicked on my desktop it works without a problem. But testing on an iPad throws a javascript 'undefined' error - meaning the load request hit before the player had loaded.
But the example code from Brightcove gave no insight in how to code for this. It just says to wait for the template ready event.
So how woul dyou code for this in order to make suire it works on both mobile and desktops? Any help is much appreciated.
The example page is: http://bctvdev.dnsalias.net/codetest.html and the code is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Player</title>
<script type="text/javascript" src="http://admin.brightcove.com/js/APIModules_all.js"></script>
<script src="Scripts/trace.js" type="text/javascript"></script>
<script type="text/javascript">
var player;
var video, content, exp, menu, ads, social;
var videoList;
function onTemplateLoaded(pPlayer) {
trace("templateLoaded");
player = bcPlayer.getPlayer(pPlayer);
video = player.getModule(APIModules.VIDEO_PLAYER);
content = player.getModule(APIModules.CONTENT);
exp = player.getModule(APIModules.EXPERIENCE);
exp.addEventListener(BCExperienceEvent.TEMPLATE_READY, onTemplateReady);
content.addEventListener(BCContentEvent.MEDIA_COLLECTION_LOAD, onMediaCollectionLoad);
}
function onTemplateReady(e) {
trace(e.type);
videoList = exp.getElementByID("videoList");
trace("[Default Playlist] displayName: " +
content.getAllMediaCollections("playlist")[0].displayName +
" ID: " + content.getAllMediaCollections("playlist")[0].id);
}
function onMediaCollectionLoad(e) {
trace(e.type);
if(e.mediaCollection == null) {
trace("Media Collection equals null");
} else { // This means the mediaCollection is a Playlist or group of videos
trace("Value returned by getMediaCollectionAsynch()");
var mediaDTOs = new Array();
for(var i = 0; i < e.mediaCollection.mediaCount; i++) {
mediaDTOs[i] = content.getMedia(e.mediaCollection.mediaIds[i]);
}
videoList.setData(mediaDTOs);
}
}
function loadPlaylistById() {
if(exp == null || !(exp.getReady())) {
trace("Player not initialized yet. Wait till after templateReady event.");
} else {
content.getMediaCollectionAsynch(1456888299001, "id", 0, 100);
}
}
function loadVideosById() {
if(exp == null || !(exp.getReady())) {
trace("Player not initialized yet. Wait till after templateReady event.");
} else {
var mediaIdsToRequest = [1458231130001, 1458231129001, 1458231128001 ];
content.getMediaInGroupAsynch(mediaIdsToRequest);
}
}
function playVideo(videoId) {
if(exp == null || !(exp.getReady())) {
trace("Player" + exp.getReady());
} else {
trace("The VideoID is: " + videoId);
video.loadVideo(videoId);
}
}
</script>
</head>
<body style="font-family:Arial, Helvetica, sans-serif; font-size:12px">
<!-- Start of Brightcove Player -->
<div style="display:none"></div>
<!--
By use of this code snippet, I agree to the Brightcove Publisher T and C
found at http://corp.brightcove.com/legal/terms_publisher.cfm.
-->
<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>
<object id="video" class="BrightcoveExperience">
<param name="bgcolor" value="#FFFFFF" />
<param name="width" value="640" />
<param name="height" value="360" />
<param name="playerID" value="1448605417001" />
<param name="publisherID" value="1242843974001"/>
<param name="playerKey" value="AQ~~,AAABIV9GCXE~,HFilulidLsnik6NHhoJTXX_H-oJuOPia" />
<param name="isVid" value="true" />
<param name="isUI" value="true" />
<param name="dynamicStreaming" value="true" />
</object>
<br />
<div style="width:500px"> <br />
<br />
<br />
<input type="button" id="playVideo" value="Video" onclick="playVideo(1448888855001)" />
<br />
</div>
<!-- End of Brightcove Player -->
</body>
</html>
