Condividi tramite

Configurazione completa di Azure Media Player

  • Articolo

Azure Media Player è semplice da configurare. È necessario solo alcuni minuti per ottenere la riproduzione di base del contenuto multimediale direttamente dall'account di Servizi multimediali di Azure. Gli esempi vengono forniti anche nella directory degli esempi della versione.

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

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

Nota

Se si usa già un codice HTML5 shiv come Modernizr , è possibile includere JavaScript di Azure Media Player ovunque. Assicurarsi tuttavia che la 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

NON usare la versione 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. È possibile eseguire query sulle versioni di Azure Media Player qui.

Nota

Dal momento che la 1.2.0 versione non è più necessaria per includere il percorso delle tecnologie di fallback (verrà automaticamente selezionata la posizione dal percorso relativo del file azuremediaplayer.min.js). È possibile modificare il percorso delle tecnologie di fallback aggiungendo lo script seguente negli <head> script precedenti.

Nota

A causa della natura dei plug-in Flash e Silverlight, i file json e xap devono essere ospitati in un dominio senza informazioni o dati sensibili. Questa operazione viene eseguita automaticamente con la versione ospitata dalla 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 quelli che supportano video HTML5. Oltre al markup di base, Azure Media Player richiede alcuni pezzi aggiuntivi.

  1. L'attributo <data-setup> nell'oggetto <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 la pelle predefinita ai controlli HTML5
  4. Include <source> due attributi obbligatori
    • src l'attributo può includere un file *.ism/manifesto 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/manifesto" è "application/vnd.ms-sstr+xml"
  5. L'attributo facoltativo<data-setup> nell'oggetto <source> indica ad Azure Media Player se sono presenti criteri di recapito univoci per il flusso da Servizi multimediali di Azure, inclusi, ma non limitati a, tipo di crittografia (AES o PlayReady, Widevine o FairPlay) e 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 che non copre le parti interessanti del poster. Se si preferisce centro il pulsante di riproduzione di grandi dimensioni, è possibile aggiungere un ulteriore elemento amp-big-play-centeredclass all'elemento <video> .

Installazione 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, si vuole configurare manualmente il lettore anziché basarsi sull'attributo di configurazione dei dati. A tale scopo, rimuovere prima di tutto l'attributo di installazione dei dati dal tag in modo che non ci sia confusione quando il giocatore viene inizializzato. Eseguire quindi il codice JavaScript seguente 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 della funzione è l'ID amp del tag video. Sostituirlo con il proprio.

Il secondo argomento è un oggetto opzioni. Consente di impostare opzioni aggiuntive come è possibile usare l'attributo di configurazione dei dati.

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

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"]);