This is the second part of the tutorial on how to work with DASH-Streams. For more information about how to create and encode content for DASH, look at the first part of the tutorial here.

In this part, we will look at different video players that can display DASH content. We will only focus on web-players and not applications like VLC. The video players I will discuss are the following:

dash.js

Shaka-Player

Tutorial overview

dash.js

Introduction to dash.js

This is a very basic video player and doesn’t require a lot of time to set up. With this player, we simply want to test if the stream we created in the first part of the tutorial works. You can find the GitHub repository here: https://github.com/Dash-Industry-Forum/dash.js/

Install and configure dash.js

The best guide to get started with this is to follow the instructions on the repo. I will quote them here for you:

1. Download ‘master’ or latest tagged release.

2. Extract dash.js and move the entire folder to localhost (or run any http server instance such as python’s SimpleHTTPServer at the root of the dash.js folder).

To start the simpleHTTPServer on Mac, I use the following command in the directory that I want to publish on it:

python -m SimpleHTTPServer 8080

You then can navigate to the auto-load-single-video.html sample. Edit it with your editor of preference (Atom in my case) and replace the src of the source tag with the link to your DASH-manifest. In my case, the body of the HTML-File looks like that:

Shaka-Player

Introduction to the Shaka-Player

This web video player is developed by Google to display DASH-Streams. The goal is of course, that the content is changing according to the data connection. So that you have a better video when you have a very strong signal and vice versa. I can again recommend watching the following YouTube video from Google which explains DASH and the SHaka-Player pretty well: Shaka Player: High Performance Video for the Web

Clone & Build

Afterwards, we have to build the code to get a compiled shaka-player.compiled.js. To do this use the command:

./build/all.sh

This will take a while, but then you have your compiled shaka-player.js. Now you can either go and edit one of the tutorial files and publish that on a webserver or create your own example. We will do the latter now. Just to get some exercise with the Shaka-Player.

Example

You best create a new folder and publish it on a SimpleHTTPServer like that:

mkdir example
touch index.html
python -m SimpleHTTPServer 8080

Now you can edit the index.html file and add the following content to it. We start with the header:

These are the standard settings I took from the tutorial pages. Now we have to add some JavaScript to set the DASH-Stream to our video element. We will use polyfill as well. It’s really recommended to use for these kinds of modern stuff if you want to try it on older web browsers too.

There are three exclamation marks in the code. This is the line where it gets really interesting. First we have to define our URL to the DASH-Manifest. The manifest should be on the same webserver for this test. So I recommend copying the resources from the first part of the tutorial to the example folder. Another very interesting part is the EWMABandwidthEstimator, which manages the Shaka-Player and it’s source according to your current bandwidth.

And thats it. Now you should see your DASH-Stream being played in the Shaka-Player. If you open the Developer-Tools in Chrome and switch to the “Network”-Tab and reload the page you can see how the segments get loaded as soon as you start and progress through the video:

You can find a working example of the Shaka-Player in the tutorial overview here: DASH Tutorial Overview – Shaka-Player example. This is it so far for the Shaka-Player and the tutorial. I will look into DASH again to work with audio and subtitle and so on. I think I will document that as well and add some new posts to the tutorial, but I will see :).