This is a message.

Play YouTube videos directly within Flowplayer

The YouTube Flowplayer plugin uses the AS3 API to show the youtube videos using Flowplayer.


Category:

Tags:

This demonstrates a setup to play a video from YouTube. Additionally fetches related videos from the YouTube API and shows them in a scrollable playlist that shows up when the playback begins.

Features

  • Chromeless player support with full functionality and integration with other flowplayer plugins.
  • Provides an event for obtaining detailed data for the video to be used for customised features via the javascript API and Youtube Gdata.
  • Full control of the player controls including fullscreen.
  • Chrome embedded player support with full chrome configuration support.
  • Full playlist support provided by Flowplayer.
  • HD quality toggle support with the bwcheck and bitrateselect plugins.
  • Support for Bandwidth Checking and bitrate selection, Video Quality Selection and Related Videos features.
  • Provides events for obtaining detailed data for the video to be used for customised features aswell as quality level changes via the javascript API.

Purchase

This plugin is developed, maintained and sold by Electroteque Multimedia. You can purchase it via PayPal.

License Options
Domain(s)

Examples

The following snippets illustrate how the above demo was constructed.

HTML coding

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

Flowplayer configuration

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

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";
 

 
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

Youtube with HD Select Example

This example demonstrates Youtube playback with hd bitrate selection using the bitrateselect plugin.

HTML coding

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

<a id="ythd" style="display:block;width:660px;height:350px;"></a>

HTML

Flowplayer configuration

We use the bitrate select plugin to provide hd toggle bitrate switching. The YouTube plugin gets available bitrates information from YouTube with by enabling hd mode config with hd.

$f("ythd", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
log: { level: 'debug', filter: 'org.electroteque.youtube.*, org.flowplayer.bitrateselect.*' },
plugins: {
youtube: {
url: "/media/swf/flowplayer.youtube-local-3.2.11.swf",
// tell the youtube plugin we are in hd toggle mode
hd: true,
//tells the youtube plugin we are setting the default quality / bitrate to large or hd720
defaultQuality: "large",
hdLevel: "hd720"
},
// bandwidth detection plugin
bitrateselect: {
url: "flowplayer.bitrateselect-3.2.14.swf",
onStreamSwitchBegin: function (newItem, currentItem) {
$f().getPlugin('content').setHtml("Will switch to: " + newItem.streamName +
" from " + currentItem.streamName);
},
onStreamSwitch: function (newItem) {
$f().getPlugin('content').setHtml("Switched to: " + newItem.streamName);
}
 
},
// a content plugin to show BW info (for demo purposes only)
content: {
url: "flowplayer.content-3.2.9.swf",
bottom: 30, left: 0, width: 250, height: 150,
backgroundColor: 'transparent', backgroundGradient: 'none', border: 0,
textDecoration: 'outline',
style: {
body: {
fontSize: 14,
fontFamily: 'Arial',
textAlign: 'center',
color: '#ffffff'
}
}
}
},
clip: {
provider: 'youtube',
urlResolvers: [ 'youtube', 'bitrateselect' ],
url: 'api:YE7VzlLtp-4',
autoPlay: false
}
});

JavaScript

Youtube with Bandwidth Check Example

This example demonstrates Youtube playback with bandwidth checking and bitrate selection using the bwcheck javascript plugin

HTML coding

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

<!-- player container-->
<a class="player" id="ytbw" href="api:Q_6qRyYn-68" style="display:block;width:660px;height:350px;"></a>
 
<div id="bitrateMenuContainer" style="display:none;">
<span class="bitrateTitle">Choose Video Bitrate:</span> <br/>
 
<div id="bitrateMenu" style="display:none;">
<a href="{bitrate}">{label}</a>
 
</div>
</div>

HTML

Flowplayer configuration

We use the bandwidth detection plugin to determine the available bandwidth. The YouTube plugin gets the bitrate information from YouTube with the config bitratesOnStart and sets things up so that the bwcheck plugin can use them.

$f("ytbw", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
log: { level: 'debug', filter: 'org.electroteque.youtube.*, org.flowplayer.bwcheck.*' },
plugins: {
youtube: {
url: "/media/swf/flowplayer.youtube-local-3.2.11.swf",
 
// tell the youtube plugin to fetch the bitrates
bitratesOnStart: true,
qualityLabels: {
"hd720": "HD 720p",
"large": "Large 480p",
"medium": "Medium 320p",
"small" : "Small"
}
},
bitrateselect: {
url: "flowplayer.bitrateselect-3.2.14.swf",
hdButton: {
place: false
}
},
// bandwidth detection plugin
bwcheck: {
url: "flowplayer.bwcheck-3.2.13.swf",
netConnectionUrl: "flowplayer.bwcheck-3.2.13.swf",
checkOnStart: true,
maxWidth: 854,
// hook up a listener to show the BW info in the content plugin
onBwDone: function(mappedBitrate, detectedBitrate) {
var content = $f("ytbw").getPlugin('content');
var info = "Your speed is: " + detectedBitrate + "Your chosen bitrate: " + mappedBitrate.bitrate + "Video file served: " + mappedBitrate.url;
content.setHtml(info);
}
},
// a content plugin to show BW info (for demo purposes only)
content: {
url: "flowplayer.content-3.2.9.swf",
bottom: 30, left: 0, width: 250, height: 150,
backgroundColor: 'transparent', backgroundGradient: 'none', border: 0,
textDecoration: 'outline',
style: {
body: {
fontSize: 14,
fontFamily: 'Arial',
textAlign: 'center',
color: '#ffffff'
}
}
}
},
clip: {
provider: 'youtube',
urlResolvers: ['youtube','bitrateselect','bwcheck'],
url: 'api:YE7VzlLtp-4',
autoPlay: false
 
}
}).bitrateselect('#bitrateMenu',{seperator: " | "});

JavaScript

Download a demo

LinkDescription

flowplayer.youtube-3.2.11-demo.zip

Includes README.txt and LICENCE.txt, and an example page.

Electroteque Multimedia

Complete documentation and more examples are available at electroteque.org.