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

## 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>
	<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>