Dailymotion Play Dailymotion videos directly within Flowplayer



The Dailymotion Flowplayer plugin uses the data API to show the Dailymotion videos using Flowplayer.


Tags:

This demonstrates a setup to play a video from Dailymotion with a dynamically configured playlist of Dailymotion videos via the requested related videos. Additionally fetches info about each video from the Dailymotion Data 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 Dailymotion video quality levels to select manually.

The plugin also obtains a list of related videos from the Dailymotion 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

Known Issues

NOTE:

Dailymotion have randomly without warning deprecated their Flash api expecting Javascript embedding playback which is used in the mobile fallback. This is not affected yet but there is no notification or plan when it may stop working. If only html5 is needed in playlists assuming multiple formats for Html5 is supplied, use the Flowplayer 5 version instead.

(Current Version 3.2.18)

Compatibility

Changes since 3.2.11

Changes since 3.2.10

Changes since 3.2.9

Changes since 3.2.8

Plugin Available For Purchase via Paypal


License Options
Domain(s)

(Version 3.2.18)

License Information

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

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 Dailymotion videos in a playlist

Flowplayer configuration

The clip object sets the Dailymotion 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(data, container) {
    var relatedVideos = data.relatedVideos;
    var content = '';

  content += "\t" + '<a href="'+ data.url +'" class="first active">' + "\n";
    content += "\t\t" + '<img style="background:url(\''+ data.thumbnail_medium_url +'\'); background-size: 108px 90px; background-repeat: no-repeat;"/>' + "\n"
    content += "\t" + '<span dir="ltr" class="title" title="'+ data.title +'">'+ data.title +'</span>' + "\n";
    content += "\t" + '<span class="stat">by ' + data.owner + '</span><span class="stat view-count">'+ data.views_total +' views</span>' + "\n";
    content += "\t\t" + '<span class="video-time">' + data.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({
                    provider: "dailymotion",
                    url: "api:" + item.id,
                    thumbnail: item.thumbnail_medium_url,
                    dmtitle: item.title,
                    author: item.owner,
                    views: item.views_total,
                    dmduration: 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 style="background:url(\'${thumbnail}\'); background-size: 108px 90px; background-repeat: no-repeat;"/>' + "\n"
playlistTemplate += "\t" + '<span dir="ltr" class="title">${dmtitle}</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">${dmduration}</span></a>' + "\n";

$f("related", "../flowplayer.swf", {
	plugins:  {

		dailymotion: {
			url:'../flowplayer.dailymotion-3.2.18.swf',
            loadOnStart: false
		}
	},
	clip: {
		provider: 'dailymotion',
        autoPlay: false,
        url: "api:x5q9zr",
        onBeforeBegin: function() {


            var id = this.getClip().url.replace("api:","");

            var fields = "id,title,tags,channel,description,language,country,url,tiny_url,created_time," +
                                        "modified_time,taken_time,type,mode,onair,live_publish_url,private,explicit,published,duration,owner," +
                                        "owner_screenname,owner_url,owner_avatar_small_url,owner_avatar_medium_url,owner_avatar_large_url," +
                                        "thumbnail_url,thumbnail_small_url,thumbnail_medium_url,thumbnail_large_url,rating,ratings_total," +
                                        "views_total,views_last_hour,views_last_day,views_last_week,views_last_month,comments_total," +
                                        "bookmarks_total,embed_html,embed_url,aspect_ratio,available_formats";


			//get the video data
            $.get("https://api.dailymotion.com/video/" + id + "?fields=" + fields)
                .done(function( data ) {
                       //get the related video data
                      $.get("https://api.dailymotion.com/video/" + id + "/related/?limit=10&fields=" + fields)
                                      .done(function( relatedVideos ) {
                                          data.relatedVideos = relatedVideos.list;
										  showInfo(data, "#playlist1");
                                          //load the related list for the first clip only
                                          if (shownRelatedList) return;
                                          showRelatedList(data, "#playlist1");
                                          shownRelatedList = true;
                                      });

            });

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

}).mobile().playlist("#playlist1", { continuousPlay: true, template: playlistTemplate});

Configuration

Here is a list of the configuration options:

property / datatype default description
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 Dailymotion 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 Dailymotion 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 Dailymotion 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
hq 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 Dailymotion video format information.
displayErrors
boolean
false Setting to enable Dailymotion 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 Dailymotion api via secure server also.

Dailymotion Video Playlist Example

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

Dailymotion Videos Playlist:


$(function() {

$f("manualVideoPlaylist", "../flowplayer.swf", {
	// configure the required plugin
	onLoad: function() {
        $("#playlist2").show();
    },
	playlist: [
			       {
						url: 'api:x5q9zr',
						provider: 'dailymotion',
						title: 'Big Buck Bunny - Dailymotion'
				   },
				   {
                        url: "http://videos.electroteque.org/big_buck_bunny_400k.mp4",
                        provider: 'http',
                   		urlResolvers: null,
                   		title: 'Big Buck Bunny - Mp4'
                   },
				   {
				   		url: 'api:x6xr0',
				   		provider: 'dailymotion',
						title: 'Elephants Dream - Dailymotion'
				   }
    ],
	plugins:  {

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

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

});

Dailymotion with HD selection Example

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



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

		controls: { autoHide: true },
		dailymotion: {
			url:'../flowplayer.dailymotion-3.2.18.swf',
			hd: true,
            defaultQuality: "hd720",
            hdLevel: "hd720"
		},
		content: {
			url: '../flowplayer.content.swf',
			top: 0,
			left: 0,
			width: 250
		},
		bitrateselect: {
			url: '../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: 'dailymotion',
		urlResolvers: ['dailymotion','bitrateselect'],
        autoPlay: true,
        url: 'api:x5q9zr'
	},
	log: {
        level: 'debug',
        filter: 'org.flowplayer.controller.*,org.flowplayer.bitrateselect.*,org.electroteque.dailymotion.*'
    }

});

Dailymotion 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", "../flowplayer.swf", {
	// configure the required plugin
	plugins:  {

		controls: { autoHide: true },
		dailymotion: {
			url:'../flowplayer.dailymotion-3.2.18.swf',
			bitratesOnStart: true,
            qualityLabels: {
                "hd720": "HD 720p",
                "hq": "Large 480p",
                "sd": "Medium 320p",
                "ld" : "Small"
            }

		},
		content: {
			url: '../flowplayer.content.swf',
			top: 0,
			left: 0,
			width: 250
		},
        bitrateselect: {
            url: '../flowplayer.bitrateselect.swf',
            hdButton: {
                place: false
            },
            onStreamSwitchBegin: function(newItem, currentItem) {
                $f("bwcheck").getPlugin('content').setHtml("Will switch to quality : " + newItem.format + " from " + currentItem.format);
            },
            onStreamSwitch: function (newItem) {
                $f("bwcheck").getPlugin('content').setHtml("Switched to: " + newItem.format);
            }
        },
		bwcheck: {
			url: '../flowplayer.bwcheck.swf',
			netConnectionUrl: 'http://releases.flowplayer.org/swf/flowplayer-3.1.5.swf',
			maxWidth: 1920,
			qos: { screen: false },
            checkOnStart: true,
            // 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: 'dailymotion', urlResolvers: ['dailymotion','bwcheck','bitrateselect'], autoPlay: true, url: 'api:x5q9zr' }, log: { level: 'debug', filter: 'org.flowplayer.controller.*,org.flowplayer.bwcheck.*,org.flowplayer.bitrateselect.*,org.flowplayer.dailymotion.*' } }).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",
                    "hq": "Large 480p",
                    "sd": "Medium 320p",
                    "ld" : "Small"
                }
 

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


    hdButton: {
        place: false
    }
 

Dailymotion 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", "../flowplayer.swf", {
	// configure the required plugin
	plugins:  {

		controls: { autoHide: true },
		dailymotion: {
			url:'../flowplayer.dailymotion-3.2.18.swf',
			qualityLabels: {
                            "hd720": "HD 720p",
                            "hq": "Large 480p",
                            "sd": "Medium 320p",
                            "ld" : "Small"
            },
			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: '../flowplayer.content.swf', top: 0, left: 0, width: 250 } }, clip: { provider: 'dailymotion', autoPlay: true, url: 'api:x5q9zr_big-buck-bunny_shortfilms', onStart: function(clip) { var bitrates = []; bitrates = $f("quality").getPlugin("dailymotion").getBitrateItems(); var index = 0; var quality = $f("quality").getPlugin("dailymotion").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("dailymotion").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 Dailymotion player and configuring it.

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




$f("embedded", "../flowplayer.swf", {
	plugins:  {
		controls: null,
		dailymotion: {
			url:'../flowplayer.dailymotion-3.2.18.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 Dailymotion chrome player correctly like so



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

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?
onVideoQualityChange() Fires when the video playback quality has changed. The callback is fed with the following arguments:
  • level the Dailymotion video quality level.
  • videoFormat the video format object for this level which includes the bitrate, dimensions etc.

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 Dailymotion 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.18-demo.zip includes plugin demo + 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.