Daily Motion Play Daily Motion videos directly within Flowplayer



The Daily Motion Flowplayer plugin uses the AS3 API to show the Daily Motion videos using Flowplayer.


Tags:

This demonstrates a setup to play a video from Daily Motion with a manually configured playlist of Daily Motion videos.

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 Daily Motion video quality levels to select manually.

The plugin also obtains a list of related videos from the Daily Motion 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 Daily Motion data API.
  • Full control of the player controls including fullscreen.
  • Chrome embedded player support with full chrome configuration support.
  • Full playlist support provided by Flowplayer to play with other video formats.
  • HD quality toggle support with the bitrateselect plugin.
  • Support for 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.

Known Issues

  • No support for selecting default bitrate quality levels, therefore bandwidth check will not work and the HD toggle feature cannot select HD as default.
  • Unable to obtain precise errors from the API due to some of its internal problems, unable to determine an embed restriction and stream not found error.
  • Unable to display video buffering status correctly due to some internal problems in the API.
  • Unable to obtain data feed due to policy restriction.

(Current Version 3.2.8)

Compatibility

  • Flowplayer 3.2.6 and above
  • Bwcheck Plugin version 3.2.5 and 3.2.7
  • Bitrateselect Plugin version 3.2.8

Plugin Available For Purchase via Paypal


License Options

(Version 3.2.8)

License Information

The Daily Motion Plugin is a once off commercial license with updates and support to the Daily Motion 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 with updates and unlimited support included.
  • Multi Domain License - Suitable for larger 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.

List Of Examples

Examples

Example of Daily Motion videos in a playlist

Flowplayer configuration

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


function showInfo(data, container) {

    $('#category-content').html(data.category);
    $('#tags-content').html(data.tags.join(","));

    $('#description').html(data.description);

    $('#content-container').show();

}

function showRelatedList(container) {
    $(container + " a .view-count").prettynumber({
        delimiter : ','
    });

    $(container).overscroll();


    $(container + ' a .video-time').showTime();

}


$f("related", "http://static.electroteque.org/swf/flowplayer.swf", {
	// configure the required plugin
	onLoad: function() {
        showRelatedList("#playlist1");
    },
	plugins:  {

		dailymotion: {
			url:'http://static.electroteque.org/swf/flowplayer.dailymotion-3.2.8.swf',
            enableApiData: false,
            loadOnStart: false,
            onApiData: function(data) {
                showInfo(data, "#playlist1");
            }
		}
	},
	clip: {
		provider: 'dailymotion',
        autoPlay: false
	},
    log: {
        level: 'debug',
        filter: 'org.electroteque.dailymotion.*, org.flowplayer.controller.*'
    }

}).playlist("#playlist1", { continuousPlay: true, manual: true});

Configuration

Here is a list of the configuration options:

property / datatype default description
enableData
boolean
false When enabled the API data feed will be collected and video information will be returned via the onApiData event. This will collect information like related videos, tags, title, description, thumbnails 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 Daily Motion 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 Daily Motion quality levels hd1080, hd720, hq, sd 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 Daily Motion 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
sd The default quality level (sd,hq,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 Daily Motion video format information.
displayErrors
boolean
false Setting to enable Daily Motion errors to be displayed for debugging purposes, or use the javascript callback functions and console logging.
chromeless
string
true Valid options are chromeless to display the chromeless player or chrome to display the embedded chrome player.
chrome
object
Settings for the chrome player.
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 Daily Motion api via secure server also.

Daily Motion Video Playlist Example

This example demonstrates using a manual playlist config with Daily Motion videos.

Dailymotion Videos Playlist:


$(function() {



$f("manualVideoPlaylist", "http://static.electroteque.org/swf/flowplayer.swf", {
	// configure the required plugin
	onLoad: function() {
        $("#playlist2").show();
    },
	playlist: [
			       {
						url: 'api:x5q9zr',
						provider: 'dailymotion',
						title: 'Big Buck Bunny - Daily Motion'
				   },
				   {
						url: 'http://vod01.netdna.com/vod/demo.flowplayer/Extremists.flv',
                        provider: 'http',
						urlResolvers: null	,
						title: 'Extremists - FLV'
					},
				   {
				   		url: 'api:x6xr0',
				   		provider: 'dailymotion',
						title: 'Elephants Dream - Daily Motion'
				   }
    ],
	plugins:  {

		controls: { autoHide: true, playlist: true },
		dailymotion: {
				url:'http://static.electroteque.org/swf/flowplayer.dailymotion-3.2.8.swf'
		}
	},
	clip: {
        autoPlay: true
	},
	log: {
        level: 'debug',
        filter: 'org.flowplayer.controller.*,org.electroteque.dailymotion.*'
    }

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

});

Daily Motion with HD selection Example

This example demonstrates Daily Motion 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 },
		dailymotion: {
			url:'http://static.electroteque.org/swf/flowplayer.dailymotion-3.2.8.swf',
			hd: true,
            defaultQuality: "hd720",
            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().getPlugin('content').setHtml("Switched to: " + newItem.streamName);
            }
		}
	},
	clip: {
		provider: 'dailymotion',
		urlResolvers: ['dailymotion','bitrateselect'],
        autoPlay: true,
        url: 'api:x5q9zr_big-buck-bunny_shortfilms'
	},
	log: {
        level: 'debug',
        filter: 'org.flowplayer.controller.*,org.flowplayer.bitrateselect.*,org.electroteque.dailymotion.*'
    }

});

