Is it Live?

Is it Live?

Thursday, February 13, 2014

YouTube has the ability to create live events now where you can stream your encoded video out to an audience. The URL for these events looks just like a regular YouTube URL, with the 11 character video ID at the end. One of the projects I've been working on called for the ability to recognize when a channel is showing a live stream. The Ustream platform is pretty good at this, especially in terms of embedding. When you use the Ustream embed code from their platform, if you are live it will embed the live stream, when you aren't live you can show a playlist of videos within your account. Paid accounts give the ability to upload non-Ustream recorded videos but you can only have one playlist. I felt if I could just find a way to determine when a YouTube account goes live, then I could embed any playlists I want. Turns out, there is a way.

After a few months of research, I accidentally happened upon this kind of feed. Essentially, this is a feed of completed live events given the channel username. You can see the URL of the feed has several elements that can be altered in order to change the output, the most important being the status in this case. A list of possible statuses is here. So, essentially I'd need some code to look at the feed for active live events and create the embed code if there is a live event within the active feed. We do this using the jQuery $.ajax call and direct it at the XML feed link.

$.ajax({
url: 'https://gdata.youtube.com/feeds/api/users/globesville/live/events?v=2&status=active',
dataType: 'xml',
success: function(data) {
var entry = $(data).find('entry');
if (entry.length > 0){
var link = entry.find('content').attr('src');
var videoID = link.substr(link.length - 15,11);
$('.place').append($('<div />',
{html: '<iframe width="560" height="315" src="http://www.youtube.com/embed/' + videoID + '?autoplay=1" frameborder="0" allowfullscreen></iframe>'}).addClass('video'))
} else {
playlists();
}
},
error: function(){
$('.place').text('live fail');
}
});

What this code does is looks at the XML feed and tries to find the tag called "entry". If there is an entry, it looks for the tag "content" within that entry tag and then grabs the source attribute (src) and saves it as a variable. After some trimming to the source, we can get the video ID of the active live event. We put that video ID into the html embed code. In the code above there's a function called playlists() that occurs if there are no entries found in the feed, which then calls another $.ajax function to check the playlists feed. Here's what that looks like.

function playlists(){
$.ajax({
url: 'https://gdata.youtube.com/feeds/api/users/globesville/playlists?start-index=1&max-results=7',
dataType: 'xml',
success: function(data) {
var d = new Date();
var h = d.getHours();
if (h != 21){
var entry = $(data).find('entry');
var i = d.getDay();
var link = entry.eq(i).find('id').text();
var listID = link.substr(link.length - 34,34);
$('.place').append($('<div />',
{html: '<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=' + listID + '&autoplay=1" frameborder="0" allowfullscreen></iframe>'}).addClass('video'))
} else {
featured();
}
},
error: function(){
$('.place').text('playlist fail');
}
});
};


Notice the slight change in the embed code construction when using a playlist. Instead of simply adding the video ID at the end, we need to include videoseries?list= and then the list ID. There's was a bit more customization in this function as well. The if statement is checking to see what time it is; if it is 9PM (21 hundred hours) then it calls a featured() function which simply checks the completed live event feed and returns the most recent completed live event, similarly to the first block of code. This was to give a chance to people who may have missed the event to watch it later that day. The code above also only retrieves the seven most recent playlists and plays them depending on the day of the week using the index of the entry and the day of the week index (var i in the code). With this code, users could manage live events and playlists within the YouTube interface and then this code would automatically make the necessary changes for an external site. Just to be complete, here is the featured() function.

function featured(){
$.ajax({
url: 'https://gdata.youtube.com/feeds/api/users/globesville/live/events?v=2&status=completed',
dataType: 'xml',
success: function(data) {
var entry = $(data).find('entry');
var link = entry.eq(0).find('content').attr('src');
var videoID = link.substr(link.length - 15,11);
$('.place').append($('<div />',
{html: '<iframe width="560" height="315" src="http://www.youtube.com/embed/' + videoID + '?autoplay=1" frameborder="0" allowfullscreen></iframe>'}).addClass('video')) },
error: function(){
$('.place').text('live fail');
}
});
};


The last bit I'd like to mention is that all the embed codes are wrapped in a div with the class "video" to prepare for responsive video CSS code. You'll be able to see a working version at Globesville soon.