Delen via

Volledige installatie van Azure Media Player

  • Artikel

Azure Media Player is eenvoudig in te stellen. Het duurt maar even voordat media-inhoud eenvoudig kan worden afgespeeld vanuit uw Azure Media Services-account. 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 uw pagina

Met Azure Media Player hebt u toegang tot de scripts vanuit de gehoste CDN-versie. Het wordt nu vaak aanbevolen JavaScript te plaatsen voordat de eindteksttag <body> 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 overal Azure Media Player JavaScript 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

U moet NIET de latest-versie in productie gebruiken, omdat dit op aanvraag kan worden gewijzigd. Vervang latest door een versie van Azure Media Player. Vervang bijvoorbeeld latest door 2.1.1. Azure Media Player-versies kunnen hier worden opgevraagd.

Notitie

Omdat de 1.2.0 release niet meer nodig is 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 door 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 in alle browsers werkt, niet alleen de browsers die HTML5-video ondersteunen. Naast de basismarkeringen heeft Azure Media Player een paar extra onderdelen nodig.

  1. Het kenmerk <data-setup> op de <video> vertelt Azure Media Player dat de video automatisch moet worden ingesteld wanneer de pagina gereed is en dat deze (in JSON-indeling) van het kenmerk wordt gelezen.
  2. Het kenmerk id: Moet worden gebruikt en uniek voor elke video op dezelfde pagina.
  3. Het kenmerk class bevat twee klassen:
    • azuremediaplayer past stijlen toe die vereist zijn voor de ui-functionaliteit van Azure Media Player
    • amp-default-skin past de standaardhuid toe op de HTML5-besturingselementen
  4. De <source> bevat twee vereiste kenmerken
    • src kenmerk kan een *.ism/manifest bestand van Azure Media Services worden toegevoegd, voegt Azure Media Player 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. De optionele<data-setup> kenmerk op de <source> vertelt Azure Media Player of er unieke leveringsbeleidsregels zijn voor de stream van Azure Media Services, waaronder, maar niet beperkt tot, versleutelingstype (AES of PlayReady, Widevine of FairPlay) en token.

Kenmerken, instellingen, bronnen en traceert 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 onderdelen 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 de 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 voor het instellen van gegevens. Hiervoor verwijdert u eerst het kenmerk voor het instellen van gegevens uit de tag, zodat er geen verwarring is wanneer de speler wordt geïnitialiseerd. Voer vervolgens het volgende JavaScript enige tijd uit nadat azure Media Player JavaScript is geladen en nadat de videotag is geladen in de 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"
    }]);

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

Het tweede argument is een optiesobject. Hiermee kunt u extra opties instellen, zoals u kunt met het kenmerk voor het instellen van gegevens.

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

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