Skip to content

Instantly share code, notes, and snippets.

@derak-kilgo
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.
Brightcove Smart Player API Example
<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>
@srinathpandit
Copy link

not at all working

@derak-kilgo
Copy link
Author

If you clone this to your desktop and try to run it, it won't work.
Flash and your web browser place limits on what local files (file:///) can access.

Load it from a web server (local or remote) and it should work.
http://www.derakkilgo.com/files/brightcove-smartplayer-api-sample.html

Tested in firefox 32.x and chrome 37.x

@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