Why Do I need Dash.js for streaming MPEG DASH videos?

Question

I'm new with html 5 adaptive streaming and information out there is quite conflicting. I want to create an test environment on my windows server cloud streaming a 2hours h264 file and play on my local computer with an html5 player.

Question: Why Do I need Dash.js to play the Mpeg dash video? Is Dash.js something I have to install in the server(sounds obvious) or client(sounds weird)?

Answer 1

DASH videos, like any other videos, involve two parts: a serve serves the videos and a player consumes them and presents them to the user. I will explain what is needed on both sides.

Serving DASH videos

Pieces of DASH videos can be delivered over HTTP or HTTPS by any modern web server - Apache, ngnix, IIS and others. No plugin or additional software is needed on the server side to serve DASH videos - they are just files and every web server knows how to serve files. You may need to do some configuration, however.

Most web servers have a list of MIME types of the files they are allowed to serve - you do usually need to add DASH videos to this list, since the default settings tend to be restrictive for security reasons and do not allow DASH videos to be streamed.

Here is an example web.config for IIS that allows DASH videos to be served:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <remove fileExtension=".m4s" />
            <mimeMap fileExtension=".m4s" mimeType="video/mp4" />

            <remove fileExtension=".mpd" />
            <mimeMap fileExtension=".mpd" mimeType="application/dash+xml" />

            <remove fileExtension=".m4f" />
            <mimeMap fileExtension=".m4f" mimeType="video/mp4" />

            <remove fileExtension=".m4a" />
            <mimeMap fileExtension=".m4a" mimeType="video/mp4" />
        </staticContent>
    </system.webServer>
</configuration>

The different video/mp4 elements are there since different DASH encoders name their files differently.

Some DASH players, especially web-based ones, may also require the server to support cross-origin resource sharing (CORS). This is a security mechanism that helps prevent malicious websites from operating by enabling you to choose what sites your content can be displayed on. The exact CORS headers your server needs to provide also depend on the player - in some situations, additional headers are used and must be explicitly enabled. I will leave the details of CORS out of scope of this answer. Here is a simple example IIS configuration that allows any website to consume the served videos:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

Playing DASH videos

You need a player, obviously. There exist different types of players: stand-alone desktop apps (e.g. VLC), player SDKs for Android/iOS apps (e.g. ExoPlayer and Microsoft PlayReady Client SDK) and players for websites (e.g. dash.js and Bitdash). On Windows 10, Internet Explorer will even include a built-in player for DASH videos.

This is where dash.js comes in - it is a player. You put it in your website if you want your website to play videos. There are also different players available.

Depending on how you wish to offer content to the end-user you choose a player and, if not a stand alone player, embed it into your app or website. You provide the URL to the player and it will do its thing. Simple.

Website-based players require the server to support CORS but stand-alone or app-hosted players do not require it.