This is the second part of the tutorial on how to work with DASH-Streams. For more information about how to create and encode content for DASH, look at the first part of the tutorial here.

In this part, we will look at different video players that can display DASH content. We will only focus on web-players and not applications like VLC. The video players I will discuss are the following:

• dash.js
• Shaka-Player

Tutorial overview

You can find a complete overview of the tutorial with all the resources and examples mentioned in the posts here: http://halcyon.ch/halcyon_dash/

dash.js

Introduction to dash.js

This is a very basic video player and doesn’t require a lot of time to set up. With this player, we simply want to test if the stream we created in the first part of the tutorial works. You can find the GitHub repository here: https://github.com/Dash-Industry-Forum/dash.js/

(more…)

I recently read about DASH (Dynamic Adaptive Streaming over HTTP) and an implementation of this standard in a video player from google here. If you haven’t heard of DASH before, check out this intro video (until 1:31). So I made it my goal for one day to learn as much about it as possible. I came quite far and reached the goal I set myself for this one day. It turned out, that even though it’s widely used, there is little documentation for real beginners. This is one thing that I want to change with my posts.I will now try and explain how you can get a good start into the DASH-Environment. As there is so much to talk about, I had to split my small guide/tutorial/howto into two parts:

Tutorial overview

You can find a complete overview of the tutorial with all the resources and examples mentioned in the posts here: http://halcyon.ch/halcyon_dash/

#1 – Get started with DASH [LINK]
In this part of the tutorial, we take a closer look at what DASH is and how we work with it. We then will mainly set up the DASH environment. We also take a look on how to install MP4Box and x264. We then encode our first video to the DASH-Format and make it available as a stream.

#2 – Display a DASH stream (Shaka-Player) [LINK]
In the second part, we will take a closer look on how we can access these streams. We will do this with the dart.js and the Shaka-Player.

Introduction

Summarized, the DASH standard gives the opportunity that the client can switch automatically between the representation of the video. So the client can easily switch between the codec and the language for example. This is as mentioned in the video above very important when you don’t have a stable data connection so. So the quality and the codec of the video can be dynamically changed by the client (the video player). For this to work you have to encode the content in different resolutions and bitrates.

An example of a DASH Stream. (Frame from the Youtube-Video mentioned above)

The documentation gives the following examples for resolutions and bitrates:

• 1920×1080, 5.0 Mbit/s
• 1920×1080, 3.0 Mbit/s
• 1280×720, 2.0 Mbit/s
• 1280×720, 1.0 Mbit/s
• 854×480, 750 kbit/s
• 640×360, 350 kbit/s

To encode your content in these different resolutions and bitrate you can use DASHEncoder or x256 (ffmpeg). To make your content ready to stream, you then have to generate a DASH manifest and the actual segments. You could use the DASHEncoder for that as well, but I’m going to use MP4Box in this tutorial.

If you think, that you already heard of such a standard, you’re not wrong. Last year Apple announced that their approach for this problem is Apple HLS. This is already implemented in the modern web browsers like Chrome, Microsoft Edge or Safari.

The goal of this two-part tutorial will be different video players that handle our own DASH-Stream. (more…)