Making JavaScript And The Blip.tv Player Work
It sure would be nice if the blip.tv player had an easy way to change which video is playing in a playlist using their JavaScript API. But they don’t, so I had to roll my own to make the two play together nicely. Here is the end result (Note there are some line breaks I put in here for visual formatting, it might not work):
var player;
var currentPlaylistItem;
var currentState;
function getUpdate(type, arg1, arg2) {
switch(type) {
case "state":
currentState = arg1;
break;
case "item":
currentPlaylistItem = arg1;
var episode = player.getCurrentItem();
document.title = episode.title;
break;
}
}
var flashvars = {
'file': 'http://blip.tv/play/ha0CjMVEh_8o',
'enablejs': 'true',
'javascriptid': 'blip_player',
'autostart': 'false'
};
var params = {
'allowscriptaccess': 'always',
'allowfullscreen': 'true',
'expressinstall': '/millennials/flash/expressInstall.swf'
};
var attributes = {
'id': 'blip_player',
'name': 'blip_player'
};
swfobject.embedSWF('http://blip.tv/play/ha0CjMVEh_8o',
'blip_player', '770', '470', '8.0', false, flashvars,
params, attributes, swfCallBack);
function swfCallBack() {
player = document.getElementById('blip_player');
$('#agenda h3 a, #agenda a.blip_tv').click(function(){
var playlistItemNum =
$(this).attr('href').split('#')[1];
changePlaylist(Number(playlistItemNum));
$.scrollTo('.video .player', 800);
return false;
});
}
function changePlaylist(num) {
var direction = 'prev';
var diff = currentPlaylistItem - num;
if (diff < 0) {
direction = 'next';
diff = Math.abs(diff);
}
for(i=0; i < diff; i++) {
player.sendEvent(direction);
}
if (currentState == 0) {
player.sendEvent('play');
}
}
There are three requirements to getting started as outlined in the blip.tv wiki:
- The player must be embeded with the enablejs=true Flash variable set
- The player must be embeded with allowScriptAccess=always object/embed parameter set
- A JavaScript function must exist named getUpdate()
The first part of my script sets up three global variables that we’ll use.
- player will reference the object/embed element by an ID. It is how we send commands to the show player.
- currentPlaylistItem is the number of the video selected (or position) in the playlist.
- currentState is either 2 (playing), 1 (loading), or 0 (stopped) depending on the current state of the player.
The getUpdate() function listens to the blip.tv player for changes like when the player is stopped or a video is changed in the playlist. The type argument is a string which we can send through a switch statement to determine what we need to do.
If the state of player has changed then we update our currentState variable with the value of arg1 (which will be a number between 0 and 2). If the event is an item change, we will update the currentPlaylistItem variable to reflect that. As an added bonus we get the title of the current playing video and change the title of the webpage to reflect this. This has zero SEO value and is really only a convenience to our audience. Now that we know what is going on, lets get to the fun stuff.
Three variables (which are really Objects) are created for swfobject so we can easily embed the video player dynamically into the page. The ‘blip_player’ paramter is the ID of the player that we’ll be referencing shortly. The swfCallBack() function is called once the blip.tv player has loaded. There we set our player variable to reference the element of the blip.tv player. I used a line of jQuery to set the onClick() events of a group of links that will change the playlist when they are clicked.
In the HTML the links contain direct links to each blip.tv video and an anchor with a number after it. This number is the playlist position of the specific video. jQuery makes it a snap to extract just that number from the URL which we store in the playlistItemNum variable. The playlistItemNum variable is passed along to a function called changePlaylist() which does all of the heavy lifting.
Since the blip.tv show player doesn’t have a direct way of going to a specific video in a playlist, we have to hit the next or previous button on the player programmatically. The direction is set to ‘prev’ initially. diff is calculated by subtracting the number passed to the function from the position of the currently playing video, currentPlaylistItem.
If diff is a negative number than we need to switch the direction variable to ‘next’ and get rid of the negative number by calling the absolute value method ( Math.abs() ). Now we simply send the player a command to go to the next or previous video as many times as we need to get to the desired video via a loop. Finally, if the player is stopped, we send the video player a command to start playing the video.
As an added nicety, we gently scroll the viewer up the page to the top of the video player so they’re not left wondering why nothing happened. The jQuery scrollTo plugin makes this a breeze to do.
There is one caveat for the changePlaylist() function to work: the playlist needs to be visible on the blip.tv show player. This is simply an option you set on the player configuration screen on blip.tv. Without it showing, we can’t get which video is playing and the whole thing falls apart.
That wraps up how to roll your own playlist changing function as well as shed some light on how you might control other things about the blip.tv show player using JavaScript. You can see this in action on the Pew Research Center Millennial Conference video page. If you have any questions leave them in the comments or get in contact.
[…] Making JavaScript And The Blip.tv Player Work » Coding, How To … […]
[…] Making JavaScript And The Blip.tv Player Work […]
You’re a genius! Thank you so much for posting this. After 1 week of searching you solved my problems!! Thank you!
No problem. I’m glad you found it helpful.
Hey Russell,
I’m not sure if you know, but blip.tv updated their player. The new “stratos” version is pretty awesome but for some reason my code below (which was based on yours, but might have some errors..) doesn’t seem to work with the new player. Thankfully there is an option to revert to the old player but I’d really love to upgrade.. Is there any chance you might be able to suggest what is missing/wrong in my code below causing the error?
ERROR:
Whoops!
tv.blip.io::Fetcher Unknown mode: section= play and cmd=hadWjZJZl6lA for “http://blip.tv/play/hadWjZJZl6lA?skin=json”
CODE:
google.load(‘swfobject’, ‘2.2’);
function gid(name)
{
return document.getElementById(name);
};
var flashvars =
{
‘file’: ‘http://blip.tv/play/hadWjZJZl6lA?skin=json’,
‘enablejs’: ‘true’,
‘javascriptid’: ‘player’,
‘autostart’: ‘false’
};
var params =
{
‘allowscriptaccess’: ‘always’,
‘allowfullscreen’: ‘true’
};
var attributes =
{
‘id’: ‘player’,
‘name’: ‘player’
};
swfobject.embedSWF(‘http://blip.tv/play/hadWjZJZl6lA’, ‘player’, ‘483’, ‘396’, ‘9.0.124’, false, flashvars, params, attributes);
Do you have a sample Stratos player hosted somewhere that I can play around with in Firebug somewhere?
Hey Russell,
That would be totally awesome, man. The Stratos player from blip.tv is hosted here: http://a.blip.tv/scripts/flash/stratos.swf. The Blip.TV wiki for Statos player is here: http://wiki.blip.tv/index.php/Showplayer (user:blip pass:teevee).
I’ve been working on the code all morning, taking hints from other forums and blogs all over the web and so far I’ve modified the code I posted above to what you see below. The result is currently live at wakeuptv.com/wake-up-tv-sandbox. The only problem is that the JSON functionality of blip.TV doesn’t seem to be passing any information to the browser and hence my thumbnail, description and show thumbnail on the page isn’t loading any info. In case you havent’ seen it blip.tv has put together a wiki with some info on JSON’s functionality (http://wiki.blip.tv/index.php/JSON_Output_Format user:blip pass:teevee ) but, I have to be honest, I know so little about code, I’m basically feeling around in a dark room for something that I’ve never seen before :-).
HEADER:
google.load(‘swfobject’, ‘2.2’);
function gid(name)
{
return document.getElementById(name);
};
var flashvars =
{
‘file’: ‘http://blip.tv/play/hadWjZJZl6lA?skin=json’,
‘enablejs’: ‘true’,
‘javascriptid’: ‘player’,
‘autostart’: ‘true’,
‘showplayerpath’: ‘http://a.blip.tv/scripts/flash/stratos.swf’,
‘skin’: ‘api’,
‘feedurl’: ‘http://wakeuptv.blip.tv/rss/flash’,
‘version’: ‘2’,
‘callback’: ‘player’
};
var params =
{
‘allowscriptaccess’: ‘always’,
‘allowfullscreen’: ‘true’
};
var attributes =
{
‘id’: ‘player’,
‘name’: ‘player’
};
swfobject.embedSWF(‘http://a.blip.tv/scripts/flash/stratos.swf’, ‘player’, ‘483’, ‘396’, ‘9.0.124’, false, flashvars, params, attributes);
JAVASCRIPT:
function getUpdate(type, arg1, arg2) {
var showtitlebox = document.getElementById(‘showtitlebox’);
var epdescription = document.getElementById(‘epdescription’);
var eptitle = document.getElementById(‘eptitle’);
var player = document.getElementById(‘player’);
var episode = player.getCurrentItem();
var epthumb = document.getElementById(‘epthumb’);
var trimmedtitle = removeHTMLTags(episode.title);
var trimmeddescription = removeHTMLTags(episode.description);
switch(type) {
case “state”:
currentState = arg1;
break;
case “item”:
currentPlaylistItem = arg1;
epdescription.innerHTML = trimmeddescription;
eptitle.innerHTML = trimmedtitle;
epthumb.src = episode.image;
document.title = ‘Wake UP! TV – ‘+trimmedtitle;
var str = episode.title;
firstword = str.split(/\b/)[0];
if (firstword == “Radio”)
{
showtitlebox.src = “http://www.ryanray.com/images/promo_box_yourewatching_Radio.jpg”;
showlink.href = “http://www.ryanray.com/radio/”;
showlink.title = “Watch more episodes of Wake UP! Radio”;
}
else if (firstword == “Explore”)
{
showtitlebox.src = “http://www.ryanray.com/images/promo_box_yourewatching_Explore.jpg”;
showlink.href = “http://wakeuptv.com/explore-your-passion”;
showlink.title = “Watch more episodes of Wake UP! Explore your Passion”;
}
else
{
showtitlebox.src = “http://www.ryanray.com/images/promo_box_yourewatching_Generic.jpg”;
showlink.href = “#”;
}
break;
}
}
If you can help that would be sooo awesome, Russell!
Ryan
JSON won’t really help you here. It’s for getting data off of pages on Blip.tv. Example:
If you go here you see a page of videos: http://blip.tv/posts/
Adding the JSON parameter returns a bunch of info about those videos so you can programatically do something with it. http://blip.tv/posts/?skin=jso.....obj.method
At any rate I couldn’t really figure out what was going wrong with the new player but it looks like you’re not the only one. http://support.blip.tv/entries.....ost-326201
Hello Russell,
We are using Showplayer for showing videos from blip on our site and we generate dynamic embed for the required videos using Showplayer’s swf….same thing we want to do with Stratos ..we tried Stratos to show .m4v file on our site ..but we got following error
tv.blip.io::Fetcher Unknown Mode: section = file and cmd = get for “http://blip.tv/file/get/Niruma-DD_Mahatma_Imp278.m4v”
following is the embed code which generates error …
what can be done to make stratos work with Direct Media(.m4v) file URL.
waiting for reply.
Regards,
Jinesh
I’ve been browsing online more than 3 hours today, yet I never found any interesting article like yours. It’s
pretty worth enough for me. Personally, if all website owners and
bloggers made good content as you did, the net will be a lot more useful than
ever before.