Using Cue Points to Add Buy Links in JavaScript

This article demonstrates how you can use cue points in a video to trigger a "buy" link or another call to action in the page when the cue point is encountered in the video. Cue points can store metadata, so it's possible to add into the cue point information such as a product name or ID, which can then be used during playback.

The approach in this article uses JavaScript with the Brightcove Player API in the HTML page to dynamically insert "add to cart" links below the video. The links could then in theory add an item to the site's shopping cart or take the viewer to a product detail page. You can download a zip file that contains the source code for the example in this article. The resulting experience will look something like the screenshot below, with "add to cart" links dynamically added to the page below the video player. Click here for a working example.

Main Steps

The main steps to implement this example are:

1. Make sure the Brightcove APIs are enabled for your player.
2. Add cue points to your video, at the points where you want links to appear. Include metadata in each cue point that will be used in forming the link.
3. Create a place in your HTML page for the links to appear.
4. Add JavaScript in your HTML page that (1) listens for cue points, (2) parses the metadata each the cue point, and (3) creates a link in the page based on the cue point metadata.

Enable the API for your player

For this example to work, it's important to first check your player to see if the Brightcove APIs are enabled. Make sure the Enable ActionScript/JavaScript APIs checkbox is checked for your player.

Setting up the cue points

The next step to set the code cue points in your video where the "add to cart" links should appear. In this example, we add a code type cue point at the point in the video where a new product appears. You can create cue points in a video using the Media module. You can also create cue points using the Media API or FTP batch provisioning

The screenshot below shows the 2nd code cue point. It was created 8 seconds into the video and was given the following metadata "name=Cream of Chicken|product=56789". We're going to use this metadata field to store two name values that we can later split using the pipe delimiter. You could easily format the metadata differently to suit your own preferences.

Setting up the HTML

Once your video has its cue points assigned, you can embed the Brightcove player publishing code in your HTML page. We also need to create an area where the "add to cart" links will be added when the video loads and reaches the cue points. In this case, we simply place a div below the player, with the id buylinks. You can imagine more dramatic or highly-styled versions, where the call to action is overlayed on the video display, or appears in a banner or pop-up.

<h1>Cuepoint Buy Link Example</h1>

<!-- Start of Brightcove Player -->
		
<div style="display:none"></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/. 
-->
        
<object id="myExperience" class="BrightcoveExperience">
    <param name="bgcolor" value="#FFFFFF"/>
    <param name="width" value="486"/>
    <param name="height" value="412"/>
    <param name="playerID" value="<INSERT_YOUR_PLAYER_ID>"/>
    <param name="videoID" value="<INSERT_YOUR_VIDEO_ID>"/>
    <param name="publisherID" value="<INSERT_YOUR_PUBLISHER_ID>"/>
    <param name="isVid" value="true"/>
    <param name="dynamicStreaming" value="true"/>
</object>
		
<!-- End of Brightcove Player -->
		
<div id="buylinks"></div>

Setting up the JavaScript

In the top of the page (within the head tags) we need to add the JavaScript that reads the cue points from the video being played.

<script type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences_all.js"></script>
<script type="text/javascript">
    var bcExp;
    var modCue;
    
    /**
     * Automatically called by the Brightcove API.
     */
    function onTemplateLoaded(experienceId)
    {
        bcExp = brightcove.getExperience(experienceId);
        
        // get references to the modules we'll need
        modCue = bcExp.getModule(APIModules.CUE_POINTS);
        
        // listen for cue point events
        modCue.addEventListener(BCCuePointEvent.CUE, onCue);
    }
    
    /**
     * Called when cue points are encountered in the video.
     */
    function onCue(event)
    {
        // reference to the div which we'll put our links into
        var buylinksElem = document.getElementById("buylinks");
				
        // we're only concerned with code cue points (type 1)
        if (event.cuePoint.type == 1) 
        {
            // metadata is a series of name/value pairs which are | delimited so we need to split it up
            var metadata = event.cuePoint.metadata.split("|");
            var hash = {};
            for (var i = 0; i < metadata.length; i++)
            {
                var pair = metadata[i].split("=");
                hash[pair[0]] = pair[1];
            }
            
            // dynamically add a new link for the current cuepoint
            buylinksElem.innerHTML += "<p>" + hash["name"] + " -> <a href='cart.html?product=" + hash["product"]  + "'>Add to Cart</a>";
        }
    }
</script>

Tips

As shown in this example, it's possible to store lots of information in a cue point's metadata field. This example could easily be extended to include more name/value pairs other than product name and ID. A code cue point can have as much as 512 characters of metadata. Additionally, this example doesn't address various use cases where the video is played a second time or a new video is loaded. Listening to various playback events would probably be required in order to reset the buy links or to remove them if the video is changed, played back from the beginning, etc.