In a recent blog post, we announced the availability of Dash.js v1.3. Now, I wish to show you how to use Azure Media Services to publish video and consume it using in a Dash.js player.
This scenario will allow you create professional streaming capabilities in a few clicks. Keep reading to learn more about how to use Microsoft Azure Media Services and its smooth streaming feature with the first-class citizen HTML player: Dash.js.
Configuring a Media Service
First, to access the Azure Management Portal, you will need an account (a free trial will suffice – obtain one here).
Once this has been installed and is running, select the Media Services tab to create a new media service (using Quick Create).
You will be prompted to assign a name and to select the appropriate region:
Once this has been completed and your status is Active, you may start uploading a media file. (In this example, I uploaded an mpeg4 video file).
Double-click on the new media service you created, and then click the Add button. This dialogue will appear on the screen; browse locally to select the video you wish to upload.
SPECIAL NOTE: Only the following formats are accepted:
For my example, I selected an .mp4 file from my local drive:
When finished, the name of the video or file will appear in the Content tab when it has been uploaded:
Select the source video, and hit the Process button at the bottom of the page. You will then be prompted to select the encoding configuration:
Note, here is the list of encode configuration available:
Select and process every format you want/need. In this sample case (Dash player consumption), we used H264 Smooth Streaming xxx format. So I selected these formats:
Please note: This task will be completed asynchronously, and may take some time to complete. When you select the format you want, you will create and start a background task. You will not receive a status notification while the task is processing, and so you will need to refresh the portal a few ‘hours’ later. When the video is ready to publish, the Publish button will appear (on the bottom of the page).
One very important thing you will need to do is to create at minimum one streaming unit. Without that, the streaming will not work with Dash players. To do this, activate the Streaming EndPoint tab, and then click on the default (the cell containing the arrow):
In the next dialogue, you will be able to setup the streaming units. Select one or more unit, like this:
Don’t forget to click on the save button at the bottom of the page!
Back on the Content tab: after a while, the Publish button will be available for each video format file that you generated:
Once this is visible, you may select the Publish button for each video you wish to publish.
Consuming the Media Stream
Media Services configuration is now complete. Let’s now see how to consume the video stream from the Dash player.
The simplest way to test the Dash player is to create an HTML page with the following content:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>Auto-player instantiation example, single videoElement</title>
<script src="dash.debug.js"></script>
<!--dash.all.js should be used in production over dash.debug.js. dash.debug.js is not compressed or obfuscated and the file size is much larger compared with dash.all.js-->
<!--<script src="../../dist/dash.all.js"></script>-->
<style>
video {
width: 640px;
height: 360px;
}
</style>
<body onload="Dash.createAll()">
<div>
<video class="dashjs-player" autoplay preload="none" controls="true">
<source src="http://ericmittmediasvc.origin.mediaservices.windows.net/eeba74f6-5f16-477a-b469-32a03732ebf5/Wikipedia%20Office%20App.ism/Manifest(format=mpd-time-csf)" type="application/dash+xml" />
</video>
</div>
</body>
</html>
Here is a sample of the URL that Azure Media Services will generate (once the media service has been published).
Note the default format returned by Azure Media Services is not directly compatible with Dash players. It will need to be changed. To do that, you can modify the url given by Azure Media Service Portal just after the Manifest, to add the (format=mpd-time-csf) instruction. For example, in my case I used:
http://ericmittmediasvc.origin.mediaservices.windows.net/fd0385c4-ac45-40cf-bac2-3ca73cd6b3d0/Wikipedia%20Office%20App.ism/Manifest(format=mpd-time-csf)
You may also test this revised URL with the Dash reference client located here (NOTE: Here I referenced the v1.3; please see a list here for each of the versions.)
At the loading event, the video will begin streaming. It should look like this:
Of course, you can have more control on the video flow, using javascript code. For example, you can control the start point, or scan through the video.
We welcome your comments and questions related to using the Dash.js player.
A bientôt,
Eric