Dailymotion Support

demo/index.html

@@ -92,7 +92,7 @@ <h1>Pl<span>a</span>y<span>e</span>r</h1>
               ></path></svg
             >YouTube
           </button>
-          and
+          ,
           <button type="button" class="faux-link" data-source="vimeo">
             <svg class="icon" role="presentation">
               <title>Vimeo</title>
@@ -103,6 +103,10 @@ <h1>Pl<span>a</span>y<span>e</span>r</h1>
               ></path></svg
             >Vimeo
           </button>
+          and
+          <button type="button" class="faux-link" data-source="dailymotion">
+            DailyMotion
+          </button>
         </p>
 
         <p>
@@ -237,6 +241,15 @@ <h1>Pl<span>a</span>y<span>e</span>r</h1>
               </span>
             </small>
           </li>
+          <li class="plyr__cite plyr__cite--dailymotion" hidden>
+            <small>
+              <a href="https://www.dailymotion.com/video/x7tritx" target="_blank">Ariana Grande - Stuck with U</a>
+              on&nbsp;
+              <span class="color--dailymotion">
+                DailyMotion
+              </span>
+            </small>
+          </li>
         </ul>
       </main>
     </div>

demo/src/js/sources.js

@@ -76,6 +76,15 @@ const sources = {
       },
     ],
   },
+  dailymotion: {
+    type: 'video',
+    sources: [
+      {
+        src: 'https://www.dailymotion.com/video/x7tritx',
+        provider: 'dailymotion',
+      },
+    ],
+  },
 };
 
 export default sources;

src/js/captions.js

@@ -31,7 +31,7 @@ const captions = {
     }
 
     // Only Vimeo and HTML5 video supported at this point
-    if (!this.isVideo || this.isYouTube || (this.isHTML5 && !support.textTracks)) {
+    if (!this.isVideo || this.isYouTube || this.isDailyMotion || (this.isHTML5 && !support.textTracks)) {
       // Clear menu and hide
       if (
         is.array(this.config.controls) &&

src/js/config/defaults.js

@@ -206,6 +206,11 @@ const defaults = {
       sdk: 'https://www.youtube.com/iframe_api',
       api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}',
     },
+    dailymotion: {
+      sdk: 'https://api.dmcdn.net/all.js',
+      api:
+        'https://api.dailymotion.com/video/{0}?fields=aspect_ratio,duration,embed_url,height,thumbnail_1080_url,width,title',
+    },
     googleIMA: {
       sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
     },
@@ -440,6 +445,16 @@ const defaults = {
     customControls: true,
     noCookie: false, // Whether to use an alternative version of YouTube without cookies
   },
+
+  // DailyMotion plugin
+  dailymotion: {
+    api: 'postMessage', // Enable the Player API https://developer.dailymotion.com/player/#player-parameters
+    'autoplay-mute': false, // Try to autoplay while muting the video if autoplay didn't work
+    syndication: '', // Syndication key for the player
+    'ui-logo': false, // Hide the dailymotion logo
+    'ui-start-screen-info': false, // Hide video information (title and owner) on the start screen
+    apimode: 'queryString', // How to encode/decode messages sent from the player. https://developer.dailymotion.com/player/#player-parameters
+  },
 };
 
 export default defaults;

src/js/config/types.js

@@ -6,6 +6,7 @@ export const providers = {
   html5: 'html5',
   youtube: 'youtube',
   vimeo: 'vimeo',
+  dailymotion: 'dailymotion',
 };
 
 export const types = {
@@ -28,6 +29,11 @@ export function getProviderByUrl(url) {
     return providers.vimeo;
   }
 
+  // DailyMotion
+  if (/^(https?:\/\/)?(www\.)?(dailymotion\.com|dai\.ly)\/.+$/.test(url)) {
+    return providers.dailymotion;
+  }
+
   return null;
 }
 

src/js/media.js

@@ -3,6 +3,7 @@
 // ==========================================================================
 
 import html5 from './html5';
+import dailymotion from './plugins/dailymotion';
 import vimeo from './plugins/vimeo';
 import youtube from './plugins/youtube';
 import { createElement, toggleClass, wrap } from './utils/elements';
@@ -53,6 +54,8 @@ const media = {
       youtube.setup.call(this);
     } else if (this.isVimeo) {
       vimeo.setup.call(this);
+    } else if (this.isDailyMotion) {
+      dailymotion.setup.call(this);
     }
   },
 };