Condividi tramite

Configurazione completa di Azure Media Player

  • Articolo

Azure Media Player è facile da configurare. La riproduzione di contenuti multimediali di base direttamente dall'account di Servizi multimediali di Azure richiede solo alcuni istanti. esempi sono disponibili anche nella directory degli esempi della versione.

Passaggio 1: Includere i file JavaScript e CSS nella parte iniziale della pagina

Con Azure Media Player è possibile accedere agli script dalla versione ospitata della rete CDN. È spesso consigliabile inserire JavaScript prima del tag del corpo finale <body> anziché il <head>, ma Azure Media Player include un "HTML5 Shiv", che deve trovarsi nella testa per le versioni precedenti di Internet Explorer per rispettare il tag video come elemento valido.

Nota

Se si usa già un codice HTML5 shiv come Modernizr è possibile includere Azure Media Player JavaScript ovunque. Tuttavia, assicurati che la tua versione di Modernizr includa lo shiv per il video.

Versione della rete CDN

    <link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
    <script src= "//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>

Importante

È consigliabile NON usare la versione di latest nell'ambiente di produzione, perché è soggetta a modifiche su richiesta. Sostituire latest con una versione di Azure Media Player. Ad esempio, sostituire latest con 2.1.1. Le versioni di Azure Media Player possono essere sottoposte a query da qui.

Nota

Poiché il rilascio 1.2.0, non è più necessario includere il percorso alle tecnologie di fallback (rileverà automaticamente il percorso dal percorso relativo del file di azuremediaplayer.min.js). È possibile modificare il percorso delle tecnologie di fallback aggiungendo lo script seguente nel <head> dopo gli script precedenti.

Nota

A causa della natura dei plug-in Flash e Silverlight, i file swf e xap devono essere ospitati in un dominio senza informazioni o dati sensibili. Questa operazione viene eseguita automaticamente con la versione ospitata della rete CDN di Azure.

    <script>
      amp.options.flashSS.swf = "//amp.azure.net/libs/amp/latest/techs/StrobeMediaPlayback.2.0.swf"
      amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/latest/techs/SmoothStreamingPlayer.xap"
    </script>

Passaggio 2: Aggiungere un tag video HTML5 alla pagina

Con Azure Media Player è possibile usare un tag video HTML5 per incorporare un video. Azure Media Player leggerà quindi il tag e lo farà funzionare in tutti i browser, non solo in quelli che supportano video HTML5. Oltre al markup di base, Azure Media Player richiede alcuni elementi aggiuntivi.

  1. L'attributo <data-setup> nel <video> indica ad Azure Media Player di configurare automaticamente il video quando la pagina è pronta e leggere qualsiasi elemento (in formato JSON) dall'attributo .
  2. Attributo id: deve essere usato e univoco per ogni video nella stessa pagina.
  3. L'attributo class contiene due classi:
    • azuremediaplayer applica gli stili necessari per la funzionalità dell'interfaccia utente di Azure Media Player
    • amp-default-skin applica l'interfaccia predefinita ai controlli HTML5
  4. Il <source> include due attributi obbligatori
    • src attributo può includere un file *.ism/manifest da Servizi multimediali di Azure, Azure Media Player aggiunge automaticamente gli URL per DASH, SMOOTH e HLS al lettore
    • type attributo è il tipo MIME richiesto del flusso. Il tipo MIME associato a ".ism/manifest" è "application/vnd.ms-sstr+xml"
  5. L'attributo facoltativo<data-setup> nel <source> indica ad Azure Media Player se sono presenti criteri di recapito univoci per il flusso da Servizi multimediali di Azure, tra cui, ad esempio, il tipo di crittografia (AES o PlayReady, Widevine o FairPlay) e il token.

Includere/escludere attributi, impostazioni, origini e tracce esattamente come si farebbe per il video HTML5.

    <video id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls width="640" height="400" poster="poster.jpg" data-setup='{"techOrder": ["azureHtml5JS", "flashSS", "html5FairPlayHLS","silverlightSS", "html5"], "nativeControlsForTouch": false}'>
        <source src="http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest" type="application/vnd.ms-sstr+xml" />
        <p class="amp-no-js">
            To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
        </p>
    </video>

Per impostazione predefinita, il pulsante di riproduzione grande si trova nell'angolo superiore sinistro in modo da non coprire le parti interessanti del poster. Se si preferisce centrare il pulsante di riproduzione di grandi dimensioni, è possibile aggiungere un amp-big-play-centeredclass aggiuntivo all'elemento <video>.

Configurazione alternativa per html caricato in modo dinamico

Se la pagina Web o l'applicazione carica il tag video in modo dinamico (ajax, appendChild e così via), in modo che non esista quando la pagina viene caricata, è necessario configurare manualmente il lettore invece di basarsi sull'attributo data-setup. A tale scopo, rimuovere prima di tutto l'attributo data-setup dal tag in modo che non ci sia confusione quando il giocatore viene inizializzato. Eseguire quindi il codice JavaScript seguente qualche volta dopo il caricamento di JavaScript di Azure Media Player e dopo il caricamento del tag video nel DOM.

    var myPlayer = amp('vid1', { /* Options */
            techOrder: ["azureHtml5JS", "flashSS", "html5FairPlayHLS","silverlightSS", "html5"],
            "nativeControlsForTouch": false,
            autoplay: false,
            controls: true,
            width: "640",
            height: "400",
            poster: ""
        }, function() {
              console.log('Good to go!');
               // add an event listener
              this.addEventListener('ended', function() {
                console.log('Finished!');
            });
          }
    );
    myPlayer.src([{
        src: "http://samplescdn.origin.mediaservices.windows.net/e0e820ec-f6a2-4ea2-afe3-1eed4e06ab2c/AzureMediaServices_Overview.ism/manifest",
        type: "application/vnd.ms-sstr+xml"
    }]);

Il primo argomento nella funzione amp è l'ID del tag video. Sostituirlo con il proprio.

Il secondo argomento è un oggetto options. Consente di impostare opzioni aggiuntive come è possibile usare l'attributo data-setup.

Il terzo argomento è un callback 'ready'. Dopo l'inizializzazione di Azure Media Player, questa funzione verrà chiamata . Nel callback pronto l'oggetto 'this' fa riferimento all'istanza del lettore.

Anziché usare un ID elemento, è anche possibile passare un riferimento all'elemento stesso.


    amp(document.getElementById('example_video_1'), {/*Options*/}, function() {
        //This is functionally the same as the previous example.
    });
    myPlayer.src([{ src: "//example/path/to/myVideo.ism/manifest", type: "application/vnd.ms-sstr+xml"]);