Volledige installatie van Azure Media Player

  • Artikel

Azure Media Player is eenvoudig in te stellen. Het duurt slechts enkele ogenblikpen om media-inhoud rechtstreeks vanuit uw Azure Media Services-account af te spelen. Voorbeelden zijn ook beschikbaar in de map met voorbeelden van de release.

Stap 1: Neem de JavaScript- en CSS-bestanden op in de kop van de pagina

Met Azure Media Player hebt u toegang tot de scripts vanuit de cdn-gehoste versie. Het wordt nu vaak aanbevolen om JavaScript te plaatsen vóór de tag <body> eindtekst in plaats van de <head>, maar Azure Media Player bevat een HTML5 Shiv, die in het hoofd moet staan voor oudere IE-versies om de videotag als een geldig element te respecteren.

Notitie

Als u al een HTML5-shiv zoals Modernizr gebruikt, kunt u de Azure Media Player JavaScript overal opnemen. Zorg er echter voor dat uw versie van Modernizr de shiv voor video bevat.

CDN-versie

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

Belangrijk

Gebruik NIET de latest versie in een productieomgeving, omdat deze op verzoek kan worden aangepast. Vervang door latest een versie van Azure Media Player. Vervang bijvoorbeeld latest door 2.1.1. Op Azure Media Player-versies kunt u hier een query uitvoeren.

Notitie

Sinds de 1.2.0 release is het niet meer nodig om de locatie op te nemen in de terugvaltechnologie (de locatie wordt automatisch opgehaald uit het relatieve pad van het azuremediaplayer.min.js-bestand). U kunt de locatie van de terugvaltechnologie wijzigen door het volgende script toe te voegen in de <head> na de bovenstaande scripts.

Notitie

Vanwege de aard van flash- en Silverlight-invoegtoepassingen moeten de swf- en xap-bestanden worden gehost op een domein zonder gevoelige informatie of gegevens. Dit wordt automatisch voor u geregeld met de azure CDN gehoste versie.

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

Stap 2: een HTML5-videotag toevoegen aan uw pagina

Met Azure Media Player kunt u een HTML5-videotag gebruiken om een video in te sluiten. Azure Media Player leest vervolgens de tag en zorgt ervoor dat deze werkt in alle browsers, niet alleen browsers die HTML5-video ondersteunen. Naast de basismarkeringen heeft Azure Media Player een paar extra onderdelen nodig.

  1. Het <data-setup> kenmerk op de <video> geeft Aan Azure Media Player door dat de video automatisch moet worden ingesteld wanneer de pagina klaar is en dat alle (in JSON-indeling) van het kenmerk moeten worden gelezen.
  2. Het id kenmerk: Moet worden gebruikt en uniek voor elke video op dezelfde pagina.
  3. Het class kenmerk bevat twee klassen:
    • azuremediaplayer past stijlen toe die vereist zijn voor de functionaliteit van de gebruikersinterface van Azure Media Player
    • amp-default-skin past de standaard skin toe op de HTML5-besturingselementen
  4. De <source> bevat twee vereiste kenmerken
    • src kenmerk kan een *.ism/manifest-bestand van Azure Media Services zijn toegevoegd. Azure Media Player voegt automatisch de URL's voor DASH, SMOOTH en HLS toe aan de speler
    • type kenmerk is het vereiste MIME-type van de stream. Het MIME-type dat is gekoppeld aan '.ism/manifest' is 'application/vnd.ms-sstr+xml'
  5. Het optionele<data-setup> kenmerk op de <source> geeft aan Azure Media Player door of er uniek leveringsbeleid is voor de stream van Azure Media Services, met inbegrip van, maar niet beperkt tot, het versleutelingstype (AES of PlayReady, Widevine of FairPlay) en token.

Kenmerken, instellingen, bronnen en tracks opnemen/uitsluiten, precies zoals u zou doen voor 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>

Standaard bevindt de grote afspeelknop zich in de linkerbovenhoek, zodat deze de interessante delen van de poster niet bedekt. Als u liever de grote afspeelknop wilt centreren, kunt u een extra amp-big-play-centeredclass toevoegen aan uw <video> element.

Alternatieve installatie voor dynamisch geladen HTML

Als uw webpagina of toepassing de videotag dynamisch laadt (ajax, appendChild, enzovoort), zodat deze mogelijk niet bestaat wanneer de pagina wordt geladen, moet u de speler handmatig instellen in plaats van te vertrouwen op het kenmerk gegevensinstellingen. Hiervoor verwijdert u eerst het kenmerk gegevensinstellingen uit de tag, zodat er geen verwarring ontstaat over wanneer de speler wordt geïnitialiseerd. Voer vervolgens het volgende JavaScript uit, enige tijd nadat de Azure Media Player JavaScript is geladen en nadat de videotag in de DOM is geladen.

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

Het eerste argument in de amp functie is de id van uw videotag. Vervang deze door uw eigen.

Het tweede argument is een optieobject. Hiermee kunt u extra opties instellen, net zoals u dat kunt met het kenmerk data-setup.

Het derde argument is een 'ready' callback. Zodra Azure Media Player is geïnitialiseerd, wordt deze functie aangeroepen. In de gereede callback verwijst 'dit'-object naar het spelerexemplaar.

In plaats van een element-id te gebruiken, kunt u ook een verwijzing naar het element zelf doorgeven.


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