Instructions to playback Adaptive WebM using DASH

This page describes the recommended ways to create, stream and playback WebM files using DASH. If you are looking for the old (and obsolete) page that used FFmpeg, libwebm and webm-tools, it has been moved here: http://wiki.webmproject.org/zz-obsolete/instructions-to-playback-a-webm-dash-presentation


Creating WebM Files for DASH


Note about FFmpeg: You will need to download the latest (tip-of-the-tree) version of FFmpeg in order for some DASH features to work. You can either download nightly static build from https://www.ffmpeg.org/download.html or build FFmpeg yourself from the git repository.


Step 1: Create the Video and Audio Streams


For streaming WebM files using DASH, the video and audio files have to be non-muxed and non-chunked (i.e.) each video stream goes into it’s own file and each audio stream goes into it’s own file. For more information on what this means see this link.


For the sake of examples, let’s assume there is a raw video source named “input_video.y4m” and a raw audio source named “input_audio.wav”. We create 5 video streams and 1 audio stream each with varying resolutions and bit rates.


Video Streams:


VP9_DASH_PARAMS="-tile-columns 4 -frame-parallel 1"


ffmpeg -i input_video.y4m -c:v libvpx-vp9 -s 160x90 -b:v 250k -keyint_min 150 -g 150 ${VP9_DASH_PARAMS} -an -f webm -dash 1 video_160x90_250k.webm


ffmpeg -i input_video.y4m -c:v libvpx-vp9 -s 320x180 -b:v 500k -keyint_min 150 -g 150 ${VP9_DASH_PARAMS} -an -f webm -dash 1 video_320x180_500k.webm


ffmpeg -i input_video.y4m -c:v libvpx-vp9 -s 640x360 -b:v 750k -keyint_min 150 -g 150 ${VP9_DASH_PARAMS} -an -f webm -dash 1 video_640x360_750k.webm


ffmpeg -i input_video.y4m -c:v libvpx-vp9 -s 640x360 -b:v 1000k -keyint_min 150 -g 150 ${VP9_DASH_PARAMS} -an -f webm -dash 1 video_640x360_1000k.webm


ffmpeg -i input_video.y4m -c:v libvpx-vp9 -s 1280x720 -b:v 1500k -keyint_min 150 -g 150 ${VP9_DASH_PARAMS} -an -f webm -dash 1 video_1280x720_500k.webm



The "keyint_min" and "g" parameters make sure that all the video streams have aligned Cue Points. "dash" parameter ensures that DASH compliant WebM files are created. Also, to use VP8 instead of VP9, use "libvpx" as the video codec in the above command lines instead of "libvpx-vp9".


Audio Stream:


ffmpeg -i input_audio.wav -c:a libvorbis -b:a 128k -vn -f webm -dash 1 audio_128k.webm


Even though, the example commands show raw video and audio, any input source format supported by FFmpeg can be used and the command line has to be changed accordingly.


Step 2: Create the WebM DASH Manifest


WebM DASH Manifest is an XML file (usually with the extension .mpd). It can be created using ffmpeg as follows:


ffmpeg \

-f webm_dash_manifest -i video_160x90_250k.webm \

-f webm_dash_manifest -i video_320x180_500k.webm \

-f webm_dash_manifest -i video_640x360_750k.webm \

-f webm_dash_manifest -i video_640x360_1000k.webm \

-f webm_dash_manifest -i video_1280x720_500k.webm \

-f webm_dash_manifest -i audio_128k.webm \

-c copy -map 0 -map 1 -map 2 -map 3 -map 4 -map 5 \

-f webm_dash_manifest \

-adaptation_sets "id=0,streams=0,1,2,3,4 id=1,streams=5" \

manifest.mpd


Make sure that you have all the video and audio files along with the manifest in the same directory.


DASH Playback on Web using Shaka


One option for streaming WebM files adaptively on the Web is Shaka, which is an open source media player built on HTML5.


Source code: https://github.com/google/shaka-player


For tutorials and more information please see the Shaka Home Page: http://shaka-player-demo.appspot.com/docs/index.html.


DASH Playback on Web using Dash.js


Another option for streaming WebM files adaptively on the Web, is Dash.js, which is also an open source media player built on HTML5.


Here is a simple piece of HTML and javascript that will play back your video adaptively:


<html>

 <script src="dash.webm.min.js"></script>

 <script>

   function startVideo(mpd) {

     var video, context, player;

     video = document.querySelector('video');

     context = new Webm.di.WebmContext();

     player = new MediaPlayer(context);

     player.startup();

     player.attachView(video);

     player.setAutoPlay(false);

     player.attachSource(mpd);

   }

 </script>

 <body onload="startVideo('manifest.mpd');">

   <video controls></video>

 </body>

</html>


The above code snippet is based on Dash.js' baseline player. You can obtain dash.webm.min.js from the Dash.js github repository. For more information on Dash.js API and tweaking, you can refer to Dash.js wiki here: https://github.com/Dash-Industry-Forum/dash.js/wiki


To create a custom skinnable HTML5 player using Dash, you can use Video.js which in turn supports Dash.js for adaptive playback. Here is a demo that shows how to use Dash.js and Video.js for adaptive playback of WebM files: http://demos.webmproject.org/dash/201410


DASH Playback on Android


For streaming WebM files adaptively on Android, you can use ExoPlayer - an open source extensible media player built on top of the Android Media library. It is developed by YouTube.


A beginner's guide to ExoPlayer can be found here: https://www.youtube.com/watch?v=6VjF638VObA


For more details on ExoPlayer see here: http://developer.android.com/guide/topics/media/exoplayer.html

Comments