Revision 928477 of DASH Adaptive Streaming for HTML 5 Video

<p><span class="seoSummary">Dynamic Adaptive Streaming over HTTP (DASH) is an adaptive streaming protocol.</span> This means that it allows for a video stream to switch between bit rates on the basis of network performance, in order to keep a video playing.</p>

<h2 id="Browser_Support">Browser Support</h2>

<p>Firefox 21 includes an implementation of DASH for HTML5 WebM video which is turned off by default. It can be enabled via "about:config" and the "media.dash.enabled" preference.</p>

<p>Firefox 23 removed support for DASH for HTML5 WebM video.&nbsp; It will be replaced by an implementation of the <a href="https://www.w3.org/TR/media-source/">Media Source Extensions API </a>which will allow support for DASH via Javascript libraries such as dash.js. See bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=778617">778617</a> for details.</p>

<h2 id="Using_DASH_-_Server_Side">Using DASH - Server Side</h2>

<p>First you'll need to convert your WebM video to a DASH manifest with the accompanying video files in various bit rates. To start with you'll need:</p>

<ul>
 <li>ffpmeg - with libvpx and libvoribis support for WebM video and audio (<a href="https://www.ffmpeg.org/" title="https://www.ffmpeg.org/">ffmpeg.org</a>).</li>
 <li>libwebm - specifically for the samplemuxer tool (<span style="text-align:-webkit-auto"><span style="white-space:pre-wrap">git clone <a href="https://gerrit.chromium.org/gerrit/p/webm/libwebm.git">https://gerrit.chromium.org/gerrit/p/webm/libwebm.git</a>)</span></span>.</li>
 <li>webm-tools - specifically for the manifest creation tool, webm_dash_manifest (<span style="text-align:-webkit-auto"><span style="white-space:pre-wrap">git clone <a href="https://gerrit.chromium.org/gerrit/p/webm/webm-tools.git">https://gerrit.chromium.org/gerrit/p/webm/webm-tools.git</a>)</span></span>.</li>
</ul>

<h3 id="1._Use_your_existing_WebM_file_to_create_one_audio_file_and_multiple_video_files.">1. Use your existing WebM file to create one audio file and multiple video files.</h3>

<p>For example:</p>

<p>Create the audio using:</p>

<pre>
<code>ffmpeg -i my_master_file.webm -vn -acodec libvorbis -ab 128k my_audio.webm</code></pre>

<p>And create the video files using:</p>

<pre>
<code>ffmpeg -i my_master_file.webm -vcodec libvpx -vb 250k -keyint_min 150 -g 150 -an my_video-250kbps.webm
ffmpeg -i my_master_file.webm -vcodec libvpx -vb 100k -keyint_min 150 -g 150 -an my_video-100kbps.webm
ffmpeg -i my_master_file.webm -vcodec libvpx -vb 50k -keyint_min 150 -g 150 -an my_video-50kbps.webm</code></pre>

<h3 id="2._Align_the_clusters_to_enable_switching_at_cluster_boundaries.">2. Align the clusters to enable switching at cluster boundaries.</h3>

<p>For video:</p>

<pre>
<code>samplemuxer -i my_video-250kbps.webm -o my_video-250kbps-final.webm</code>
<code>etc.</code></pre>

<p>Although we don't switch audio streams, it's still necessary to run it through samplemuxer to ensure a cues element is added. Note: to be compatible with playing on Chrome, it is suggested to change the track number to something other than the one in the video files, most likely 0.</p>

<pre>
<code>samplemuxer -i my_audio.webm -o my_audio-final.webm -output_cues 1 -cues_on_audio_track 1 -max_cluster_duration 2 -audio_track_number</code></pre>

<h3 id="3._Create_the_manifest_file">3. Create the manifest file:</h3>

<pre>
<code>webm_dash_manifest -o my_video_manifest.mpd \
  -as id=0,lang=eng \
  -r id=0,file=my_video-250kbps-final.webm \
  -r id=1,file=my_video-100kbps-final.webm \
  -r id=2,file=my_video-50kbps-final.webm \
  -as id=1,lang=eng \
  -r id=4,file=my_audio-final.webm</code></pre>

<p>Put the manifest and the associated video files on your web server or CDN. DASH works via HTTP, so as long as your HTTP server supports byte range requests, and it's set up to serve .mpd files with mimetype="application/dash+xml", then you're all set.</p>

<h2 id="Using_DASH_-_Client_Side">Using DASH - Client Side</h2>

<p>You'll want to modify your web page to point to the DASH manifest first, instead of directly to a particular video file:</p>

<pre class="brush: html">
&lt;video&gt;
  &lt;source src="movie.<span class="ZmSearchResult" id="DWT648"><span class="ZmSearchResult" id="DWT650">mpd</span></span>"&gt;
  &lt;source src="movie.webm"&gt;
  Your browser does not support the video tag.
&lt;/video&gt;</pre>

<p>That's it! If DASH is supported by the browser, your video will now stream adaptively.</p>

<h2 id="Links">Links</h2>

<p><a href="https://wiki.webmproject.org/adaptive-streaming/webm-dash-specification" title="https://wiki.webmproject.org/adaptive-streaming/webm-dash-specification">WebM DASH Specification at The WebM Project</a></p>

<p><a href="https://dashif.org/" title="https://dashif.org/">DASH Industry Forum</a></p>