Integrazione di uno streaming video adattivo MPEG-DASH in un'applicazione HTML5 con DASH.jsEmbedding a MPEG-DASH Adaptive Streaming Video in an HTML5 Application with DASH.js

PanoramicaOverview

MPEG-DASH è uno standard ISO per lo streaming adattivo di contenuti video che offre vantaggi significativi agli utenti che desiderano distribuire output di streaming video adattivo di alta qualità.MPEG-DASH is an ISO standard for the adaptive streaming of video content, which offers significant benefits for those who wish to deliver high-quality, adaptive video streaming output. Con MPEG-DASH il flusso video viene automaticamente impostato a una definizione inferiore quando si verificano situazioni di congestione sulla rete.With MPEG-DASH, the video stream will automatically drop to a lower definition when the network becomes congested. Questo riduce il rischio che il video si interrompa mentre il lettore scarica i secondi successivi da riprodurre (noto anche come buffering).This reduces the likelihood of the viewer seeing a "paused" video while the player downloads the next few seconds to play (aka buffering). Man mano che la congestione sulla rete si riduce, il lettore video torna a un flusso di qualità elevata.As network congestion reduces, the video player will in turn return to a higher quality stream. La possibilità di adattare la larghezza di banda richiesta riduce anche i tempi di avvio del video.This ability to adapt the bandwidth required also results in a faster start time for video. I primi secondi, ad esempio, possono essere riprodotti con una qualità inferiore, rapida da scaricare, per poi passare a una qualità superiore nel momento in cui nel buffer è stato memorizzato contenuto sufficiente.That means that the first few seconds can be played in a fast-to-download lower quality segment and then step up to a higher quality once sufficient content has been buffered.

