Skip to content

Instantly share code, notes, and snippets.

@derak-kilgo

derak-kilgo/brightcove-smartplayer-api-sample.html

Last active December 19, 2015 14:29
Show Gist options
  • Save derak-kilgo/5969488 to your computer and use it in GitHub Desktop.
Save derak-kilgo/5969488 to your computer and use it in GitHub Desktop.
Download ZIP
Brightcove Smart Player API Example
Raw
brightcove-smartplayer-api-sample.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Sample2</title>
<script language="JavaScript" type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>
<p>Make sure you've got the dev console open or you won't see my messages.</p>
<button id="positionButton">Get position</button>
<button id="jsStartPlayback">Play</button>
<button id="jsStopPlayback">Stop</button>
<button id="jsSeek">Jump to...</button>
<button id="jsIsPlaying">Is the video playing?</button>
</div>
<hr />
<!-- Start of Brightcove Player -->
<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>
<object id="myExperience921449663001" class="BrightcoveExperience">
<param name="bgcolor" value="#FFFFFF" />
<param name="width" value="480" />
<param name="height" value="270" />
<param name="playerID" value="2079935931001" />
<param name="playerKey" value="AQ~~,AAAA1oy1bvE~,ALl2ezBj3WE0z3yX6Xw29sdCvkH5GCJv" />
<param name="isVid" value="true" />
<param name="isUI" value="true" />
<param name="dynamicStreaming" value="true" />
<param name="@videoPlayer" value="921449663001" />
<!-- smart player api params -->
<param name="includeAPI" value="true" />
<param name="templateLoadHandler" value="ESC13.onTemplateLoad" />
<param name="templateReadyHandler" value="ESC13.onTemplateReady" />
</object>
<script type="text/javascript">brightcove.createExperiences();</script>
<!-- End of Brightcove Player -->
<script type="text/javascript">
/*
* Based on the example found here: http://docs.brightcove.com/en/video-cloud/smart-player-api/samples/basic-setup.html
*/
// global namespace for our project.
var ESC13 = {};
/*
* This callback will store the progress each time its called into a var we can access globally.
*/
ESC13.intProgress = 0;
ESC13.onProgress = function(evt){
ESC13.lastEvt = evt;
ESC13.intProgress = evt.position;
ESC13.currentVideoId = evt.media.id;
ESC13.videoState = evt.type;
};
/*
* Test if the video player has reported that its currently playing in the last event object.
*/
ESC13.isPlaying = function(){
if(ESC13.lastEvt.type == 'mediaProgress'){
return true;
}else{
return false;
}
}
/*
* Called when the player and modules are loaded.
* At this step the player object can be accessed.
*/
ESC13.onTemplateLoad = function (experienceID) {
console.log('called onTemplateLoad');
//Save a reference to the player and API Modules and Events so we can access them directly.
ESC13.player = brightcove.api.getExperience(experienceID);
ESC13.APIModules = brightcove.api.modules.APIModules;
ESC13.adEvent = brightcove.api.events.AdEvent;
ESC13.captionsEvent = brightcove.api.events.CaptionsEvent;
ESC13.contentEvent = brightcove.api.events.ContentEvent;
ESC13.cuePointEvent = brightcove.api.events.CuePointEvent;
ESC13.mediaEvent = brightcove.api.events.MediaEvent;
};
/*
* Called when all resources(video) are loaded and ready to use. Occurs after onTemplateLoad
*/
ESC13.onTemplateReady = function (evt) {
console.log('called onTemplateReady');
//Stub lastEvt so isPlaying doesn't error if video isn't loaded.
ESC13.lastEvt = {'type':false,'media':{'id':false}};
ESC13.videoPlayer = ESC13.player.getModule(ESC13.APIModules.VIDEO_PLAYER);
//The progress can't be accessed directly but we can set an event that will update
//a variable we can access when ever we want.
ESC13.videoPlayer.addEventListener(ESC13.mediaEvent.PROGRESS, ESC13.onProgress);
ESC13.videoPlayer.addEventListener(ESC13.mediaEvent.SEEK_NOTIFY, ESC13.onProgress);
ESC13.videoPlayer.addEventListener(ESC13.mediaEvent.STOP, ESC13.onProgress);
ESC13.videoPlayer.addEventListener(ESC13.mediaEvent.COMPLETE, ESC13.onProgress);
ESC13.videoPlayer.addEventListener(ESC13.mediaEvent.PLAY, ESC13.onProgress);
ESC13.videoPlayer.addEventListener(ESC13.mediaEvent.BEGIN, ESC13.onProgress);
};
/*
* Click events for our control buttons. Notice how they access the api.
* @see http://docs.brightcove.com/en/video-cloud/smart-player-api/reference/symbols/brightcove.api.html
*/
$('#positionButton').click(function(){
console.log('getting position...');
ESC13.videoPlayer.pause();
//This is another way to get position but its not as reliable because it has to use an async call back which may not
//return before the value is needed. Its better to use the mediaEvent listeners.
//ESC13.videoPlayer.getVideoPosition(false,function(tmp){ESC13.intProgress = tmp});
console.log(ESC13.intProgress);
alert('Position is ' + ESC13.intProgress);
});
$('#jsStartPlayback').click(function(){
ESC13.videoPlayer.play();
});
$('#jsStopPlayback').click(function(){
ESC13.videoPlayer.pause();
});
$('#jsIsPlaying').click(function(){
var output = '';
if(ESC13.isPlaying()){
output = "I'm playing a video. ";
}else{
output = "I'm stopped or complete.";
}
output += ' [' + ESC13.videoState + '][' + ESC13.currentVideoId + ']';
alert(output);
});
$('#jsSeek').click(function(){
var seconds = prompt('Enter the new position in seconds.',0.0);
//should be decimal number.
seconds = parseFloat(seconds)
ESC13.videoPlayer.seek(seconds);
});
if(typeof console === "undefined") {
console = { log: function() { } };
}
</script>
</body>
</html>
@theluu
Copy link

theluu commented Sep 8, 2015

not at all working

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment