Fullständig installation av Azure Media Player

  • Artikel

Azure Media Player är enkelt att konfigurera. Det tar bara en stund att få grundläggande uppspelning av medieinnehåll direkt från ditt Azure Media Services-konto. Exempel finns också i exempelkatalogen för versionen.

Steg 1: Inkludera JavaScript- och CSS-filerna i sidans huvud

Med Azure Media Player kan du komma åt skripten från den CDN-värdbaserade versionen. Vi rekommenderar ofta nu att du placerar JavaScript före sluttexttaggen <body> i stället för <head>, men Azure Media Player innehåller en "HTML5 Shiv", som måste vara i huvudet för att äldre IE-versioner ska respektera videotaggen som ett giltigt element.

Not

Om du redan använder en HTML5-shiv som Modernizr kan du inkludera Azure Media Player JavaScript var som helst. Se dock till att din version av Modernizr innehåller shiv för video.

CDN-version

    <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>

Viktig

Du bör INTE använda den latest versionen i produktion, eftersom detta kan komma att ändras på begäran. Ersätt latest med en version av Azure Media Player. Ersätt till exempel latest med 2.1.1. Azure Media Player-versioner kan efterfrågas från här.

Not

Eftersom 1.2.0 versionen krävs det inte längre att platsen inkluderas i reservteknikerna (platsen hämtas automatiskt från den relativa sökvägen för azuremediaplayer.min.js-filen). Du kan ändra platsen för reservteknikerna genom att lägga till följande skript i <head> efter ovanstående skript.

Not

På grund av flash- och Silverlight-plugin-program bör swf- och xap-filerna finnas på en domän utan känslig information eller data . Detta tas automatiskt hand om dig med den Azure CDN-värdbaserade versionen.

    <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>

Steg 2: Lägg till en HTML5-videotagg på sidan

Med Azure Media Player kan du använda en HTML5-videotagg för att bädda in en video. Azure Media Player läser sedan taggen och får den att fungera i alla webbläsare, inte bara de som stöder HTML5-video. Utöver den grundläggande markeringen behöver Azure Media Player några extra bitar.

  1. Attributet <data-setup> på <video> instruerar Azure Media Player att automatiskt konfigurera videon när sidan är klar och läsa alla (i JSON-format) från attributet.
  2. Attributet id: Ska användas och vara unikt för varje video på samma sida.
  3. Attributet class innehåller två klasser:
    • azuremediaplayer använder formatmallar som krävs för Azure Media Player-användargränssnittsfunktioner
    • amp-default-skin tillämpar standardskalet på HTML5-kontrollerna
  4. <source> innehåller två obligatoriska attribut
    • src attribut kan innehålla en *.ism/manifest fil från Azure Media Services läggs till lägger Azure Media Player automatiskt till URL:er för DASH, SMOOTH och HLS till spelaren
    • type attributet är den MIME-typ som krävs för strömmen. MIME-typen som är associerad med ".ism/manifest" är "application/vnd.ms-sstr+xml"
  5. Attributet valfria<data-setup> på <source> anger för Azure Media Player om det finns några unika leveransprinciper för strömmen från Azure Media Services, inklusive, men inte begränsat till, krypteringstyp (AES eller PlayReady, Widevine eller FairPlay) och token.

Inkludera/exkludera attribut, inställningar, källor och spårar precis som för HTML5-video.

    <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>

Som standard finns den stora uppspelningsknappen i det övre vänstra hörnet så att den inte täcker de intressanta delarna av affischen. Om du föredrar att centrera den stora uppspelningsknappen kan du lägga till ytterligare en amp-big-play-centeredclass till ditt <video> element.

Alternativ installation för dynamiskt inläst HTML

Om din webbsida eller ditt program läser in videotaggen dynamiskt (ajax, appendChild osv.), så att den kanske inte finns när sidan läses in, vill du konfigurera spelaren manuellt i stället för att förlita dig på attributet för datakonfiguration. Det gör du genom att först ta bort datakonfigurationsattributet från taggen så att det inte uppstår någon förvirring när spelaren initieras. Kör sedan följande JavaScript en tid efter att Azure Media Player JavaScript har lästs in och efter att videotaggen har lästs in i 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"
    }]);

Det första argumentet i funktionen amp är ID för din videotagg. Ersätt den med din egen.

Det andra argumentet är ett alternativobjekt. Det gör att du kan ange ytterligare alternativ som du kan med datakonfigurationsattributet.

Det tredje argumentet är ett "redo" återanrop. När Azure Media Player har initierats anropas den här funktionen. I det redo återanropet refererar det här objektet till spelarinstansen.

I stället för att använda ett element-ID kan du också skicka en referens till själva elementet.


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