Last active
December 19, 2015 14:29
-
-
Save derak-kilgo/5969488 to your computer and use it in GitHub Desktop.
Brightcove Smart Player API Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
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
not at all working
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
not at all working