In this topic you will learn how to make your videos downloadable. Using the Media API you can create a link to download the currently playing video.
This solution, requires the following:
- A URLAccess Read Token for the Media API
- The account delivery method must be progressive download or have Universal Delivery Service enabled
Getting started with the basic code
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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Brightcove Video Player Example</title>
</head>
<body>
<!-- Start of Brightcove Player -->
<div style="display:none">
</div>
<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>
<object id="myExperience" class="BrightcoveExperience">
<param name="bgcolor" value="#FFFFFF" />
<param name="width" value="960" />
<param name="height" value="445" />
<param name="playerID" value="876399696001" />
<param name="playerKey" value="AQ~~,AAAADXdqFgE~,aEKmio9UXaiXzpQG9K_R6AJJs_1C0Vjy" />
<param name="isVid" value="true" />
<param name="isUI" value="true" />
<param name="dynamicStreaming" value="true" />
</object> <!--
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 -->
</body>
</html>
To learn more about generating the Brightcove player code, refer to the Publishing a Video Cloud Player document.
Creating a link to download your video files
Creating a downloadable video link consists of the following:
- Use the Media API to get the download link for the current video
- Verify the sample code
Using the Media API to create a download link for a video
In your HTML document, you will add JavaScript code to access the Media API to do the following:
- Add event listeners
- Get the ID of the current video when it starts playing
- Get the downloadable link for the current video
- Write the link to the HTML document
- Display a message log (optional)
Notice that the original <script>
tag within the Player code has been moved to the <header>
tag block.
To simplify the code, this example uses the find_video_by_id
method, which is a JavaScript Media API wrapper from the opensource.brightcove.com site.
Note: This solution requires that you have a URLAccess Read Token for the Media API.
Note: Your account delivery method must be progressive download or have the Universal Delivery Service enabled.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Brightcove Video Player Example</title>
<!-- Brightcove Player libraries -->
<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script><script type="text/javascript" src="http://admin.brightcove.com/js/APIModules_all.js"> </script>
<!-- Media API (MAPI) wrapper from http://opensource.brightcove.com/ -->
<script type="text/javascript" src="http://files.brightcove.com/bc-mapi.js"></script>
<!-- add logging script -->
<script type="text/javascript" src="http://files.brightcove.com/prettyprint.js"></script>
<!-- custom script -->
<script type="text/javascript"> /* vars */
var BCLplayer;
var BCLexperienceModule;
var BCLvideoPlayer;
var BCLcurrentVideo;
/* initial event listeners */
function onPlayerError(event) {
log("type: " + event.type);
log("errorType: " + event.errorType)
log("code: " + event.code);
log("info: " + event.info);
}
function onPlayerLoaded(id) {
// newLog();
log("EVENT: onPlayerLoaded");
BCLplayer = brightcove.getExperience(id);
BCLexperienceModule = BCLplayer.getModule(APIModules.EXPERIENCE);
}
function onPlayerReady(event) {
log("EVENT: onPlayerReady");
// get a reference to the video player module
BCLvideoPlayer = BCLplayer.getModule(APIModules.VIDEO_PLAYER);
// add a listener for media change events
BCLvideoPlayer.addEventListener(BCMediaEvent.BEGIN, onMediaBegin);
}
// listener for media change events
function onMediaBegin(event) {
log("EVENT: MediaBegin");
// log(event);
// get the ID of the current video as it starts playing
BCLcurrentVideoID = BCLvideoPlayer.getCurrentVideo().id;
// pass the video ID to getDownloadLink()
getDownloadLink(BCLcurrentVideoID);
}
function getDownloadLink(id) {
// object for search parameters
var searchParams = new Object();
// set Media API token - MUST BE URL ACCESS READ token!!
BCMAPI.token = "jskS1rEtQHy9exQKoc14IcMq8v5x2gCP6yaB7d0hraRtO__6HUuxMg..";
// set callback for Media API call
BCMAPI.callback = "onSearchResult";
// set command
BCMAPI.command = "find_video_by_id";
// set search params
searchParams.video_id = id;
// need this if the delivery for the account is streaming, and Universal Delivery Service must be enabled!
searchParams.media_delivery = "HTTP";
// just get the field we need for better performance
searchParams.video_fields = "FLVURL";
// execute the search
BCMAPI.find(BCMAPI.command,searchParams);
}
// handler for the media API search
function onSearchResult(jsondata) {
log(jsondata);
// create the link and write it into the HTML
var str = "";
str += "<a href='"+jsondata.FLVURL+"'>Download the Video</a>";
document.getElementById("downloadLink").innerHTML = str;
} /*
Note the log function depends on James Padolsey's prettyprint.js, which you can download from http://james.padolsey.com/javascript/prettyprint-for-javascript/, or reference from http://files.brightcove.com/prettyprint.js
*/
function log(message) {
var logEntry = prettyPrint(message);
document.body.appendChild(logEntry);
}
</script>
</head>
<body>
<h1>Sample of Automating Provision of Video Download</h1>
<p>Play a video to see the download link appear below the player.</p>
<div id="playerBlock"><!-- Start of Brightcove Player -->
<div style="display:none">
</div>
<object id="myExperience" class="BrightcoveExperience">
<param name="bgcolor" value="#FFFFFF" />
<param name="width" value="960" />
<param name="height" value="445" />
<param name="playerID" value="876399696001" />
<param name="playerKey" value="AQ~~,AAAADXdqFgE~,aEKmio9UXaiXzpQG9K_R6AJJs_1C0Vjy" />
<param name="isVid" value="true" />
<param name="isUI" value="true" />
<param name="dynamicStreaming" value="true" />
</object> <script type="text/javascript">brightcove.createExperiences();</script>
<!-- End of Brightcove Player -->
</div>
<div id="downloadLink"></div>,br/> <!-- Begin Script Logger -->
<h2>Event Log</h2>
</body>
</html>
Click here to view the complete sample page.
Verifying the sample code
Once you start playing a video, a download link will appear below the player. You can select that link to download the current video file. A log below the link, displays the player events and lists the download file URL.
