Dailymotion Play Dailymotion videos directly within JW Player 7
The Dailymotion JW Player plugin uses the Data API to show the Dailymotion videos using JW Player 7. Bitrate selection is provided by the default controlbar bitrates menu.
This demonstrates a setup to play a video from Dailymotion with a manually configured playlist of Dailymotion videos. The filetype due to a limitation with the Jw Player 7 API is required to be set with an `mp4` extension.
The plugin works with manual playlists aswell in combination with the jwplayer playlist javascript api.
Starting from JWPlayer 7 the Dailymotion feature is a javascript provider only using the Html5 api for both desktop and mobile.
Features
- Chromeless player support with full functionality and integration with other JwPlayer plugins.
- Provides an event for obtaining detailed data for the video to be used for customised features via the javascript API and Dailymotion data API.
- Full control of the player controls including fullscreen.
- Chrome embedded player support with full chrome configuration support.
- Full playlist support provided by JW Player to play with other video formats.
- Html5 API player for both desktop and mobile.
Known Issues
- The DailyMotion html5 api is severely limited compared to the Flash api and there is no indication of improvement. Some features like bitrate quality selection are not enabled and have not been enabled for a while. Added features will be made when the api changes become available.
NOTE:
(Current Version 4.0.0)
Compatibility
- JW Player 7 and above
(Version 4.0.0)
License Information
The Dailymotion Plugin is a once off commercial license with updates and support to the Dailymotion plugin only. JW Player related questions and support may be provided on their forums at http://www.longtailvideo.com/support/forums/jw-player/
- 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.
- Single Domain Not For Profit License - Suitable for not for profit organisations.
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.
Demo
Contact for a site or local demo download.
List Of Examples
- Dailymotion Video Playlist Example.
- Dailymotion with Video Quality Selection Example.
- Embedded Chrome Player Example.
Examples
Example of Dailymotion videos in a playlist
Configuration
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(data, container) {
$('#category-content').html(data.category);
$('#tags-content').html(data.tags.join(","));
$('#description').html(data.description);
$('#content-container').show();
}
(function(jwplayer) {
var player = jwplayer("related").setup({
width: 760,
height: 350,
playlist: [
{ file: "http://www.dailymotion.com/video/x5q9zr", type: "mp4" , title: "Big Buck Bunny", duration: "10:05", thumbnail: "//static2.dmcdn.net/static/video/780/426/9624087:jpeg_preview_small.jpg?20110909144910", image: "//static2.dmcdn.net/static/video/780/426/9624087:jpeg_preview_large.jpg?20110909144910" },
{ file: "http://www.dailymotion.com/video/x76smm", type: "mp4", title: "Killcow", duration: "6:24", thumbnail: "//static2.dmcdn.net/static/video/053/470/12074350:jpeg_preview_small.jpg?20110903151936", image: "//static2.dmcdn.net/static/video/053/470/12074350:jpeg_preview_large.jpg?20110903151936" },
{ file: "http://www.dailymotion.com/video/xh71yi", type: "mp4", title: "Lutins", duration: "5:51", thumbnail: "//static2.dmcdn.net/static/video/206/288/28882602:jpeg_preview_small.jpg?20110723222720", image: "//static2.dmcdn.net/static/video/206/288/28882602:jpeg_preview_large.jpg?20110723222720" },
{ file: "http://www.dailymotion.com/video/xcvm0v", type: "mp4", title: "Timber", duration: "2:48", thumbnail: "//static2.dmcdn.net/static/video/172/036/21630271:jpeg_preview_small.jpg?20110813084528", image: "//static2.dmcdn.net/static/video/172/036/21630271:jpeg_preview_large.jpg?20110813084528" },
{ file: "http://www.dailymotion.com/video/x5wnjc", type: "mp4", title: "Valse avec Bachir Le film de la semaine", duration: "2.00", thumbnail: "//static2.dmcdn.net/static/video/675/129/9921576:jpeg_preview_small.jpg?20110908205236", image: "//static2.dmcdn.net/static/video/675/129/9921576:jpeg_preview_large.jpg?20110908205236" },
{ file: "http://www.dailymotion.com/video/x5gc77", type: "mp4", title: "Red River Bay", duration: "1:29", thumbnail: "//static2.dmcdn.net/static/video/783/061/9160387:jpeg_preview_small.jpg?20110910192718", image: "//static2.dmcdn.net/static/video/783/061/9160387:jpeg_preview_large.jpg?20110910192718" },
],
dailymotion: {
//this is not required
enableApiData: true
}
});
player.on("ready",function() {
player.on("dailymotiondata",function(data) {
showInfo(data);
});
});
})(window.jwplayer);
Configuration
The configuration of the Dailymotion provider plugin needs to be in a config object property `dailymotion` like so:
dailymotion: {
....
}
Here is a list of the configuration options:
| property / datatype | default | description |
|---|---|---|
|
enableApiData
boolean
|
enable and load the dailymotion data for the current video. | |
|
defaultQuality
string
|
hq | The default quality level (240, 380, 480, 720, 1080, 1440, 2160). If used in conjunction with the hd toggle feature, setting a default quality here will start playback with the desired default bitrate. If none is set, a bitrate level will be auto detected by the Dailymotion player. |
Dailymotion Video Playlist Example
This example demonstrates using a playlist combination of Dailymotion and Youtube videos.
(function(jwplayer) {
jwplayer("manualVideoPlaylist").setup({
width: 760,
height: 350,
playlist: [
{ file: "http://www.dailymotion.com/video/x5q9zr", type: "mp4", title: "Big Buck Bunny Dailymotion", duration: "10:05", thumbnail: "//static2.dmcdn.net/static/video/780/426/9624087:jpeg_preview_small.jpg?20110909144910", image: "//static2.dmcdn.net/static/video/780/426/9624087:jpeg_preview_large.jpg?20110909144910" },
{ file: "http://www.youtube.com/watch?v=YE7VzlLtp-4", title: "Big Buck Bunny Youtube"},
{
sources: [
{ type: "webm", file: "//videos.electroteque.org/bitrate/elephants_dream_600k.webm"},
{ type: "mp4", file: "//videos.electroteque.org/bitrate/elephants_dream_600k.mp4"},
{ type: "ogg", file: "//videos.electroteque.org/bitrate/elephants_dream_600k.ogv"}
],
title: "Elephants Dream - Mp4", author: "Blender Foundation", videoDuration: "10.54", image: "http://i.ytimg.com/vi/XSGBVzeBUbk/default.jpg"
},
{ file: "http://www.dailymotion.com/video/x76smm", type: "mp4", title: "Killcow Dailymotion", duration: "6:24", thumbnail: "//static2.dmcdn.net/static/video/053/470/12074350:jpeg_preview_small.jpg?20110903151936", image: "//static2.dmcdn.net/static/video/053/470/12074350:jpeg_preview_large.jpg?20110903151936" },
{
sources: [
{ type: "webm", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.webm"},
{ type: "mp4", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.mp4"},
{ type: "ogg", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.ogv"}
],
title: "Big Buck Bunny - Mp4", author: "Blender Foundation", videoDuration: "9.56", image: "http://i.ytimg.com/vi/XSGBVzeBUbk/default.jpg"
},
{ file: "http://www.dailymotion.com/video/xh71yi", type: "mp4", title: "Lutins", duration: "5:51", thumbnail: "//static2.dmcdn.net/static/video/206/288/28882602:jpeg_preview_small.jpg?20110723222720", image: "//static2.dmcdn.net/static/video/206/288/28882602:jpeg_preview_large.jpg?20110723222720" }
],
dailymotion: {
}
});
})(window.jwplayer);
360 Video Example
This example demonstrates configuring the player for Dailymotion 360 videos and control. Enabling the `vr` config will allow mouse and touch controls to the Youtube player through Flowplayer. This is needed for VR 360 controls.
Subtitles Example
This example demonstrates configuring the player for Dailymotion 360 videos and control. Enabling the `vr` config will allow mouse and touch controls to the Youtube player through Flowplayer. This is needed for VR 360 controls.