Youtube Play YouTube videos directly within Flowplayer



The YouTube Flowplayer plugin uses the AS3 API to show the Youtube videos using Flowplayer and the Javascript iframe API for IOS fallback.


Category:

Tags:

This demonstrates a setup to play a video from Youtube with a manually configured playlist of Youtube videos. Additionally fetches info about each video from the Gdata API.

The plugin can obtain a list of quality levels to be used for a bitrates config array to be used with the bwcheck and bitrateselect plugin. The plugin can also be used without the bwcheck plugin to display a list of Youtube video quality levels to select manually.

The plugin also obtains a list of related videos from the Gdata API feed and configures a related config array to be used with building related video playlists. The data information can also be obtained from the event onApiData.

The plugin works with manual playlists aswell in combination with the flowplayer playlist javascript api.

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.
  • New improved mobile (IOS / Android) fallback feature with multi format playlist support for API players and Html5 video.
  • Support for Youtube Live and DVR events in both Flash and mobile fallback.

Known Issues

  • The javascript plugin for IOS fallback provides near features to the Flash plugin but due to limitations with the Flowplayer wrapper requires to override embedding and replicating some api features therefore integration with the ipad plugin for normal videos in the same playlist will not work. A possible work around is loading the javascript plugins on demand using the `load` api method on the plugin call.
  • Some videos are failing when specifying a start offset due to some Youtube api bug. Use the javascript seek api instead if this becomes an issue.

(Current Version 3.2.11)

Compatibility

  • Flowplayer 3.2.6 to 3.x.x
  • Bwcheck Plugin version 3.2.8 and above
  • Bitrateselect Plugin version 3.2.8 and above

Changes since 3.2.10

  • Fixes with issues with seeking in Flowplayer 3.2.15 and above.
  • Fixes seeking backwards in the buffer with the Flowplayer javascript api.
  • Fixes for buffering measurements.

Changes since 3.2.9

  • Refactoring of the IOS fallback Javascript plugin to work with multiple videos on the page and provide more features of the Flowplayer API.

Changes since 3.2.8

  • Fixed issue with start time feature.
  • Fixed issue with start time feature used in conjunction with the auto buffering feature.

Changes since 3.2.7

  • Fixed issue with the auto buffering feature.

Changes since 3.2.6

  • HD quality toggle support with the ability of selecting a default quality.
  • Fixed issues with player resizing.
  • Fixed api changes to seeking.
  • Added ability to customise bitrate labels for the bitrate selection.
  • Fixed issues with playback completion.
  • Fixed issue setting ad overlay click area height setting.
  • Fixed duration and playback completion issues with youtube videos providing inaccurate duration information.
  • Fixed issue with multiple hd options and providing an option to choose which video is a hd clip.
  • Fixed issue with videos with only two bitrates and no hd clip available, will not toggle the hd button.
  • Added ability to load the api on request.
  • Added option to load the api via secure server urls.
  • Removed the need for the extra config urlResolvers, the plugin will use itself as default.
  • Fixed a problem with auto buffering which requires muting the audio first.

Changes since 3.2.4

  • Ads overlay container support.
  • Video playback error event callback support.
  • Chrome embedded player support.

Plugin Available For Purchase via Paypal


License Options
Domain(s)

(Version 3.2.10)

License Update

The initial cost for setup for small blog sites / not for profit has been reduced on feedback, for commercial sites use the single and multi domain license as normal.

License Information

The Youtube Plugin is a once off commercial license with updates and support to the Youtube plugin only. Flowplayer related questions and support may be provided on their forums at http://flowplayer.org/forum/index.html

  • Single Domain License - Suitable for small to medium sites / blog sites / not for profit with updates and unlimited support included.
  • Multi Domain License - Suitable for larger commercial sites and video platform sites with updates, feature requests and unlimited priority support included.
  • Unlimited - Suitable for distributing with software, provided will be the plugin as an actionscript library to compile into the flopwlayer unlimited player.

Note:

With your purchase please provide your domains to be provided with your licensed plugin. New domains need to be requested manually for the moment.

Refund Policy:

Please try the demo before purchase or request for a 60 day site demo. Refunds will not be issued unless under some circumstances sorry for the inconvenience.

List Of Examples

Examples

