Megosztás a következőn keresztül:

Az Azure Media Player teljes beállítása

  • Cikk

Az Azure Media Player egyszerűen beállítható. A médiatartalmak alapszintű lejátszása csak néhány percet vesz igénybe közvetlenül az Azure Media Services-fiókjából. minták a kiadás mintakönyvtárában is megtalálhatók.

1. lépés: A JavaScript- és CSS-fájlok belefoglalása a lap élére

Az Azure Media Playerrel a szkripteket a CDN által üzemeltetett verzióból érheti el. A JavaScriptet gyakran ajánlott a <head>helyett a törzscímke <body> elé helyezni, de az Azure Media Player tartalmaz egy "HTML5 Shiv"-t, amelyet a régebbi IE-verzióknak kell fejben tartaniuk ahhoz, hogy érvényes elemként tartsák a videocímkét.

Jegyzet

Ha már használ html5-ös shiv-t, például Modernizr az Azure Media Player JavaScriptet bárhol felveheti. Győződjön meg arról, hogy a Modernizr verziója tartalmazza a videóhoz készült shiv-t.

CDN-verzió

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

Fontos

NE éles környezetben használja a latest verziót, mivel ez igény szerint változhat. Cserélje le latest az Azure Media Player egyik verziójára. Cserélje le például a latest2.1.1. Az Azure Media Player-verziók lekérdezhetők itt.

Jegyzet

A 1.2.0 kiadás óta már nem szükséges a tartaléktechnikák helyét megadni (automatikusan felveszi a helyet a azuremediaplayer.min.js fájl relatív elérési útjáról). A tartalék technológiák helyét úgy módosíthatja, hogy hozzáadja a következő szkriptet a <head> a fenti szkriptek után.

Jegyzet

A Flash és a Silverlight beépülő modulok természetéből adódóan az swf- és xap-fájlokat bizalmas információk és adatok nélkül kell üzemeltetni egy tartományban – ezt a rendszer automatikusan gondoskodik Az Azure CDN által üzemeltetett verzióval.

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

2. lépés: HTML5 videócímke hozzáadása a laphoz

Az Azure Media Playerrel html5-ös videócímkével ágyazhat be egy videót. Az Azure Media Player ezután felolvassa a címkét, és minden böngészőben működik, nem csak a HTML5-videót támogatókban. Az alapszintű korrektúra mellett az Azure Media Playernek szüksége van néhány további darabra.

  1. A <video><data-setup> attribútuma arra utasítja az Azure Media Playert, hogy automatikusan állítsa be a videót, amikor a lap készen áll, és olvassa el az attribútum bármelyikét (JSON formátumban).
  2. A id attribútum: Az ugyanazon az oldalon található összes videóhoz használható és egyedi.
  3. A class attribútum két osztályt tartalmaz:
    • azuremediaplayer az Azure Media Player felhasználói felületének működéséhez szükséges stílusokat alkalmazza
    • amp-default-skin az alapértelmezett bőrt alkalmazza a HTML5-vezérlőkre
  4. A <source> két szükséges attribútumot tartalmaz
    • src attribútum tartalmazhat *.ism/manifest fájlt az Azure Media Servicesből, az Azure Media Player automatikusan hozzáadja a DASH, SMOOTH és HLS URL-címeit a lejátszóhoz
    • type attribútum a stream szükséges MIME-típusa. Az ".ism/manifest" társított MIME-típus "application/vnd.ms-sstr+xml"
  5. A választható<data-setup> attribútum a <source> tájékoztatja az Azure Media Playert arról, hogy vannak-e egyedi kézbesítési szabályzatok a streamhez az Azure Media Servicesből, beleértve, de nem kizárólagosan a titkosítás típusát (AES vagy PlayReady, Widevine vagy FairPlay) és a jogkivonatot.

Attribútumok, beállítások, források és sávok belefoglalása/kizárása pontosan úgy, ahogy a HTML5-videók esetében tenné.

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

Alapértelmezés szerint a nagy lejátszási gomb a bal felső sarokban található, így nem fedi le a plakát érdekes részeit. Ha a nagy lejátszási gombot szeretné középre helyezni, hozzáadhat egy további amp-big-play-centeredclass a <video> elemhez.

Alternatív beállítás dinamikusan betöltött HTML-hez

Ha a weblap vagy az alkalmazás dinamikusan tölti be a videócímkét (ajax, appendChild stb.), így előfordulhat, hogy az oldal betöltésekor nem létezik, az adatbeállítási attribútum használata helyett manuálisan kell beállítania a lejátszót. Ehhez először távolítsa el az adatbeállítási attribútumot a címkéről, hogy ne legyen zavar a lejátszó inicializálásakor. Ezután futtassa a következő JavaScriptet egy ideig az Azure Media Player JavaScript betöltése után, majd a videócímke dom-ba való betöltése után.

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

A amp függvény első argumentuma a videócímke azonosítója. Cserélje le a sajátja helyére.

A második argumentum egy beállításobjektum. Ez lehetővé teszi, hogy az adatbeállítási attribútumhoz hasonlóan további beállításokat is beállítson.

A harmadik argumentum egy "kész" visszahívás. Az Azure Media Player inicializálása után ezt a függvényt fogja hívni. A kész visszahívásban az "ez" objektum a játékospéldányra hivatkozik.

Elemazonosító használata helyett magára az elemre is hivatkozhat.


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