Initial DASH Support

README.md

@@ -1,12 +1,18 @@
-# video.js HLS Source Handler
+# videojs-http-streaming (VHS)
 
 [![Build Status][travis-icon]][travis-link]
 [![Slack Status][slack-icon]][slack-link]
 
+Play HLS, DASH, and future HTTP streaming protocols with video.js, even where they're not
+natively supported.
 
-Play back HLS with video.js, even where it's not natively supported.
-
-Lead Maintainer: Jon-Carlos Rivera [@imbcmdth](https://github.com/imbcmdth)
+Lead Maintainers:
+- Jon-Carlos Rivera [@imbcmdth](https://github.com/imbcmdth)
+- Joe Forbes [@forbesjo](https://github.com/forbesjo)
+- Matthew Neil [@mjneil](https://github.com/mjneil)
+- Oshin Karamian [@OshinKaramian](https://github.com/OshinKaramian)
+- Garrett Singer [@gesinger](https://github.com/gesinger)
+- Chuck Wilson [@squarebracket](https://github.com/squarebracket)
 
 Maintenance Status: Stable
 

index.html

@@ -37,6 +37,13 @@
     <label>
       Video URL:
       <input id=url type=url value="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8">
+    </label><br/>
+    <label>
+      MimeType:
+      <select id=mimetype>
+        <option>application/x-mpegURL</option>
+        <option>application/dash+xml</option>
+      </select>
     </label>
     <button type=submit>Load</button>
   </form>
@@ -47,19 +54,24 @@
   </ul>
 
   <script src="/node_modules/video.js/dist/video.js"></script>
+  <script src="/node_modules/videojs-contrib-eme/dist/videojs-contrib-eme.js"></script>
   <script src="/dist/videojs-http-streaming.js"></script>
   <script>
     (function(window, videojs) {
       var player = window.player = videojs('videojs-http-streaming-player');
 
+      // configure videojs-contrib-eme
+      player.eme();
+
       // hook up the video switcher
       var loadUrl = document.getElementById('load-url');
       var url = document.getElementById('url');
+      var mimeType = document.getElementById('mimetype');
       loadUrl.addEventListener('submit', function(event) {
         event.preventDefault();
         player.src({
           src: url.value,
-          type: 'application/x-mpegURL'
+          type: mimeType.options[mimeType.selectedIndex].innerText
         });
         return false;
       });

package.json

@@ -92,6 +92,7 @@
     "global": "^4.3.0",
     "m3u8-parser": "2.1.0",
     "mux.js": "4.3.2",
+    "mpd-parser": "0.2.0",
     "url-toolkit": "1.0.9",
     "video.js": "^5.19.1 || ^6.2.0",
     "videojs-contrib-media-sources": "4.6.2",
@@ -134,6 +135,7 @@
     "shelljs": "^0.5.3",
     "sinon": "1.10.2",
     "uglify-js": "^2.5.0",
+    "videojs-contrib-eme": "^3.0.0",
     "videojs-contrib-quality-levels": "^2.0.2",
     "videojs-flash": "^2.0.0",
     "videojs-standard": "^4.0.3",

scripts/manifest-data.js

@@ -14,9 +14,9 @@ var build = function() {
     var file = path.resolve(manifestDir, files.shift());
     var extname = path.extname(file);
 
-    if (extname === '.m3u8') {
+    if (extname === '.m3u8' || extname === '.mpd') {
       // translate this manifest
-      manifests += '  \'' + path.basename(file, '.m3u8') + '\': ';
+      manifests += '  \'' + path.basename(file, extname) + '\': ';
       manifests += fs.readFileSync(file, 'utf8')
         .split(/\r\n|\n/)
         // quote and concatenate

src/dash-playlist-loader.js

@@ -0,0 +1,181 @@
+import { EventTarget } from 'video.js';
+import mpdParser from 'mpd-parser';
+import {
+  setupMediaPlaylists,
+  resolveMediaGroupUris
+} from './playlist-loader';
+
+export default class DashPlaylistLoader extends EventTarget {
+  // DashPlaylistLoader must accept either a src url or a playlist because subsequent
+  // playlist loader setups from media groups will expect to be able to pass a playlist
+  // (since there aren't external URLs to media playlists with DASH)
+  constructor(srcUrlOrPlaylist, hls, withCredentials) {
+    super();
+
+    this.hls_ = hls;
+    this.withCredentials = withCredentials;
+
+    if (!srcUrlOrPlaylist) {
+      throw new Error('A non-empty playlist URL or playlist is required');
+    }
+
+    // initialize the loader state
+    if (typeof srcUrlOrPlaylist === 'string') {
+      this.srcUrl = srcUrlOrPlaylist;
+      this.state = 'HAVE_NOTHING';
+      return;
+    }
+
+    this.state = 'HAVE_METADATA';
+    this.started = true;
+    // we only should have one, so select it
+    this.media(srcUrlOrPlaylist);
+    // trigger async to mimic behavior of HLS, where it must request a playlist
+    setTimeout(() => {
+      this.trigger('loadedmetadata');
+    }, 0);
+  }
+
+  dispose() {
+    this.stopRequest();
+  }
+
+  stopRequest() {
+    if (this.request) {
+      const oldRequest = this.request;
+
+      this.request = null;
+      oldRequest.onreadystatechange = null;
+      oldRequest.abort();
+    }
+  }
+
+  media(playlist) {
+    // getter
+    if (!playlist) {
+      return this.media_;
+    }
+
+    // setter
+    if (this.state === 'HAVE_NOTHING') {
+      throw new Error('Cannot switch media playlist from ' + this.state);
+    }
+
+    // find the playlist object if the target playlist has been specified by URI
+    if (typeof playlist === 'string') {
+      if (!this.master.playlists[playlist]) {
+        throw new Error('Unknown playlist URI: ' + playlist);
+      }
+      playlist = this.master.playlists[playlist];
+    }
+
+    const mediaChange = !this.media_ || playlist.uri !== this.media_.uri;
+
+    this.state = 'HAVE_METADATA';
+    this.media_ = playlist;
+
+    // trigger media change if the active media has been updated
+    if (mediaChange) {
+      this.trigger('mediachanging');
+      // since every playlist is technically loaded, trigger that we loaded it
+      this.trigger('loadedplaylist');
+      this.trigger('mediachange');
+    }
+    return;
+  }
+
+  pause() {
+    this.stopRequest();
+    if (this.state === 'HAVE_NOTHING') {
+      // If we pause the loader before any data has been retrieved, its as if we never
+      // started, so reset to an unstarted state.
+      this.started = false;
+    }
+  }
+
+  load() {
+    // because the playlists are internal to the manifest, load should either load the
+    // main manifest, or do nothing but trigger an event
+    if (!this.started) {
+      this.start();
+      return;
+    }
+
+    this.trigger('loadedplaylist');
+  }
+
+  start() {
+    this.started = true;
+
+    // request the specified URL
+    this.request = this.hls_.xhr({
+      uri: this.srcUrl,
+      withCredentials: this.withCredentials
+    }, (error, req) => {
+      // disposed
+      if (!this.request) {
+        return;
+      }
+
+      // clear the loader's request reference
+      this.request = null;
+
+      if (error) {
+        this.error = {
+          status: req.status,
+          message: 'DASH playlist request error at URL: ' + this.srcUrl,
+          responseText: req.responseText,
+          // MEDIA_ERR_NETWORK
+          code: 2
+        };
+        if (this.state === 'HAVE_NOTHING') {
+          this.started = false;
+        }
+        return this.trigger('error');
+      }
+
+      this.master = mpdParser.parse(req.responseText, this.srcUrl);
+      this.master.uri = this.srcUrl;
+
+      this.state = 'HAVE_MASTER';
+
+      // TODO mediaSequence will be added in mpd-parser
+      this.master.playlists.forEach((playlist) => {
+        playlist.mediaSequence = 0;
+      });
+      for (let groupKey in this.master.mediaGroups.AUDIO) {
+        for (let labelKey in this.master.mediaGroups.AUDIO[groupKey]) {
+          this.master.mediaGroups.AUDIO[groupKey][labelKey].playlists.forEach(
+            (playlist) => {
+              playlist.mediaSequence = 0;
+            });
+        }
+      }
+
+      // set up phony URIs for the playlists since we won't have external URIs for DASH
+      // but reference playlists by their URI throughout the project
+      for (let i = 0; i < this.master.playlists.length; i++) {
+        const phonyUri = `placeholder-uri-${i}`;
+
+        this.master.playlists[i].uri = phonyUri;
+        // set up by URI references
+        this.master.playlists[phonyUri] = this.master.playlists[i];
+      }
+
+      setupMediaPlaylists(this.master);
+      resolveMediaGroupUris(this.master);
+
+      this.trigger('loadedplaylist');
+      if (!this.request) {
+        // no media playlist was specifically selected so start
+        // from the first listed one
+        this.media(this.master.playlists[0]);
+      }
+      // trigger loadedmetadata to resolve setup of media groups
+      // trigger async to mimic behavior of HLS, where it must request a playlist
+      setTimeout(() => {
+        this.trigger('loadedmetadata');
+      }, 0);
+    });
+  }
+}