Example of Youtube videos in a playlist

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 '' + url + '';
            }
        ).replace(/(\r\n|\r|\n)/g, "
"); } return text; } function showInfo(gdata, container) { $('#category-content').html(gdata.category); $('#description').html(formatContent(gdata.content)); $('#content-container').show(); } function showRelatedList(gdata, container) { var relatedVideos = gdata.relatedVideos; var content = ''; content += "\t" + '' + "\n"; content += "\t\t" + '' + "\n" content += "\t" + ''+ gdata.title +'' + "\n"; content += "\t" + 'by ' + gdata.author.name + ''+ gdata.statistics.viewCount +' views' + "\n"; content += "\t\t" + '' + gdata.duration + '' + "\n"; content += "\t" + '' + "\n"; //add the html for the first playlist item $(container).html(content); jQuery.each( relatedVideos, function(index, item){ var content = ''; content += "\t" + '' + "\n"; content += "\t\t" + '' + "\n" content += "\t" + ''+ item.title +'' + "\n"; content += "\t" + 'by ' + item.author.name + ''+ item.statistics.viewCount +' views' + "\n"; content += "\t\t" + '' + item.duration + '' + "\n"; //append the html for the related video item $(container).append(content); //add the related video to the playlist $f("related").addClip({ url: item.url }); }); $("#content-container a .view-count").prettynumber({ delimiter : ',' }); $(container).overscroll(); $('#content-container a .video-time').showTime(); $(container).show(); } var shownRelatedList = false; $f("related", "http://static.electroteque.org/swf/flowplayer.swf", { plugins: { youtube: { url:'http://static.electroteque.org/swf/flowplayer.youtube-3.2.12.swf', enableGdata: true, loadOnStart: false, 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 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.*' } }).mobile().playlist("#playlist1", {continuousPlay: true});

Configuration

Here is a list of the configuration options:

property / datatype default description
enableGdata
boolean
false When enabled the Gdata feed will be collected and video information will be returned via the onApiData event. This will collect information like related videos, category, tags, title, description etc.
bitratesOnStart
boolean
false This setting will tell the plugin to obtain the quality levels / bitrates for the video before startup. This is required when used in combination with the bwcheck plugin to fill the bitrates list dynamically, this is required as the Youtube API does not expose bitrates before playback or via their data API.
qualityLabels
object
Provide quality labels to be used for generating the bitrates list with the bitrateselect plugin. The keys for the config object are the youtube quality levels hd720, large, medium, small and their corresponding labels.
hd
boolean
false Enables hd toggling mode when obtaining bitrates for a video to be used with the bitrateselect plugin. This will provide a list of a large and hd clip. If there is no hd clip available the hd button wil be disabled.
hdLevel
string
If set, this option enables selecting which youtube quality level is a hd clip to be used in combination of the hd option and bitrateselect plugin. Possible options are hd720 or hd1080. If hd720 is chosen, bitrate toggling options are large and hd720. If hd1080 is chosen bitrate toggling options are large and hd1080. By default if there is a hd1080 quality option hd720 is removed from the selection and hd1080 is chosen as the hd clip.
defaultQuality
string
default The default quality level (default,medium,large,hd720). If used in conjunction with the hd toggle feature, setting a default quality here will start playback with the desired default bitrate, if setting to hd720 as default, the hd button feature will toggle to hd automatically.
videoFormats
array
Obtain the preset youtube video format information.
displayErrors
boolean
false Setting to enable youtube errors to be displayed for debugging purposes, or use the javascript callback functions and console logging.
apitype
string
chromeless Valid options are chromeless to display the chromeless player or chrome to display the embedded chrome player.
adOverlayHeight
number
100 The height in pixels at the bottom to accomodate for youtube ad overlays. This will provide access to the ads overlay to be able to click the close buttons without intefering with the flowplayer screen controls.
chrome
object
Settings for the chrome player.
durationTracking
boolean
false Youtube videos do not return the correct duration immediately until 1 second has passed, it will first return a second accurate representation. Some versions of Flowplayer are affected by the inaccurate duration and do no complete correctly. Enabling durationTracking resets the clip duration after a second has passed. Future versions of flowplayer have the corrected duration tracking and end correctly.
loadOnStart
boolean
true By default the plugin will load the api on player load. By turning this off the api will load on request when working with other video providers in a playlist.
secure
boolean
false When loading the player in a secure server environment, enable this to load the Youtube api via secure server also.

Handling Aspect Ratios

The Youtube API does not handle or dispatch video metadata or aspect ratio information unless the data api is requested which could cause slow startup times. Therefore to configure an older Youtube video or a particular video in 4x3 aspect ratios instead of 16x9 set the clip playlist item property `aspectNormal` to true.

This will configure the metadata and internal video dimensions to the 4x3 aspect ratio dimensions instead of the default widescreen dimensions for a selected video quality.


   clip: {
        ...
        aspectNormal: true
        ...
   }

Live Events

Simply configuring the clip as live will determine that it is a live stream with no duration. If the stream is configured to publish as DVR, setting the player config to dvr will enable dvr playback and to play at the current live time.


   clip: {
        ...
        live: true,
        dvr: true,
        ...
   }

Youtube Video Playlist Example

This example demonstrates using a manual playlist config with youtube videos.

Youtube Videos Playlist:


$(function() {

$f("manualVideoPlaylist", "http://static.electroteque.org/swf/flowplayer.swf", {
	// configure the required plugin
	playlist: [
			       {
						url: 'api:YE7VzlLtp-4',
						provider: 'youtube',
						title: 'Big Buck Bunny - Youtube'

				   },
				   {
						url: "http://videos.electroteque.org/big_buck_bunny_400k.mp4",
                        provider: 'http',
						urlResolvers: null	,
						title: 'Big Buck Bunny - Mp4'
					},
				   {
				   		url: 'api:bsGEWHNJ3s8',
				   		provider: 'youtube',
						title: 'Elephants Dream - Youtube'
				   }
    ],
    onLoad: function() {
        $("#playlist2").show();
    },

	plugins:  {

		controls: { autoHide: true, playlist: true },
		youtube: {
				url:'http://static.electroteque.org/swf/flowplayer.youtube-3.2.12.swf',
                onVideoRemoved: function() {
                    console.log("Video Removed");
                },
                onVideoError: function() {
                    console.log("Incorrect Video ID");
                },
                onEmbedError: function() {
                    console.log("Embed Not Allowed");
                }

		}
	},
	clip: {
        autoPlay: true
	},
	log: {
        level: 'debug',
        filter: 'org.flowplayer.controller.*,org.flowplayer.youtube.*'
    }

}).mobile().playlist("#playlist2", {loop:true});

});

Youtube with HD selection Example

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



$f("hd", "http://static.electroteque.org/swf/flowplayer.swf", {
	// configure the required plugin
	plugins:  {

		controls: { autoHide: true },
		youtube: {
			url:'http://static.electroteque.org/swf/flowplayer.youtube-3.2.12.swf',
			enableGdata: false,
			hd: true,
            defaultQuality: "large",
            hdLevel: "hd720"
		},
		content: {
			url: 'http://static.electroteque.org/swf/flowplayer.content.swf',
			top: 0,
			left: 0,
			width: 250
		},
		bitrateselect: {
			url: 'http://static.electroteque.org/swf/flowplayer.bitrateselect.swf',
			hdButton: {
                place: 'both'
            },
            onStreamSwitchBegin: function(newItem, currentItem) {
                 $f("hd").getPlugin('content').setHtml("Will switch to quality : " + newItem.format + " from " + currentItem.format);
            },
            onStreamSwitch: function (newItem) {
                $f("hd").getPlugin('content').setHtml("Switched to: " + newItem.format);
            }
		}
	},
	clip: {
		provider: 'youtube',
		urlResolvers: ['youtube','bitrateselect'],
        autoPlay: true,
        url: 'api:YE7VzlLtp-4'
	},
	log: {
        level: 'debug',
        filter: 'org.flowplayer.controller.*,org.flowplayer.bitrateselect.*,org.flowplayer.youtube.*'
    }

});

Youtube with Bandwidth Check Example

This example demonstrates integration with the bandwidth check plugin to do bandwidth detection and the bitrateselect plugin to manage the video bitrate selection. This example does not use hd toggle functions so the hd button is disabled. The bitrateselect javascript plugin is also used to display the video bitrates for manual selection.


Choose Video Bitrate:


$f("bwcheck", "http://static.electroteque.org/swf/flowplayer.swf", {
	// configure the required plugin
	plugins:  {

		controls: { autoHide: true },
		youtube: {
			url:'http://static.electroteque.org/swf/flowplayer.youtube-3.2.12.swf',
			enableGdata: false,
			bitratesOnStart: true,
            qualityLabels: {
			    "hd1080" : "HD 1080p",
                "hd720": "HD 720p",
                "large": "Large 480p",
                "medium": "Medium 320p",
                "small" : "Small"
            },

		},
		content: {
			url: 'http://static.electroteque.org/swf/flowplayer.content.swf',
			top: 0,
			left: 0,
			width: 250
		},
        bitrateselect: {
            url: 'http://static.electroteque.org/swf/flowplayer.bitrateselect.swf',
            hdButton: {
                place: false
            }
        },
		bwcheck: {
			url: 'http://static.electroteque.org/swf/flowplayer.bwcheck.swf',
			netConnectionUrl: 'http://static.electroteque.org/swf/flowplayer-bwcheck.swf',
			bitrateProfileName: 'YoutubeBitrateProfile',
			maxWidth: 1920,
            checkOnStart: true,
            onStreamSwitchBegin: function(newItem, currentItem) {
                 $f("hd").getPlugin('content').setHtml("Will switch to quality : " + newItem.format + " from " + currentItem.format);
            },
            // this method is called when the bandwidth check is done
            onBwDone: function bwDoneInfo(mappedBitrate, detectedBitrate) {
                var content = $f("bwcheck").getPlugin('content');
                var info = "Your speed is: " + detectedBitrate + "
Your chosen bitrate: " + mappedBitrate.bitrate + "
Video file served: " + mappedBitrate.url; content.setHtml(info); } } }, clip: { provider: 'youtube', urlResolvers: ['youtube','bitrateselect','bwcheck'], autoPlay: true, url: 'api:YE7VzlLtp-4' }, log: { level: 'debug', filter: 'org.flowplayer.controller.*,org.flowplayer.bwcheck.*,org.flowplayer.bitrateselect.*,org.flowplayer.youtube.*' } }).mobile().bitrateselect('#bitrateSelect',{seperator: " | "});

Labels for generating the bitrate list can be customised with the qualityLabels config property object using the youtube quality levels as keys.


    qualityLabels: {
        "hd720": "HD 720p",
        "large": "Large 480p",
        "medium": "Medium 320p",
        "small" : "Small"
    }
 

To disable the hd button the place config is set to false


    hdButton: {
        place: false
    }
 

Youtube with Video Quality Selection Example

This example demonstrates video quality / bitrate selection without the use of the bwcheck plugin. It will obtain the available quality levels / bitrates for the video on startup, and generate a selection to provide manual quality selection. The onVideoQualityChange event is used to provide feedback of the quality change.

Choose Video Bitrate:



$f("quality", "http://static.electroteque.org/swf/flowplayer.swf", {
	// configure the required plugin
	plugins:  {

		controls: { autoHide: true },
		youtube: {
			url:'http://static.electroteque.org/swf/flowplayer.youtube-3.2.12.swf',
			qualityLabels: {
			    "hd1080" : "HD 1080p",
                "hd720": "HD 720p",
                "large": "Large 480p",
                "medium": "Medium 320p",
                "small" : "Small"
            },
			bitratesOnStart: false,
			onVideoQualityChange: function(level, videoFormat) {
				var content = $f("quality").getPlugin('content');
				var info = "Chosen bitrate is: " + videoFormat.bitrate + "
Video Quality Served: " + level + "
"; content.setHtml(info); }, }, content: { url: 'http://static.electroteque.org/swf/flowplayer.content.swf', top: 0, left: 0, width: 250 } }, clip: { provider: 'youtube', urlResolvers: 'youtube', autoPlay: true, url: 'api:YE7VzlLtp-4', onStart: function(clip) { var bitrates = []; bitrates = $f("quality").getPlugin("youtube").getBitrateItems(); var index = 0; var quality = $f("quality").getPlugin("youtube").getPlaybackQuality(); $.each(bitrates, function() { var el = $(" " + this.label + " "); el.attr("index",this.format); el.attr("href",this.bitrate); el.addClass('bitrate-active'); el.click(function() { el.removeClass('bitrate-active'); $("#qualitySelection a").removeClass('bitrate-selected').addClass('bitrate-active'); el.addClass('bitrate-selected'); $f("quality").getPlugin("youtube").setPlaybackQuality($(this).attr("index")); return false; }); $("#qualitySelection").append(el); if (index < bitrates.length - 1) $("#qualitySelection").append("|"); index++; }); $('[index = "'+ quality + '"]', $("#qualitySelection")).removeClass('bitrate-active').addClass('bitrate-selected'); } }, log: { level: 'debug', filter: 'org.flowplayer.controller.*,org.flowplayer.youtube.*' } }).mobile();

Embedded Chrome Player Example

This example demonstrates loading an embedded youtube player and configuring it.

The chrome config allows the chrome embedded player to be customised see the Youtube Player Properties for more.




$f("embedded", "http://static.electroteque.org/swf/flowplayer.swf", {
	// configure the required plugin
	screen: {
	   zIndez:1
	},
	plugins:  {
		controls: null,
		youtube: {
			url:'http://static.electroteque.org/swf/flowplayer.youtube-3.2.12.swf',
            apitype: 'chrome',
			onVideoRemoved: function() {
                console.log("Video Removed");
			},
			onVideoError: function() {
                console.log("Incorrect Video ID");
            },
			onEmbedError: function() {
                console.log("Embed Not Allowed");
            },
            adOverlayHeight: 300,
            //zIndez:0,
            displayErrors: true,
            chrome: {
                iv_load_policy: 3,
			    rel: 0,
			    showinfo: 0,
				showsearch: 0,
                autohide: 1

            }
		}
	},
	clip: {
		provider: 'youtube',
		urlResolvers: 'youtube',
        autoPlay: true,
        url: 'api:YE7VzlLtp-4'
	},
	log: {
        level: 'debug',
        filter: 'org.flowplayer.controller.*,org.flowplayer.youtube.*'
    }

}).mobile();

The flowplayer controls needs to be disabled to display the youtube chrome player correctly like so



    .....
	plugins:  {
		controls: null,
		.....
	},
	....

Youtube Video with Poster Image Example

This example demonstrates having the youtube video poster in the playlist as a splash.

The configuration uses the playlist splash example http://flowplayer.org/demos/configuration/playlist-splash.html where a splash image url is configured before the clip in the playlist.



$(function() {

$f("poster", "http://static.electroteque.org/swf/flowplayer.swf", {
	// configure the required plugin
	playlist: [
			       {
						url: 'http://i.ytimg.com/vi/YE7VzlLtp-4/hqdefault.jpg'
				   },
			       {
						url: 'api:YE7VzlLtp-4',
						provider: 'youtube',
						title: 'Big Buck Bunny',
						autoPlay: false,
						autoBuffering: true
				   }
    ],
	plugins:  {

		controls: { autoHide: true, playlist: true },
		youtube: {
				url:'http://static.electroteque.org/swf/flowplayer.youtube-3.2.12.swf',
                onVideoRemoved: function() {
                    console.log("Video Removed");
                },
                onVideoError: function() {
                    console.log("Incorrect Video ID");
                },
                onEmbedError: function() {
                    console.log("Embed Not Allowed");
                }

		}
	},
	clip: {

	},
	log: {
        level: 'debug',
        filter: 'org.flowplayer.controller.*,org.flowplayer.youtube.*'
    }

}).mobile();

});


    .....
	playlist: [
	    {
            url: 'http://i.ytimg.com/vi/YE7VzlLtp-4/hqdefault.jpg'
        },
        {
		    url: 'api:YE7VzlLtp-4',
			provider: 'youtube',
			title: 'Big Buck Bunny',
			autoPlay: false,
			autoBuffering: true
		}
    ],
	....

The youtube poster image url is obtained from http://i.ytimg.com/vi/YE7VzlLtp-4/hqdefault.jpg where YE7VzlLtp-4 is the video id.

The video clip config is then configured with autoPlay set to false and autoBuffering set to true.

Chrome Player Config

property / datatype default description
autohide
number
0 Values: 0, 1, and 2 (default). This parameter indicates whether the video controls will automatically hide after a video begins playing. The default behavior is for the video progress bar to fade out while the player controls (play button, volume control, etc.) remain visible.
If this parameter is set to 0, the video progress bar and the video player controls will be visible throughout the video.
If this parameter is set to 1, then the video progress bar and the player controls will slide out of view a couple of seconds after the video starts playing. They will only reappear if the user moves her mouse over the video player or presses a key on her keyboard.
border
number
0 Values: 0 or 1. Default is 0. Setting to 1 enables a border around the entire video player. The border's primary color can be set via the color1 parameter, and a secondary color can be set by the color2 parameter.
cc_load_policy
number
1 Values: 1. Default is based on user preference. Setting to 1 will cause closed captions to be shown by default, even if the user has turned captions off.
color1,color2
string
Values: Any RGB value in hexadecimal format. color1 is the primary border color, and color2 is the video control bar background color and secondary border color.
controls
number
1 Values: 0 or 1. Default is 1. This parameter indicates whether the video player controls will display. If this parameter is set to 0, then the player controls will not display, causing the player to look like the chromeless player.
disablekb
number
0 Values: 0 or 1. Default is 0. Setting to 1 will disable the player keyboard controls. Keyboard controls are as follows:
Spacebar: Play / Pause
Arrow Left: Jump back 10% in the current video
Arrow Right: Jump ahead 10% in the current video
Arrow Up: Volume up
Arrow Down: Volume Down
fs
number
1 Values: 0 or 1. Default is 0. Setting to 1 enables the fullscreen button in the embedded player.
hd
number
1 Values: 0 or 1. Default is 0. Setting to 1 enables HD playback by default.
iv_load_policy
number
0 Values: 1 or 3. Default is 1. Setting to 1 will cause video annotations to be shown by default, whereas setting to 3 will cause video annotation to not be shown by default.
loop
number
0 Values: 0 or 1. Default is 0. In the case of a single video player, a setting of 1 will cause the player to play the initial video again and again.
playlist
string
Value is a comma-separated list of video IDs to play.
rel
number
0 Values: 0 or 1. Default is 1. Sets whether the player should load related videos once playback of the initial video starts. Related videos are displayed in the "genie menu" when the menu button is pressed. The player search functionality will be disabled if rel is set to 0.
showinfo
number
0 Values: 0 or 1. Default is 1. Setting to 0 causes the player to not display information like the video title and uploader before the video starts playing.
showsearch
number
0 Values: 0 or 1. Default is 1. Setting to 0 disables the search box from displaying when the video is minimized. Note that if the rel parameter is set to 0 then the search box will also be disabled, regardless of the value of showsearch.

JavaScript API

Methods

method returns description
getBitrateItems array Returns a list of available quality levels / bitrates for the video.
setPlaybackQuality(suggestedQuality) Sets the playback video quality for the current video. Accepted levels are small, medium, large, hd720, hd1080.
getPlaybackQuality string Gets the playback video quality for the current video. Levels are small, medium, large, hd720, hd1080.

Events

Event When does it fire?
onApiData() Fires when the gdata feed information is collected when the enableGdata config is enabled. The callback is fed with the following arguments:
  • gdata the gdata object with information of the video.
onVideoQualityChange() Fires when the video playback quality has changed. The callback is fed with the following arguments:
  • level the youtube video quality level.
  • videoFormat the video format object for this level which includes the bitrate, dimensions etc.

Gdata Object

Property Description
url The video url ie api:youtubeid.
id The youtube video id.
author The author object with the following properties:
  • name the author username.
  • feed the uri to the author gdata feed.
title The video title.
category The video category.
content The video content / description.
defaultThumbnail The default video thumbnail.
duration The duration of the video in seconds.
relatedVideos An array of related video objects also returned in the clip.related property, returns the same properties as the top level item.
statistics The statistics object with the following properties:
  • favoriteCount the count of favorites added by users.
  • viewCount the view count.
tags A numbered array of tags.
thumbnails An array of thumbnail objects with the following properties:
  • height the thumbnail height.
  • width the thumbnail width.
  • time the time in the video of the thumbnail still.
  • url the thumbnail url.
comments The object of user comments:
  • countHint the count of user comments.
  • feed the feed of the user comments.
aspectRatio The aspect ratio of the video.
embedAllowed If the video is allowed to be embedded into the player.
ratings The ratings object with the following properties:
  • average the average ratings.
  • max the max ratings.
  • min the min ratings.
  • numRaters the number of raters.

Bitrates

The bitrates array is added to the clip.bitrates property. The bitrates property is to be used in conjuncton with the bandwidth check plugin for providing bitrate selections.

Property Description
bitrate The video bitrate.
format The Youtube video quality level.
height The video height.
width The video width.
label The label of the bitrate option provided by a static map of bitrate / quality levels.
type The video type.
url The video url.

Download a demo



flowplayer.youtube-3.2.11-demo.zip includes README.txt and LICENCE.txt, and an example page

This is a non expiring demo version of the plugin. Works only on your local machine on localhost or 127.0.0.1.