Top Videos Sidebar Example

This sample application uses the Media API to query for a list of the five most-viewed videos in the past week, and displays them in an HTML sidebar. The videos are clickable and launch a player in a new window.

Click here to see this demo in action.

Before you begin

You should be familiar with the dynamic script tag approach to making Media API calls using only JavaScript.

The Call

Let's look at the structure of the call we'll use to retrieve a list of the five most-viewed videos in our account:

http://api.brightcove.com/services/library?command=find_all_videos
  &token=0Z2dtxTdJAxtbZ-d0U7Bhio2V1Rhr5Iafl5FFtDPY8E.
  &video_fields=id,name,thumbnailURL,playsTrailingWeek
  &sort_by=plays_trailing_week&page_size=5

Here are the important parameters:

• video_fields=id,name,thumbnailURL,playsTrailingWeek. Here we specify the fields we want returned for each video. In this case, we just need the name, id (so we can launch this video in a player), thumbnailURL (so we can show the thumbnail), and playsTrailingWeek, which stores the number of plays the video received in the past 7 days.
• sort_by=plays_trailing_week. We request that the returned videos be sorted by the number of times they've been played in the last 7 days, using the plays_trailing_week sort order. By default, the order is descending.
• page_size=5. Optionally, we can specify that the videos be grouped into pages, up to a maximum of 100 per page. In this case, we specify that the videos should be returned 5 per page.

Set up the dynamic script tag

The dynamic script tag approach uses a dynamically-inserted script tag whose src attribute is set to the URL of the Media API service call. A callback parameter is appended which references a custom function that is called when the request returns.

To create this tag, we write a function that creates the script tag with the appropriate attributes and append it to the page as a child of the head element:

function addScriptTag(id, url, callback) {
	var scriptTag = document.createElement("script");
   
   // Add script object attributes
   scriptTag.setAttribute("type", "text/javascript");
   scriptTag.setAttribute("charset", "utf-8");
   scriptTag.setAttribute("src", url + "&callback=" + callback);
   scriptTag.setAttribute("id", id);
	
	var head = document.getElementsByTagName("head").item(0);
	head.appendChild(scriptTag);
}
 
function getTopVideos() {
	addScriptTag("topVideos", 
    "http://api.brightcove.com/services/library?command=find_all_videos
    &token=0Z2dtxTdJAxtbZ-d0U7Bhio2V1Rhr5Iafl5FFtDPY8E.
    &video_fields=id,name,thumbnailURL,playsTrailingWeek
    &sort_by=plays_trailing_week&page_size=5", "response");
}

Set up the callback function

Our callback function will be passed the jsonData, which, because we're working in JavaScript, will automatically be parsed into native objects. We just need to iterate through the array of results and create the HTML structure that we want to use to display our video list. In this example, we make each item clickable with an onClick attribute, and we've applied CSS to render the list with a border, and a width appropriate to a sidebar element on the page.

function response(jsonData) {
	var resp = document.getElementById("resp");
	for (var i=0; i<jsonData["items"].length; i++) {
		var title = jsonData["items"][i];
		var str = "";
		str += '<div class="title" onClick="playTitle(' + title.id + ')">';
		str += '<div class="thumb"><img src="' + title.thumbnailURL + '"/></div>';
		str += '<p class="displayName">' + title.name + '</p>';
		
		str += '<p class="views">viewed ' + title.playsTrailingWeek + ' times</p>';
		str += '</div>';
		resp.innerHTML += str;
	}
}

Enabling playback on click

To enable playback, we need to link to a page with a Video Player player on it. In this example, we've used a single video player template that will be brought up in a popup window. We pass in the videoID on the query string as &bctid=[videoID] and the Video Cloud player will automatically detect that and begin playback.

function playTitle(id) {
	  window.open("player.html?bctid=" + id,"Top_Videos_Sidebar",
      "location=0,status=0,scrollbars=0,width=500,height=445"); 
}

Note: Multi-playlist templates require you to also pass in a lineupID in order for the player to display the video appropriately. If you're embedding the player in a Flash shell, you'll need to write helper code to get the videoID from the query string and pass it to the player via the config["videoId"] property.

More examples

Here are some more examples to help you get started:

• Upload Video Example (Java)
• Upload Video Example (PHP)