En un post anterior estuve hablando sobre Dynamic Packaging y Microsoft Azure Media Services. En este quería mostraros cómo trabajar con la librería dash.js pensada para la implementación MPEG-DASH. Esta se apoya en la etiqueta video de HTML 5 y utiliza JavaScript para crear un contexto alrededor.

Lo primero que necesitamos es descargar dash.js del siguiente enlace.

Podemos utilizar este código de ejemplo, haciendo uso de la etiqueta video de HTML 5:

<section class="dash">
	<video id="video-dashjs" controls></video>
</section>
<script src="~/Scripts/dash.all.js"></script>
<script src="~/Scripts/App/dash.configuration.js"></script>
<script>window.onload = function(){dashPlayer.play();}</script>

dashPlayer se trata de una clase JavaScript que he creado para encapsular la configuración del reproductor:

var dashPlayer = function (url) {
    var
        player = null,
        play = function () {
            var mediaURL = "http://[YOUR_MEDIA_ACCOUNT].origin.mediaservices.windows.net/[LOCATOR]/[FILE_NAME].ism/Manifest(format=mpd-time-csf)";
            var context = Dash.di.DashContext();
            player = new MediaPlayer(context);
            player.startup();
            player.attachView(document.querySelector("#video-dashjs"));
            player.attachSource(mediaURL);
        },
    stop = function () {
        player.videoModel.pause();
    };
    return {
        play: play,
        stop: stop
    };
}();

Espero que sea de utilidad.

¡Saludos!