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>

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>

</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