Dash.js è un lettore video MPEG-DASH open source scritto in JavaScript.Dash.js is an open source MPEG-DASH video player written in JavaScript. È stato sviluppato per offrire un affidabile lettore multipiattaforma che possa essere liberamente riusato in applicazioni che richiedono la riproduzione video.Its goal is to provide a robust, cross-platform player that can be freely reused in applications that require video playback. Offre funzionalità di riproduzione MPEG-DASH in qualsiasi browser che supportalo standard W3C Media Source Extensions (MSE), ovvero Chrome, Microsoft Edge e IE11 (altri browser hanno manifestato l'intenzione di supportare MSE).It provides MPEG-DASH playback in any browser that supports the W3C Media Source Extensions (MSE), today that is Chrome, Microsoft Edge and IE11 (other browsers have indicated their intent to support MSE). Per altre informazioni su DASH.js, vedere la pagina relativa al repository dash.js di GitHub.For more information about DASH.js, js see the GitHub dash.js repository.

Creazione di un lettore di streaming video basato su browserCreating a browser-based streaming video player

Per creare una pagina Web semplice che visualizzi un lettore video con i controlli previsti, quali riproduzione, pausa, riavvolgimento e così via, sarà necessario:To create a simple web page that displays a video player with the expected controls such a play, pause, rewind etc., you will need to:

  1. Creare una pagina HTMLCreate an HTML page
  2. Aggiungere un tag videoAdd the video tag
  3. Aggiungere il lettore dash.jsAdd the dash.js player
  4. Inizializzare il lettoreInitialize the player
  5. Aggiungere lo stile CSSAdd some CSS style
  6. Visualizzare i risultati in un browser che implementa MSEView the results in a browser that implements MSE

L'inizializzazione del lettore può essere eseguita con poche righe di codice JavaScript.Initializing the player can be completed in just a handful of lines of JavaScript code. Usando dash.js, integrare video MPEG-DASH in applicazioni basate su browser è davvero molto semplice.Using dash.js, it really is that simple to embed MPEG-DASH video in your browser based applications.

Creazione della pagina HTMLCreating the HTML Page

Il primo passaggio consiste nel creare una pagina HTML standard contenente l'elemento video e salvare il file come basicPlayer.html, come illustrato nell'esempio seguente:The first step is to create a standard HTML page containing the video element, save this file as basicPlayer.html, as the following example illustrates:

<!DOCTYPE html>
<html>
  <head><title>Adaptive Streaming in HTML5</title></head>
  <body>
    <h1>Adaptive Streaming with HTML5</h1>
    <video id="videoplayer" controls></video>
  </body>
</html>

Aggiunta del lettore DASH.jsAdding the DASH.js Player

Per aggiungere l'implementazione di riferimento dash.js all'applicazione, è necessario recuperare il file dash.all.js dalla versione 1.0 del progetto dash.js.To add the dash.js reference implementation to the application, you’ll need to grab the dash.all.js file from the 1.0 release of dash.js project. Il file deve essere quindi salvato nella cartella JavaScript dell'applicazione.This should be saved in the JavaScript folder of your application. Si tratta di un file di riferimento che raccoglie tutto il codice dash.js necessario in un unico file.This file is a convenience file that pulls together all the necessary dash.js code into a single file. Esaminando l'archivio dash.js si potrà identificare i singoli file, il codice di test e molto altro, ma se si deve solo usare il file dash.js, questo sarà l'unico elemento effettivamente necessario.If you have a look around the dash.js repository, you will find the individual files, test code and much more, but if all you want to do is use dash.js, then the dash.all.js file is what you need.

Per aggiungere il lettore dash.js a un'applicazione, aggiungere un tag di script alla sezione di intestazione del file basicPlayer.html:To add the dash.js player to your applications, add a script tag to the head section of basicPlayer.html:

<!-- DASH-AVC/265 reference implementation -->
< script src="js/dash.all.js"></script>

Successivamente, creare una funzione per inizializzare il lettore al caricamento della pagina.Next, create a function to initialize the player when the page loads. Aggiungere lo script seguente dopo la riga in cui si carica dash.all.js:Add the following script after the line in which you load dash.all.js:

<script>
// setup the video element and attach it to the Dash player
function setupVideo() {
  var url = "http://wams.edgesuite.net/media/MPTExpressionData02/BigBuckBunny_1080p24_IYUV_2ch.ism/manifest(format=mpd-time-csf)";
  var context = new Dash.di.DashContext();
  var player = new MediaPlayer(context);
                  player.startup();
                  player.attachView(document.querySelector("#videoplayer"));
                  player.attachSource(url);
}
</script>

Questa funzione crea in primo luogo un elemento DashContext,This function first creates a DashContext. che consente di configurare l'applicazione per un ambiente di runtime specifico.This is used to configure the application for a specific runtime environment. Da un punto di vista tecnico, definisce le classi che il framework di inserimento delle dipendenze dovrà usare durante la creazione dell'applicazione.From a technical point of view, it defines the classes that the dependency injection framework should use when constructing the application. Nella maggior parte dei casi, si userà Dash.di.DashContext.In most cases, you will use Dash.di.DashContext.

Successivamente, inizializza la classe primaria del framework dash.js, MediaPlayer.Next, instantiate the primary class of the dash.js framework, MediaPlayer. Questa classe contiene i principali metodi necessari, ad esempio riproduzione e pausa, e gestisce sia la relazione con l'elemento video sia l'interpretazione del file Media Presentation Description (MPD) che descrive il video da riprodurre.This class contains the core methods needed such as play and pause, manages the relationship with the video element and also manages the interpretation of the Media Presentation Description (MPD) file which describes the video to be played.

Per verificare che il lettore sia pronto per la riproduzione del video, viene chiamata la funzione startup() della classe MediaPlayer.The startup() function of the MediaPlayer class is called to ensure that the player is ready to play video. Tra le altre cose, questa funzione controlla anche che siano state caricate tutte le classi necessarie (come definito dal contesto).Amongst other things this function ensures that all the necessary classes (as defined by the context) have been loaded. Quando il lettore è pronto, è possibile collegare l'elemento video mediante la funzione attachView().Once the player is ready, you can attach the video element to it using the attachView() function. In questo modo, MediaPlayer può inserire il flusso video nell'elemento e, se necessario, controllare la riproduzione.This enables the MediaPlayer to inject the video stream into the element and also control playback as necessary.

Passare l'URL del file MPD a MediaPlayer in modo che riconosca il video previsto per la riproduzione. Quando la pagina risulterà completamente caricata, sarà necessario eseguire la funzione setupVideo() appena creata.Pass the URL of the MPD file to the MediaPlayer so that it knows about the video it is expected to play.The setupVideo() function just created will need to be executed once the page has fully loaded. A questo scopo, è possibile usare l'evento onload dell'elemento del corpo.Do this by using the onload event of the body element. Modificare l'elemento come segue:Change your element to:

<body onload="setupVideo()">

Infine, imposta la dimensione dell'elemento video usando lo stile CSS.Finally, set the size of the video element using CSS. In un ambiente di streaming adattivo, questo passaggio è particolarmente importante poiché le dimensioni del video riprodotto possono variare mentre la riproduzione si adatta alle mutevoli condizioni di rete.In an adaptive streaming environment, this is especially important because the size of the video being played may change as playback adapts to changing network conditions. Questo semplice esempio forza l'elemento video all'80% della finestra del browser disponibile aggiungendo lo stile CSS seguente alla sezione di intestazione della pagina:In this simple demo simply force the video element to be 80% of the available browser window by adding the following CSS to the head section of the page:

<style>
video {
  width: 80%;
  height: 80%;
}
</style>

Riproduzione di un videoPlaying a Video

Per riprodurre un video, passare nel browser al file basicPlayback.html e fare clic sul pulsante di riproduzione sul lettore video visualizzato.To play a video, point your browser at the basicPlayback.html file and click play on the video player displayed.

Percorsi di apprendimento di Servizi multimedialiMedia Services learning paths

Altre informazioni sui percorsi di apprendimento di Servizi multimediali di Azure:Read about the Azure Media Services learning paths:

Fornire commenti e suggerimentiProvide feedback

Usare il forum di suggerimenti degli utenti per fornire commenti e suggerimenti su come migliorare Servizi multimediali di Azure.Use the User Voice forum to provide feedback and make suggestions on how to improve Azure Media Services. È anche possibile passare direttamente a una delle categorie seguenti:You also can go directly to one of the following categories:

Vedere ancheSee Also

Sviluppo di applicazioni di lettore videoDevelop video player applications

Repository dash.js di GitHubGitHub dash.js repository