Mimicking linear TV
Last updated on Feb. 1, 2010
With a little bit of javascripting, a Bits on the Run player can be setup to behave like linear TV: every viewer that tunes in will see the same content at the same time. This can be used in cases where you want to offer a shared experience, e.g. with a countdown towards an event.
Demo
A demo of this tutorial can be seen here. As you can see, new viewers fall right in the middle of the show.
Channel and player
In order to setup such a demo, two pieces of content should be setup in the management console: a channel and a player. The channel should contain enough videos for it to have a total duration of at least an hour. The player should have the folling options set:
- The controlbar option of the player (in the layout tab) should be set to not display the controlbar. That way users cannot seek in the video or switch to other videos.
- The repeat option of the player (in the playback tab) should be set to continuously repeat the channel. That way the next video automatically starts when the current video has ended.
Scripting
The javascript embed code should be used to embed the player on your site, since the embed code is not setup to interface with javascript:
<script type="text/javascript" src="http://content.bitsontherun.com/players/YSkwrmJV-U2B5Gdtg.js"></script>
When the player loads, it automatically calls a playerReady function on the page. This function should save a reference to the player and setup a playlist and metadata callback:
var player;
function playerReady(obj) {
player = document.getElementById(obj.id);
player.addControllerListener('PLAYLIST','playlistHandler');
player.addModelListener('META','metaHandler');
};
The first callback will be called when the playlist is loaded. When fired, we first see how many seconds inside the hour we currently are. This is done through the Date object of javascript. We then walk through the playlist until we found the item and the offset that correspond with this amount. We save the offset and start that item with an ITEM event:
var offset;
function playlistHandler(obj) {
var seconds = new Date().getMinutes()*60;
var s = 0;
for (var i=0; i<obj.playlist.length; i++) {
if(s + obj.playlist[i]['duration'] > seconds) {
offset = seconds - s;
player.sendEvent('ITEM',i);
break;
} else {
s += obj.playlist[i]['duration'];
}
}
};
The second callback is called when the metadata of the started video has been received. With the metadata available, the player knows where the keyframes in the video are located. It can now SEEK to the correct position:
function metaHandler(obj) {
if(obj.duration && offset) {
player.removeModelListener('META','metaHandler');
player.sendEvent('SEEK',offset);
}
};
That's all code needed to get a linear TV experience. Please view the source of the accompanying demo to copy/paste the entire javascript in one go.
Enhancements
There's all kinds of enhancements to be made to the code to make the linear TV experience more sophisticated. Here's a few suggestions:
- If an hour passes by, right now, the channel does not reset. This could be done so by adding a javascript function that periodically checks the current date (e.g. with setInterval). When the hour passes, the channel can be restarted by doing a player.sendEvent('ITEM',0); call.
- Another option would be to load a new show when an hour has passed. This can be done with a player.sendEvent('load', 'http://content.bitsontherun.com/feeds/[CHANNEL-KEY].rss'); call. The channel key is an 8-character code that identifies the channel. You can copy-paste it from the management console.
- Properties of the currently playing item can be displayed above or below the player. The same obj.playlist object we used to check the duration of each video contains all other video properties, such as title or description. You can update it every time a new video starts by setting an addControllerListener('ITEM',...) to the playerReady() call.