Daily Motion 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 },
		dailymotion: {
			url:'http://static.electroteque.org/swf/flowplayer.dailymotion-3.2.8.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: 'dailymotion',
        autoPlay: true,
        url: 'api:x5q9zr_big-buck-bunny_shortfilms',
		onMetaData: function(clip) {

            var bitrates = [];
            bitrates = $f("quality").getPlugin("Daily Motion").getBitrateItems();
            var index = 0;
            var quality = $f("quality").getPlugin("Daily Motion").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("Daily Motion").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.electroteque.dailymotion.*'
    }

});

Embedded Chrome Player Example

This example demonstrates loading an embedded Daily Motion player and configuring it.

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




$f("embedded", "http://static.electroteque.org/swf/flowplayer.swf", {
	plugins:  {
		controls: null,
		dailymotion: {
			url:'http://static.electroteque.org/swf/flowplayer.dailymotion-3.2.8.swf',
            chromeless: false
		}
	},
	clip: {
		provider: 'dailymotion',
		urlResolvers: 'dailymotion',
        autoPlay: true,
        url: 'api:x5q9zr_big-buck-bunny_shortfilms'
	},
	log: {
        level: 'debug',
        filter: 'org.flowplayer.controller.*,org.electroteque.dailymotion.*'
    }

});

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



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

Daily Motion Video with Poster Image Example

This example demonstrates having the Daily Motion 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", {
        playlist: [
			       {
						url: 'http://i.ytimg.com/vi/XSGBVzeBUbk/hqdefault.jpg'
				   },
			       {
						url: 'api:x5q9zr_big-buck-bunny_shortfilms',
						provider: 'dailymotion',
						autoPlay: false,
						autoBuffering: true
				   }
        ],
        plugins:  {
            dailymotion: {
                url:'http://static.electroteque.org/swf/flowplayer.dailymotion-3.2.8.swf'
            }
        },
        clip: {

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

    });

});

Chrome Player Config

property / datatype default description
related
number
0 Values: 0, 1, and 0 (default). Show related videos at the end of the video.
explicit
number
1 Values: 0 or 1. Default is 1. Determines if the player allows explicit content to be played. This parameter may be added to embed code by platforms which do not want explicit content to be posted by their users.
autoPlay
number
0 Values: 0 or 1. Default is 0. Determines if the video will begin playing automatically when the player loads.
autoMute
string
Values: 0 or 1. Default is 0. Determines if the video will begin muted.
unmuteOnMouseOver
number
0 Values: 0 or 1. Default is 0. Determines if the video will unmuted on mouse over. Of course it works only if the player is on automute=1.
start
number
0 Values: a number of seconds. Default is 0. Determines if the video will begin playing the video at a given time.
expendVideo
number
0 Values: 0 or 1. Default is 0. Determines if the vidoe should be expended to fit the whole player's size.
forceQuality
number
1 Values: sd, hq, hd720 or hd1080. Default is empty. Determines the quality that must be played by default if available.
foreground
string
Color for the background.
background
string
Color for the background.
highlight
string
Color for the highlights.

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 sd, hq, hd720, hd1080.
getPlaybackQuality string Gets the playback video quality for the current video. Levels are sd, hq, hd720, hd1080.

Events

Event When does it fire?
onApiData() Fires when the api data feed information is collected when the enableData config is enabled. The callback is fed with the following arguments:
  • data the data 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 Daily Motion video quality level.
  • videoFormat the video format object for this level which includes the bitrate, dimensions etc.

Data Object

Property Description
url The video url ie api:dailymotionid.
id The Daily Motion video id.
author The author object with the following properties:
  • name the author username.
  • screenname the author screenname.
  • url the author's Daily Motion page.
  • avatar_small_url author's small avatar.
  • avatar_medium_url author's medium avatar.
  • avatar_large_url author's large avatar.
title The video title.
description 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.
  • commentCount the comments 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.
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 Daily Motion 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.dailymotion-3.2.8-demo.swf the Flash file to get you started
flowplayer.dailymotion-3.2.8-demo.zip same as above + 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.