MediaStop event issue [ Edited ]

[jlarrigan]

I may just be doign this wrong but is there a better way to track on pause or stop events. Right now I am using on stop and it seems like it's messing up my onPlay. 

You can see what I am working with on my testing site. http://mycollectiverectum.com/?videos=toyko . If I drop the on Stop event the background fades out.

If there is a better way to accomplish this please let me know. Thanks!

<script type="text/javascript" src="http://admin.brightcove.com/js/APIModules_all.js"> </script> <script type="text/javascript">
  // namespace for everything global
  var BCL = {};
  // initial setup in the special onTemplateLoaded() function
  function onTemplateLoaded(id) {
    BCL.player = brightcove.getExperience(id);
    BCL.experienceModule = BCL.player.getModule(APIModules.EXPERIENCE);
    BCL.experienceModule.addEventListener(BCExperienceEvent.TEMPLATE_READY, BCL.onTemplateReady);
  }
  // event listener for the player being ready
  BCL.onTemplateReady = function(event) {
    BCL.experienceModule.removeEventListener(BCExperienceEvent.TEMPLATE_READY, BCL.onTemplateReady);
    BCL.videoPlayer = BCL.player.getModule(APIModules.VIDEO_PLAYER);
    BCL.videoPlayer.addEventListener(BCMediaEvent.PLAY, BCL.onMediaPlay);
	BCL.videoPlayer.addEventListener(BCMediaEvent.PLAY, BCL.onMediaStop);
    // add a listener for playback stop
    BCL.videoPlayer.addEventListener(BCMediaEvent.COMPLETE, BCL.onMediaComplete);
  }
  // listener for media play
  BCL.onMediaPlay = function() {
    var size = getPageSize();
					$('video-overlay').setStyle({ 'height': size.page_height + 'px' });
					$('video-overlay').appear({ from: 0, to: 0.9, duration: 0.5, 
							afterFinish: function() {
								$('videoplayer-container').addClassName('shadow');
							}
						}).observe('click', function(event) {
							$('video-overlay').fade({ duration: 0.5 });
							$('videoplayer-container').removeClassName('shadow');
							jwplayer("videoplayer").pause(true);
						});
}
 // listener for media complete
  BCL.onMediaComplete = function() {
    $('video-overlay').fade({ duration: 0.5 });
	$('videoplayer-container').removeClassName('shadow');
  }
 // listener for media stop
  BCL.onMediaStop = function() {
    $('video-overlay').fade({ duration: 0.5 });
	$('videoplayer-container').removeClassName('shadow');
  }

[BC-Iceman]

Hi,

I was not able to access the URL provided (received a 404 error); however, I wanted to share my example based on the methods describled in this article.

API Code:

var bcExp;
	var modVP;
	var modExp;
	var modCon;
	// called when template loads, this function stores a reference to the player and modules.
	// Then event listeners will be added for when the template is ready and when a user
	// clicks on a video.
	// Experience is a summation of the player attributes
	function onTemplateLoaded(experienceID) {
	bcExp = brightcove.getExperience(experienceID);
	// This Modules can be located in the Player API reference under INDEX: http://docs.brightcove.com/en/player/
	modVP = bcExp.getModule(APIModules.VIDEO_PLAYER);
	modExp = bcExp.getModule(APIModules.EXPERIENCE);
	modCon = bcExp.getModule(APIModules.CONTENT);
	// Mod content are related to the video
	modExp.addEventListener(BCExperienceEvent.TEMPLATE_READY, onTemplateReady);
	modExp.addEventListener(BCExperienceEvent.CONTENT_LOAD, onContentLoad);
	modCon.addEventListener(BCContentEvent.VIDEO_LOAD, onVideoLoad);
	} Iceman out...