MPEG-DASH Support

demo/index.html

@@ -48,6 +48,9 @@
       href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2"
     />
 
+    <!-- MPEG-DASH -->
+    <script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
+
     <!-- Google Analytics-->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-132699580-1"></script>
     <script>
@@ -92,7 +95,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 +106,21 @@ <h1>Pl<span>a</span>y<span>e</span>r</h1>
               ></path></svg
             >Vimeo
           </button>
+          and
+          <button type="button" class="faux-link" data-source="mpd">
+            <svg class="icon" role="presentation"><title>MPEG-DASH</title>
+              <path d="M0,2.16h4.85v5.21h-4.85Z" />
+              <path d="M11.15,2.16h4.85v5.21h-4.85Z" />
+              <path d="M5.57,2.16h4.85v5.21h-4.85Z" />
+              <path d="M0,8.09h4.85v3.06h-4.85Z" />
+              <path d="M11.15,8.09h4.85v3.06h-4.85Z" />
+              <path d="M5.57,8.09h4.85v3.06h-4.85Z" />
+              <path d="M0,11.87h4.85v1.98h-4.85Z" />
+              <path d="M11.15,11.87h4.85v1.98h-4.85Z" />
+              <path d="M5.57,11.87h4.85v1.98h-4.85Z" />
+            </svg>
+            MPEG-DASH
+          </button>
         </p>
 
         <div class="call-to-action">
@@ -229,6 +247,23 @@ <h1>Pl<span>a</span>y<span>e</span>r</h1>
               </span>
             </small>
           </li>
+          <li class="plyr__cite plyr__cite--mpd" hidden>
+            <small>
+              <svg class="icon" role="presentation"><title>MPEG-DASH</title>
+                <path d="M0,2.16h4.85v5.21h-4.85Z" />
+                <path d="M11.15,2.16h4.85v5.21h-4.85Z" />
+                <path d="M5.57,2.16h4.85v5.21h-4.85Z" />
+                <path d="M0,8.09h4.85v3.06h-4.85Z" />
+                <path d="M11.15,8.09h4.85v3.06h-4.85Z" />
+                <path d="M5.57,8.09h4.85v3.06h-4.85Z" />
+                <path d="M0,11.87h4.85v1.98h-4.85Z" />
+                <path d="M11.15,11.87h4.85v1.98h-4.85Z" />
+                <path d="M5.57,11.87h4.85v1.98h-4.85Z" />
+              </svg>
+              <a href="https://mango.blender.org/" target="_blank">Tears of Steel</a>
+              &copy; Blender
+            </small>
+          </li>
         </ul>
       </main>
     </div>

demo/src/js/sources.js

@@ -76,6 +76,15 @@ const sources = {
       },
     ],
   },
+  mpd: {
+    type: 'video',
+    sources: [
+      {
+        src: 'https://media.axprod.net/TestVectors/Cmaf/clear_1080p_h264/manifest.mpd',
+        provider: 'mpd',
+      },
+    ],
+  },
 };
 
 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.isHTML5 || this.isMPD) && !support.textTracks)) {
       // Clear menu and hide
       if (
         is.array(this.config.controls) &&
@@ -109,6 +109,9 @@ const captions = {
       const trackEvents = this.config.captions.update ? 'addtrack removetrack' : 'removetrack';
       on.call(this, this.media.textTracks, trackEvents, captions.update.bind(this));
     }
+    if (this.isMPD) {
+      on.call(this, this.media.textTracks, 'addtrack removetrack', captions.update.bind(this));
+    }
 
     // Update available languages in list next tick (the event must not be triggered before the listeners)
     setTimeout(captions.update.bind(this), 0);
@@ -122,7 +125,7 @@ const captions = {
     const languageExists = Boolean(tracks.find((track) => track.language === language));
 
     // Handle tracks (add event listener and "pseudo"-default)
-    if (this.isHTML5 && this.isVideo) {
+    if ((this.isHTML5 || this.isMPD) && this.isVideo) {
       tracks
         .filter((track) => !meta.get(track))
         .forEach((track) => {
@@ -276,10 +279,15 @@ const captions = {
       triggerEvent.call(this, this.media, 'languagechange');
     }
 
+    // Load captions for MPEG-DASH
+    if (this.isMPD) {
+      this.dash.setTextTrack(index);
+    }
+
     // Show captions
     captions.toggle.call(this, true, passive);
 
-    if (this.isHTML5 && this.isVideo) {
+    if ((this.isHTML5 || this.isMPD) && this.isVideo) {
       // If we change the active track while a cue is already displayed we need to update it
       captions.updateCues.call(this);
     }
@@ -311,7 +319,7 @@ const captions = {
     // For HTML5, use cache instead of current tracks when it exists (if captions.update is false)
     // Filter out removed tracks and tracks that aren't captions/subtitles (for example metadata)
     return tracks
-      .filter((track) => !this.isHTML5 || update || this.captions.meta.has(track))
+      .filter((track) => !this.isHTML5 || !this.isMPD || update || this.captions.meta.has(track))
       .filter((track) => ['captions', 'subtitles'].includes(track.kind));
   },
 

src/js/config/defaults.js

@@ -89,6 +89,18 @@ const defaults = {
     options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 4],
   },
 
+  // Audio Tracks (MPEG-DASH)
+  audioTrack: {
+    options: [],
+    onChange: null,
+  },
+
+  // Video Tracks (MPEG-DASH)
+  videoTrack: {
+    options: [],
+    onChange: null,
+  },
+
   // Keyboard shortcut settings
   keyboard: {
     focused: true,
@@ -145,7 +157,7 @@ const defaults = {
     // 'download',
     'fullscreen',
   ],
-  settings: ['captions', 'quality', 'speed'],
+  settings: ['captions', 'quality', 'speed', 'audioTrack', 'videoTrack'],
 
   // Localisation
   i18n: {
@@ -174,6 +186,8 @@ const defaults = {
     pip: 'PIP',
     menuBack: 'Go back to previous menu',
     speed: 'Speed',
+    audioTrack: 'Audio Track',
+    videoTrack: 'Video Track',
     normal: 'Normal',
     quality: 'Quality',
     loop: 'Loop',
@@ -184,6 +198,7 @@ const defaults = {
     disabled: 'Disabled',
     enabled: 'Enabled',
     advertisement: 'Ad',
+    qualityAuto: 'Auto',
     qualityBadge: {
       2160: '4K',
       1440: 'HD',
@@ -274,6 +289,15 @@ const defaults = {
     // Quality
     'qualitychange',
 
+    // MPEG-DASH
+    'audiotrackchange',
+    'videotrackchange',
+    'qualitylistupdate',
+    'audiotracklistupdate',
+    'videotracklistupdate',
+    'audiotracklabelsupdate',
+    'videotracklabelsupdate',
+
     // Ads
     'adsloaded',
     'adscontentpause',
@@ -317,6 +341,8 @@ const defaults = {
       speed: '[data-plyr="speed"]',
       language: '[data-plyr="language"]',
       quality: '[data-plyr="quality"]',
+      audioTrack: '[data-plyr="audioTrack"]',
+      videoTrack: '[data-plyr="videoTrack"]',
     },
     display: {
       currentTime: '.plyr__time--current',

src/js/config/types.js

@@ -6,6 +6,7 @@ export const providers = {
   html5: 'html5',
   youtube: 'youtube',
   vimeo: 'vimeo',
+  mpd: 'mpd',
 };
 
 export const types = {