CODEWITHSUNDEEP
html5-videompeg-dashdash.js
RollRoll
RollRoll

Reputation: 8462

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

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)?

Upvotes: 10

Views: 7980

Answers (2)

Jamie Birch
Jamie Birch

Reputation: 6102

Why you need dash.js for streaming MPEG-DASH videos

You need it because web browsers do not natively support DASH, as they are not required to do so. Web browsers are, however, required to support Media Source Extensions (MSE). For (newer) browser versions that do implement MSE, their 'basic' supported media sources like MP4 can be supplemented by DASH simply by inclusion of Javascript libraries like dash.js. This is much more flexible (and future-proof) than the older routine of requiring users to install plugins like Flash Player to play non-basic media types.

Client-side setup

You also asked whether dash.js is something that needs to be installed server-side or client-side. Sander has written about any server-side setup that may be necessary to accommodate serving the files, so I'll add an explanation of how to implement it client-side.

From the dash.js GitHub page:

<script src="http://cdn.dashjs.org/latest/dash.all.min.js"></script>
...
<style>
    video {
       width: 640px;
       height: 360px;
    }
</style>
...
<body>
   <div>
       <video data-dashjs-player autoplay src="http://dash.edgesuite.net/envivio/EnvivioDash3/manifest.mpd" controls></video>
   </div>
</body>

Note that if you want to do Clear Key encryption too, you'll need to serve bot the video file and dash.all.min.js from a secure context (eg. TLS). And if you want to use xhtml format rather than html, you'll need to add ="true" after each boolean property on the <video> element.

Upvotes: 5

Sander
Sander

Reputation: 26374

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.

Upvotes: 18

Related Questions