Using the channel API with the player API

From Livestream » User Guide

Jump to: navigation, search

The Livestream Channel API allows you to retrieve information about a channel's on-demand library and the clip it contains. In this example we will show you how to use this API to play a clip using the Livestream Player API. Although we will be using the HTML Player API in this example, the process is very similar for the Flash and Flex Player APIs.


Contents

Step one: List playlists


As shown in the channel API documentation, the first step is to retrieve a list of playlists for the channel you're interested in. In this example we will be using the channel 'proshowcase'. The REST API service to call would be the following:

http://xproshowcasex.channel-api.livestream-api.com/2.0/listplaylists

Which will produce an output similar to this:

<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:media="http://search.yahoo.com/mrss" xmlns:ls="http://channel-api.livestream-api.com/2.0"
	version="2.0">
	<channel>
		<title>Mogulus Pro Showcase</title>
		<link>http://www.livestream.com/proshowcase</link>
		<description />
		<image>
			<url />
		</image>
		<language>English</language>
		<category>Entertainment</category>
		<pubDate>Fri, 17 Oct 2008 00:59:38 GMT</pubDate>
		<ls:totalClips>1</ls:totalClips>
		<ls:directory id="9205475006471204305" title="_root"
			hasClips="true">
			<ls:directory id="6845317970224595470" hasClips="true"
				title="High - 700 Kbps (Pro) Samples" />
			<ls:directory id="4056950833275962776" hasClips="true"
				title="HD - 1,700 Kbps (Pro) Samples" />
		</ls:directory>
	</channel>
</rss>

Step two: List clips


Once you have chosen a playlist you're interested in, you may list the clips it contains using the directory id from the previous call. If we wanted to retrieve clips from the "High - 700 Kbps (Pro) Samples" playlist above, we would call the service like so:

http://xproshowcasex.channel-api.livestream-api.com/2.0/listclips?id=6845317970224595470

Which will produce an output similar to this:

<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:media="http://search.yahoo.com/mrss" xmlns:ls="http://channel-api.livestream-api.com/2.0"
	version="2.0">
	<channel>
		<title>Mogulus Pro Showcase</title>
		<link>http://www.livestream.com/proshowcase</link>
		<description />
		<image>
			<url />
		</image>
		<language>English</language>
		<category>Entertainment</category>
		<pubDate>Fri, 17 Oct 2008 00:59:38 GMT</pubDate>
		<ls:totalClips>3</ls:totalClips>
		<item>
			<title>Quantum of Solace Trailer (700Kbps)</title>
			<description />
			<link>http://www.livestream.com/proshowcase/ondemand/flv_7e12afb2-fae2-49e7-
aef2-269febafbf10</link>
			<guid>flv_7e12afb2-fae2-49e7-aef2-269febafbf10</guid>
			<ls:workflowStatus>Complete</ls:workflowStatus>
			<ls:isRecorded>false</ls:isRecorded>
			<media:thumbnail
				url="http://thumbnail.api.livestream.com/clipthumbnail/chproshowcase
/2008/11/26/7e12afb2-fae2-49e7-aef2-269febafbf10_10.jpg" />
			<media:content duration="147.4" type="video/x-flv"
				url="http://www.livestream.com/proshowcase/ondemand/flv_7e12afb2-
fae2-49e7-aef2-269febafbf10" />
			<pubDate>Wed, 26 Nov 2008 16:53:43 GMT</pubDate>
		</item>
		<item>
			<title>Iron Man Trailer (700Kbps)</title>
			<description />
			<link>http://www.livestream.com/proshowcase/ondemand/flv_4ed433b2-0689-460e-
9726-027c6a8b6f31</link>
			<guid>flv_4ed433b2-0689-460e-9726-027c6a8b6f31</guid>
			<ls:workflowStatus>Complete</ls:workflowStatus>
			<ls:isRecorded>false</ls:isRecorded>
			<media:thumbnail
				url="http://thumbnail.api.livestream.com/clipthumbnail/chproshowcase
/2008/10/16/4ed433b2-0689-460e-9726-027c6a8b6f31_10.jpg" />
			<media:content duration="149.5" type="video/x-flv"
				url="http://www.livestream.com/proshowcase/ondemand
/flv_4ed433b2-0689-460e-9726-027c6a8b6f31" />
			<pubDate>Fri, 17 Oct 2008 01:05:09 GMT</pubDate>
		</item>
		<item>
			<title>The Kite Runner Trailer (700Kbps)</title>
			<description />
			<link>http://www.livestream.com/proshowcase/ondemand/flv_fee7795c-362b-434c-
87b8-fd68a32a1ddd</link>
			<guid>flv_fee7795c-362b-434c-87b8-fd68a32a1ddd</guid>
			<ls:workflowStatus>Complete</ls:workflowStatus>
			<ls:isRecorded>false</ls:isRecorded>
			<media:thumbnail
				url="http://thumbnail.api.livestream.com/clipthumbnail/chproshowcase
/2008/11/19/fee7795c-362b-434c-87b8-fd68a32a1ddd_10.jpg" />
			<media:content duration="114.4" type="video/x-flv"
				url="http://www.livestream.com/proshowcase/ondemand/flv_fee7795c-
362b-434c-87b8-fd68a32a1ddd" />
			<pubDate>Wed, 19 Nov 2008 23:00:27 GMT</pubDate>
		</item>
	</channel>
</rss>

Step three: Get the clip id


Let's say from that list above we were interested in the "The Kite Runner Trailer (700Kbps)". In order to play that in the Player API, we need to retrieve the <guid> attribute for that item, which in this case would be:

flv_fee7795c-362b-434c-87b8-fd68a32a1ddd


Step four: Pass the clip id to the player


We now need to tell the player to play this specific clip. The way to do this in the HTML example is to use the setClipID() function. Don't forget that you also need to pass the channel name using the setChannel() function. The Flash and Flex API's similarly have a 'clipID' and 'channel' attribute. The resulting HTML code follows. Keep in mind that in order for this example to work, you will need to have swfobject.js in the same directory as the html file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <title>Livestream API for web developers - example</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
  <script type="text/javascript">
    params = { AllowScriptAccess: 'always' };
    function livestreamPlayerCallback(event) {
    	if (event == "ready") {
                player = document.getElementById("livestreamPlayer");
    		player.load('proshowcase', 'flv_fee7795c-362b-434c-87b8-fd68a32a1ddd');
    		player.startPlayback();
    	}
    }
    swfobject.embedSWF("http://cdn.livestream.com/chromelessPlayer/v21/playerapi.swf",
      "livestreamPlayer", "500", "214", "9.0.0", "expressInstall.swf", null, params);
  </script>
</head>
<body>
  <div id="livestreamPlayer">
  <h1>This page requires flash</h1>
    <p><a href="http://www.adobe.com/go/getflashplayer">download flash</a></p>
  </div>
  <br/>
  <input type="button" value="play" onclick="player.startPlayback()"/>
  <input type="button" value="pause" onclick="player.stopPlayback()"/>
  <input type="button" value="vol +" onclick="player.volumeUp()"/>
  <input type="button" value="vol -" onclick="player.volumeDown()"/>
</body>
</html>

The running example is viewable here.