Set the Sharing Link for Each Video in a Player

You know that your videos can be shared via email or Twitter using the distribution tools that are built into Brightcove players. Here I'll show you how to modify the link to the video so that it always points back to the page that the video was shared from.

You can use the Host on Your URL feature in the Player Settings to set the make the video links point to the page the player is on, but this option doesn't help you if you are going to publish the same player on many pages. But you can still get the links to point back to whatever page the player is on with a little help from the Player API. Here's a working sample you can test: play a video, email a link to yourself, and then click the link.

Log

Here's what you need to do. First, make sure the Player API is enabled in the player settings, and that you're including the JavaScript Player API:

In the TEMPLATE_READY event handler, get a reference to the VideoPlayer and Social modules, and set up an event listener for MediaChange events. You'll also need to execute the handler for the MediaChange events once for the initially loaded video. Also, you will need to examine the URL and do some string manipulation to address the following possibilities:

There is already a video id parameter on the URL that needs to be removed

There are other parameters on the URL that need to be preserved

Here the setURLstring() function is used to take care of this.

// 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) {
// remove the event listener
BCL.experienceModule.removeEventListener(BCExperienceEvent.TEMPLATE_READY, BCL.onTemplateReady);
// prepare the URL for appending the video id
BCL.setURLstring();
// get a reference to the video player module
BCL.videoPlayer = BCL.player.getModule(APIModules.VIDEO_PLAYER);
// get a reference to the social module
BCL.socialModule = BCL.player.getModule(APIModules.SOCIAL);
// set up listner for media change events
BCL.videoPlayer.addEventListener(BCMediaEvent.CHANGE, BCL.onMediaChange);
// execute the change event handler for the initial video in the player
BCL.onMediaChange(null);
}
// set the URL prefix for the video ID
// see if the document URL has URL params appended
BCL.setURLstring = function() {
// get a reference to the current URL
BCL.docURL = document.URL;
// several vars to be used in manipulating the string
var URLpart = "";
var paramPart = "";
var docURLsplit = [];
var paramString1 = "";
var paramString2 = "";
// see if there are already URL params
if ( BCL.docURL.indexOf("?") > 0 ) {
// split the string into the root URL and the URL params
docURLsplit = BCL.docURL.split("?");
// the URL part will equal the first part of the array
URLpart = docURLsplit[0];
// now see if the params already include a video id
if ( docURLsplit[1].indexOf("bctid") >= 0 ) {
// split the param string into whatever comes before bctid and the rest
// get the first part of the string
paramString1 = docURLsplit[1].substr(0, docURLsplit[1].indexOf("bctid"));
// get the rest of the string, which will begin with the video id param
paramString2 = docURLsplit[1].slice( docURLsplit[1].indexOf("bctid") );
// see if there are other params after the video id
if ( paramString2.indexOf("&") > 0 ) {
// if so, delete everything up to and including the first &
paramString2 = paramString2.slice(paramString2.indexOf("&") + 1);
// recombine the first part of the param string with what's left of the second part and add a ? before and an & after
paramPart = paramPart.concat("?", paramString1 ,paramString2, "&");
}
// if there are no more params, then just use ? + paramString1
else {
paramPart = "?" + paramString1;
}
// put the string back together
BCL.docURL = URLpart.concat(paramPart);
}
}
// there are no query params, so just append a ? to the original URL
else {
BCL.docURL = BCL.docURL.concat("?");
}
return;
}

In the MediaChange event handler, use the Social module setLink() method to set the sharing link to the document URL with ?bctid=[video ID for the current video goes here]