You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

YouTube YouTube Videos in Flowplayer

Introduction

The YouTube Flowplayer plugin uses the Youtube AS3 API to play YouTube videos directly within Flowplayer.

Features

Purchase


This plugin is developed, maintained and sold by Electroteque Multimedia. To purchase it visit its homepage.

Examples

Example with related videos

This example 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.

Search engine friendly content

HTML coding

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

<div style="width:900px;">
 	
    <!-- player container--> 
    <a href="api:jnTozHODUqc" style="display:block;width:425px;height:300px;float:left;" id="youtube">
    
       <!-- splash image inside the container --> 
       <img src="http://www.flowplayer.org/img/home/flow_eye.jpg" 
            alt="Search engine friendly content" />
     </a>
     
    <div id="playlistContainer" style="float:left;width:190px;margin-left:50px; margin-top:0px;">
    </div>
</div>

Flowplayer configuration

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

// function that builds up the related videos scrollable list
function showRelatedList(gdata, container) {
    var relatedVideos = gdata.relatedVideos;
    var content = '<em>Related Videos:</em>';
    content += '<a class="go up"></a><div class="playlist"><div class="clips low">';
    
    jQuery.each( relatedVideos, function(index, item){
        content += '<a href="'+ item.url +'" '+ (index==0 ? 'class="first"' : "") +'>';
        content += item.title + "<br/>";
        content += "<em>" + Math.round(item.duration / 60) + " min</em></a>";
    });
    
    content += '</div></div><a class="go down"></a>';
    
    $(container).html(content);
    
    $("div.playlist").scrollable({
        items:'div.clips',
        vertical:true,
        next:'a.down',
        prev:'a.up'
    });
}

// embed the player
$f("youtube", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
    plugins:  {
        youtube: {
            url:'flowplayer.youtube-3.2.7.swf',
            enableGdata: true,
            
            // listener to youtube API data, used to build up a related videos list
            onApiData: function(gdata) {
                console.log(gdata);
                
                // use the function defined above to show the related clips
                showRelatedList(gdata, "#playlistContainer");
            }
        }
    },
    clip: {
        provider: 'youtube',
        urlResolvers: 'youtube'
    }
}).playlist("div.clips");

Youtube with Bandwidth Check Example

This example demonstrates a basic setup to play the video.

Search engine friendly content

HTML coding

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

<!-- player container--> 
<a href="api:hWAjl_1MhSc" style="display:block;width:425px;height:300px;" id="ytbw">

   <!-- splash image inside the container --> 
   <img src="http://www.flowplayer.org/img/home/flow_eye.jpg" alt="Search engine friendly content" />
</a>

Flowplayer configuration

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

$f("ytbw", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
    log: { level: 'debug', filter: 'org.flowplayer.youtube.*, org.flowplayer.bwcheck.*' },
    plugins:  {
        youtube: {
            url:'flowplayer.youtube-3.2.7.swf',
            
            // tell the youtube plugin to fetch the bitrates
            bitratesOnStart: true
        },
        // a content plugin to show BW info (for demo purposes only)
        content: {
          	url: 'flowplayer.content-3.2.0.swf',
          	top: 4,
          	left: 4,
          	width: 250,
          	border: 'none'
        },
        // bandwidth detection plugin
        bwcheck: {
           	url: 'flowplayer.bwcheck-3.2.5.swf',
           	netConnectionUrl: 'http://releases.flowplayer.org/swf/flowplayer.bwcheck-3.2.5.swf',
           	
            // we will resize the player according to the dimensions of the selected video
           	streamSelectionStrategy: 'resizable',
           	maxContainerWidth: 854,
           	
           	// hook up a listener to show the BW info in the content plugin
           	onBwDone: function bwDoneInfo(mappedBitrate, detectedBitrate) {
           	    console.log("onBWDone");
           	    var content = $f().getPlugin('content');
                
           	    $("#ytbw")
           	        .width(parseInt(mappedBitrate.width))
           	        .height(parseInt(mappedBitrate.height));
                
           	    var info = 
           	        "Your speed is: " + detectedBitrate +
           	        "<br />Chosen bitrate is: " + mappedBitrate.bitrate;
           	        
           	    content.setHtml(info);
           	}
        }
    },
    clip: {
        provider: 'youtube',
        urlResolvers: [ 'youtube', 'bwcheck' ]
    }
});

Electroteque Multimedia

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