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.
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>
<source
src="https://example.com/dash.mpd"
type="application/dash+xml">
</video>
<script src="video.js"></script>
<script src="dash.all.min.js"></script>
<link rel="stylesheet" href="videojs-dash.css"></link>
<script src="videojs-dash.min.js"></script>
<script>
var player = videojs('example-video');
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: {
licenseUrl: 'http://m.widevine.com/proxy'
}
}
]
});