Making a Video Loop

Want to make a video loop indefinitely?

Back in the 1990s, I used to teach courses on elements of web design. At the beginning of one session, I'd put a web page up on the data projector and then start talking about something or other. It was a basic page that had embedded in it a simple Flash animation that was set to loop indefinitely.

It usually didn't take long, though I remember that one class held out for five minutes or so; but eventually someone would say, "Could you turn that off? It's really distracting." And I would respond, "Exactly. That's the lesson - any questions?"

Having offered that cautionary tale, I'll now show you how you to set up a video that automatically replays. You can see it below (and I didn't hide the pause button).

 

This might seem simple to do with the Player API: just listen for the media COMPLETE event and then call the video player play() method. But that doesn't quite work, because the the COMPLETE event does not fire when a video is replayed - so you only get a single replay. In addition, the milliseconds it takes for the event to fire and the play method to execute results in a flash of black video screen between the plays.

You can get round both these issues by listening for the media PROGRESS event instead. This event returns an object that contains both the video duration and the current position, and it fires every 33 milliseconds. So you can set up a check to see where the position is relative to the duration. You don't want to wait till they are equal, as that is the same thing as waiting for the complete event. Instead you can watch for when the position is, say .1 seconds shy of completion, and then use the seek() method to go back to the beginning.

// 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.PROGRESS, BCL.onMediaProgress);
  BCL.videoPlayer.addEventListener(BCMediaEvent.COMPLETE, BCL.onMediaComplete);
  BCL.videoPlayer.play();
}
BCL.onMediaProgress = function(event) {
  if (event.position > event.duration - .1) {
    BCL.videoPlayer.seek(0);
  }
}
// just in case you don't get the progress event you need	
BCL.onMediaComplete = function(event) {
  BCL.videoPlayer.play();
}