This is a message.

Stream videos from youtube

Embed a youtube stream with minimal configuration


Category:

Tags:

standalone demo

The Flowplayer youtube plugin and the Flowplayer playlist plugin make embedding youtube streams effortless. This demo streams a video from youtube and also displays a list of related videos as a scrollable playlist. The related video information is fetched via the YouTube API.

HTML

The player container href value contains the clip URL that points to a YouTube video ID.

<!-- player container-->
 
<div class="playerbox">
 
<a id="related" class="player" href="api:Q_6qRyYn-68" style="float:left;width:440px;height:350px;"></a>
<div id="content-container">
<div id="description"></div>
<br>
<div id="category">
<b>Category:</b><br>
<span id="category-content"></span>
 
</div>
<br>
<div id="tags">
<b>Tags:</b><br>
<span id="tags-content"></span>
</div>
</div>
 

</div>
 
<div id="playlist1" class="playlist"></div>
 
<br clear="all" />

HTML

Configuration

The clip object sets the YouTube plugin to be the video's streaming provider and URL resolver:

flowplayer("related", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
plugins: {
youtube: {
url: "/media/swf/flowplayer.youtube-local-3.2.11.swf",
enableGdata: true,
loadOnStart: true,
onVideoRemoved: function() {
console.log("Video Removed");
},
onVideoError: function() {
console.log("Incorrect Video ID");
},
onEmbedError: function() {
console.log("Embed Not Allowed");
},
onApiData: function(data) {
// use the function defined above to show the related clips
console.log("Received data");
// use the function defined above to show the related clips
showInfo(data, "#playlist1");
 
//load the related list for the first clip only
if (shownRelatedList) return;
showRelatedList(data, "#playlist1");
shownRelatedList = true;
},
displayErrors: true
}
},
clip: {
provider: 'youtube',
url: 'api:YE7VzlLtp-4',
autoPlay: false
},
log: {
level: 'debug',
filter: 'org.electroteque.youtube.*, org.flowplayer.controller.*'
}
 
}).playlist("#playlist1", {continuousPlay: true, template: playlistTemplate});

JavaScript

Here is the code for loading the related videos playlist:

function formatContent(text){
if (text) {
text = text.replace(
/((https?\:\/\/)|(www\.))(\S+)(\w{2,4})(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/gi,
function(url){
var full_url = url;
if (!full_url.match('^https?:\/\/')) {
full_url = 'http://' + full_url;
}
return '<a href="' + full_url + '" target="_blank">' + url + '</a>';
}
).replace(/(\r\n|\r|\n)/g, "<br />");
}
return text;
}
 
function showInfo(gdata, container) {
 

$('#category-content').html(gdata.category);
$('#tags-content').html(gdata.tags.join(","));
 
$('#description').html(formatContent(gdata.content));
 
$('#content-container').show();
 
}
 
function showRelatedList(gdata, container) {
var relatedVideos = gdata.relatedVideos;
var content = '';
 
content += "\t" + '<a href="'+ gdata.url +'" class="first active">' + "\n";
content += "\t\t" + '<img src="'+ gdata.defaultThumbnail +'"/>' + "\n"
content += "\t" + '<span dir="ltr" class="title" title="'+ gdata.title +'">'+ gdata.title +'</span>' + "\n";
content += "\t" + '<span class="stat">by ' + gdata.author.name + '</span><span class="stat view-count">'+ gdata.statistics.viewCount +' views</span>' + "\n";
content += "\t\t" + '<span class="video-time">' + gdata.duration + '</span>' + "\n";
content += "\t" + '</a>' + "\n";
 
//add the html for the first playlist item
$(container).html(content);
 

jQuery.each( relatedVideos, function(index, item){
$f("related").addClip({
url: item.url,
thumbnail: item.defaultThumbnail,
yttitle: item.title,
author: item.author.name,
views: item.statistics.viewCount,
ytduration: item.duration
 
});
});
 

 

$("#content-container a .view-count").prettynumber({
delimiter : ','
});
 
$(container).overscroll();
 

$('#content-container a .video-time').showTime();
$(container).show();
}
 
var shownRelatedList = false;
var playlistTemplate = "\t" + '<a href="${url}">' + "\n";
playlistTemplate += "\t\t" + '<img src="${thumbnail}"/>' + "\n"
playlistTemplate += "\t" + '<span dir="ltr" class="title">${yttitle}</span>' + "\n";
playlistTemplate += "\t" + '<span class="stat">by ${author}</span><span class="stat view-count">${views} views</span>' + "\n";
playlistTemplate += "\t\t" + '<span class="video-time">${ytduration}</span></a>' + "\n";

JavaScript