Captions for HTML5 Players Using the Smart Player API

The new Smart Player API that works for both HTML5 and Flash players brings many benefits, including the ability to display captions or subtitles for you videos.

To view a sample, go to http://files.brightcove.com/BCL_SmartPlayerAPI_captions.html

The implementation here has to account for the fact that my subtitles in multiple languages are stored in separate files. The stem of the file name is stored in a custom field (I could have used a standard field like longDescription just as well), so I'm constructing the full URL in JavaScript. The full script is below. To learn more about using the Smart Player API, contact me to sign up for our next free online training class.

// namespace for everything global
var BCL = {};
// listener for the Template Ready event
BCL.onTemplateReady = function(event) {
	console.log("EVENT: TEMPLATE_READY");
	BCL.player = brightcove.api.getExperience("myExperience");
	// get a reference to the video player module
  BCL.videoPlayer = BCL.player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
  // set listener for media change event
  BCL.videoPlayer.addEventListener(brightcove.api.events.MediaEvent.CHANGE, BCL.onMediaChange);
	// get a reference to the captions module
	BCL.captionsModule = BCL.player.getModule(brightcove.api.modules.APIModules.CAPTIONS);
	// add success/error listeners for captions load
	BCL.captionsModule.addEventListener(brightcove.api.events.CaptionsEvent.DFXP_LOAD_SUCCESS, BCL.onDFXPLoadSuccess);
	BCL.captionsModule.addEventListener(brightcove.api.events.CaptionsEvent.DFXP_LOAD_ERROR, BCL.onDFXPLoadError);
}
// captions load success handler
BCL.onDFXPLoadSuccess = function(event) {
	console.log("DFXP Load Success");
	console.log(event);
	// need to set the language based on selected language
	BCL.captionsModule.setLanguage(BCL.language);
}
// captions load error handler
BCL.onDFXPLoadError = function(event) {
	console.log("DFXP Load Error");
	console.log(event);
}
// set up captions
BCL.showSubTitles = function(language) {
	console.log("In BCL.showSubTitles "+ language);
	// only do this if a subtitles language has been selected
	if (language != "") {
		// set a flag to remember that subtitles are on
		BCL.subTitlesOn = true;
		// keep track of the language
		BCL.language = language;
		// get the filename stub for the captions from the video custom field and construct the path
		BCL.videoPlayer.getCurrentVideo( function(videoDTO) {
			var pathPrefix = "./";
			var captionsPath = pathPrefix + videoDTO.customFields.dfxppath + language.toUpperCase() + ".xml";
			console.log(captionsPath);
			var videoID = videoDTO.id;
			console.log(videoID);
			// load the captions file
			BCL.captionsModule.loadDFXP(captionsPath,videoID);
		});
	}
	else {
		// if no language was selected, set flag to know that captions are off
		BCL.subTitlesOn = false;
	}
}
BCL.onMediaChange = function(event) {
	console.log("EVENT: media change");
	// load captions if subtitles are on
	if (BCL.subTitlesOn) {
		BCL.showSubTitles(BCL.language);
	}
}
// for development purposes only: reopen page with HTML5 player
BCL.switchToHTML5 = function() {
	var html5URL = document.location.href + "?forceHTML=true";
	window.location = html5URL;
}
// for development purposes only: switch back to Flash
BCL.switchToFlash = function() {
	var startOfQuery = document.location.href.indexOf("?", 0);
	var flashURL = document.location.href.substring(0, startOfQuery);
	window.location = flashURL;
}