Creating a Video Loop

This topic describes how to use the Player API to make a video automatically replay.

There are some situations where you may want to use a looping video, but remember that a video that loops indefinitely can be distracting to viewers of your website. Use this implementation with caution.

This solution, requires the following:

Access to the Brightcove Smart Player API

Getting started with the basic code

Before you copy your player code from Video Cloud Studio, make sure you have enabled the player for ActionScript/JavaScript APIs in the Web Settings section.

Note: Your custom code for the Player APIs will fail silently if this player setting is not enabled.

You will start with the basic Player code embedded in an HTML document. The Player code can be copied from Video Cloud Studio. Here is an example of the Player code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video Loop</title>
</head>
<body>
<!-- Start of Brightcove Player -->
<div style="display:none">
     Used for related videos API sample
</div>
<!--
   By use of this code snippet, I agree to the Brightcove Publisher T and C
   found at https://accounts.brightcove.com/en/terms-and-conditions/.
   -->

<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="921267190001" />
<param name="playerKey" value="AQ~~,AAAA1oy1bvE~,ALl2ezBj3WG3MLvDx9F9zkV06cNK00ey" />
<param name="isVid" value="true" />
<param name="isUI" value="true" />
<param name="dynamicStreaming" value="true" />

<param name="@videoPlayer" value="921449663001" />
</object>
<div id="displayArea">
</div>

<!--
   This script tag will cause the Brightcove Players defined above it to be created as soon
   as the line is read by the browser. If you wish to have the player instantiated only after
   the rest of the HTML is processed and the page load is complete, remove the line.
   -->
<script type="text/javascript">brightcove.createExperiences();</script>
<!-- End of Brightcove Player -->
<div id="displayInfo"></div>
</body>
</html>

To learn more about generating the Brightcove player code, refer to the Publishing a Video Cloud Player document.

Creating a player that loops through a video

You might think it would be easy to listen for the brightcove.api.events.MediaEvent.COMPLETE event and then call the video player play() method. But that doesn't quite work, because the brightcove.api.events.MediaEvent.COMPLETE event does not fire when a video is replayed. So, you will only get one replay. In addition, the milliseconds it takes for the event to fire and the play method to execute results in a flash of a black video screen between the plays.

To get around both of these issues, you can listen for the brightcove.api.events.MediaEvent.PROGRESS event instead. This event returns an object that contains the video duration and the current position. It is dispatched approximately 4-5 times a second. So, you can check the position relative to the duration. You don't want to wait until they are equal, as that is the same as using the brightcove.api.events.MediaEvent.COMPLETE event. Instead, you can check when the position is close to the end (.1 seconds from completion) and use the seek() method to go back to the beginning of the video.

In your HTML document, add JavaScript code to access the Player API to do the following:

Include the Player API with event listeners
Create an onTemplateLoad function that defines the player and the APIModules object
Create an onTemplateReady function that defines the video player, starts playing the video and adds an event listener for video progress
Create an onProgress function that resets the playhead to the beginning when the video is near the end

The code added to the basic player code shown above is bolded in the following listing.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video Loop</title>
</head>
<body>
<!-- Start of Brightcove Player -->
<div style="display:none">
     Used for related videos API sample
</div>
<!--
   By use of this code snippet, I agree to the Brightcove Publisher T and C
   found at https://accounts.brightcove.com/en/terms-and-conditions/.
   -->

<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="921267190001" />
<param name="playerKey" value="AQ~~,AAAA1oy1bvE~,ALl2ezBj3WG3MLvDx9F9zkV06cNK00ey" />
<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="onTemplateLoad" />
<param name="templateReadyHandler" value="onTemplateReady" />
</object>
<div id="displayArea">
</div>

<!--
   This script tag will cause the Brightcove Players defined above it to be created as soon
   as the line is read by the browser. If you wish to have the player instantiated only after
   the rest of the HTML is processed and the page load is complete, remove the line.
   -->
<script type="text/javascript">brightcove.createExperiences();</script>
<!-- End of Brightcove Player -->
<div id="displayInfo"></div>

<!-- custom script -->
<script type="text/JavaScript">
     var player,
         APIModules,
         videoPlayer;
     var onTemplateLoad = function(experienceID){
         player = brightcove.api.getExperience(experienceID);
         APIModules = brightcove.api.modules.APIModules;
     };

     var onTemplateReady = function(evt) {
         videoPlayer = player.getModule(APIModules.VIDEO_PLAYER);
         videoPlayer.play();
         videoPlayer.addEventListener(brightcove.api.events.MediaEvent.PROGRESS, onProgress);
     }

     var onProgress = function(evt) {
         if ((evt.duration - evt.position) < .1) {
             videoPlayer.seek(0);
         }
     }
</script>
</body>
</html>

Getting started with the basic code

Creating a player that loops through a video

Related Topics