videojs-contrib-dash

video.js MPEG-DASH Source Handler

A video.js source handler for supporting MPEG-DASH playback through a video.js player on browsers with support for Media Source Extensions.

Lead Maintainer: Joe Forbes forbesjo

Maintenance Status: Stable

Getting Started

Download Dash.js and videojs-contrib-dash. Include them both in your web page along with video.js:

<video id=example-video width=600 height=300 class="video-js vjs-default-skin" controls></video>
<script src="video.js"></script>

<!-- Dash.js -->
<script src="dash.all.min.js"></script>

<!-- videojs-contrib-dash script -->
<script src="videojs-dash.min.js"></script>

<script>
var player = videojs('example-video');

player.ready(function() {
  player.src({
    src: 'https://example.com/dash.mpd',
    type: 'application/dash+xml'
  });

  player.play();
});
</script>

Checkout our live example if you're having trouble.

Protected Content

If the browser supports Encrypted Media Extensions and includes a Content Decryption Module for one of the protection schemes in the dash manifest, video.js will be able to playback protected content.

For most protection schemes, the license server information (URL & init data) is included inside the manifest. The notable exception to this is Widevine-Modular (WV). To playback WV content, you must provide the URL to a Widevine license server proxy.

For this purpose, videojs-contrib-dash adds support for a "keySystemOptions" array to the object when using the player.src() function:

player.src({
  src: 'http://example.com/my/manifest.mpd',
  type: 'application/dash+xml',
  keySystemOptions: [
    {
      name: 'com.widevine.alpha',
      options: {
        serverURL: 'http://m.widevine.com/proxy'
      }
    }
  ]
});

You may also manipulate the source object by registering a function to the updatesource hook. Your function should take a source object as an argument and should return a source object.

var updateSourceData = function(source) {
  source.keySystemOptions = [{
    name: 'com.widevine.alpha',
    options: {
      serverURL:'https://example.com/anotherlicense'
    }
  }];
  return source;
};

videojs.Html5DashJS.hook('updatesource', updateSourceData);

Passing options to Dash.js

It is possible to pass options to Dash.js during initialiation of video.js. The following options are currently supported:

• limitBitrateByPortal (defaults to false): if set to true, Dash.js will not request video tracks which are bigger than the video element.

To set these options, pass them in the html5.dash object of video.js during initialization.

For example:

var player = videojs('example-video', {
  html5: {
    dash: {
      limitBitrateByPortal: true
    }
  }
});

Initialization Hook

Sometimes you may need to extend Dash.js, or have access to the Dash.js MediaPlayer before it is initialized. For these cases, you can register a function to the beforeinitialize hook, which will be called just before the Dash.js MediaPlayer is initialized.

Your function should have two parameters:

1. The video.js Player instance
2. The Dash.js MediaPlayer instance

var myCustomCallback = function(player, mediaPlayer) {
  // Log MediaPlayer messages through video.js
  if (videojs && videojs.log) {
    mediaPlayer.getDebug().setLogToBrowserConsole(false);
    mediaPlayer.on('log', function(event) {
      videojs.log(event.message);
    });
  }
};

videojs.Html5DashJS.hook('beforeinitialize', myCustomCallback);

Changelog

2.6.1 (2017-01-05)

• Fixed Live display for live streams