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.



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:

<script type="text/javascript" src=""> 

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
  // 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
// 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("?");

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]

// add handler for change events
BCL.onMediaChange = function(event) {
	// add the video id to the URL
	var newLink = BCL.docURL + "bctid=" + BCL.videoPlayer.getCurrentVideo().id;
	// set the new link based on the page URL and the video ID
	// log(BCL.socialModule.getLink());