Udostępnij za pośrednictwem

Pełna konfiguracja usługi Azure Media Player

  • Artykuł

Usługa Azure Media Player jest łatwa do skonfigurowania. Pobranie podstawowego odtwarzania zawartości multimedialnej bezpośrednio z konta usługi Azure Media Services zajmuje kilka chwil. Przykłady są również dostępne w katalogu przykładów wydania.

Krok 1. Dołączanie plików JavaScript i CSS do nagłówka strony

Za pomocą usługi Azure Media Player możesz uzyskać dostęp do skryptów z hostowanej wersji usługi CDN. Często zaleca się teraz umieszczenie kodu JavaScript przed tagiem treści końcowej <body> zamiast <head>, ale usługa Azure Media Player zawiera element "HTML5 Shiv", który musi znajdować się w głowie dla starszych wersji programu IE, aby szanować tag wideo jako prawidłowy element.

Nuta

Jeśli już używasz shiv HTML5, takich jak Modernizr możesz dołączyć język JavaScript usługi Azure Media Player w dowolnym miejscu. Upewnij się jednak, że twoja wersja modernizatora zawiera shiv for video.

Wersja usługi 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>

Ważny

Nie należy używać wersji latest w środowisku produkcyjnym, ponieważ może to ulec zmianie na żądanie. Zastąp latest wersją usługi Azure Media Player. Na przykład zastąp latest2.1.1. Wersje usługi Azure Media Player można wykonywać w tutaj.

Nuta

Ponieważ wersja 1.2.0 nie jest już wymagana do uwzględnienia lokalizacji w technologiach rezerwowych (automatycznie pobierze lokalizację ze ścieżki względnej pliku azuremediaplayer.min.js). Lokalizację technologii rezerwowych można zmodyfikować, dodając następujący skrypt w <head> po powyższych skryptach.

Nuta

Ze względu na charakter wtyczek Flash i Silverlight pliki i xap powinny być hostowane w domenie bez żadnych poufnych informacji lub danych — jest to automatycznie dbane o Ciebie z hostowaną wersją usługi Azure CDN.

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

Krok 2. Dodawanie tagu wideo HTML5 do strony

Za pomocą usługi Azure Media Player możesz użyć tagu wideo HTML5, aby osadzić film wideo. Usługa Azure Media Player odczytuje tag i sprawi, że będzie działać we wszystkich przeglądarkach, a nie tylko w tych, które obsługują wideo HTML5. Poza podstawowym znacznikiem usługa Azure Media Player potrzebuje kilku dodatkowych elementów.

  1. Atrybut <data-setup> na <video> nakazuje usłudze Azure Media Player automatyczne skonfigurowanie wideo, gdy strona jest gotowa, i odczytaj dowolne (w formacie JSON) z atrybutu.
  2. Atrybut id: powinien być używany i unikatowy dla każdego filmu wideo na tej samej stronie.
  3. Atrybut class zawiera dwie klasy:
    • azuremediaplayer stosuje style wymagane dla funkcji interfejsu użytkownika usługi Azure Media Player
    • amp-default-skin stosuje domyślną skórę do kontrolek HTML5
  4. <source> zawiera dwa wymagane atrybuty
    • src atrybut może zawierać *.ism/manifest pliku z usługi Azure Media Services, usługa Azure Media Player automatycznie dodaje adresy URL interfejsu DASH, SMOOTH i HLS do odtwarzacza
    • type atrybut jest wymaganym typem MIME strumienia. Typ MIME skojarzony z ".ism/manifest" to "application/vnd.ms-sstr+xml"
  5. Opcjonalny atrybut <data-setup> w <source> informuje usługę Azure Media Player, czy istnieją jakiekolwiek unikatowe zasady dostarczania strumienia z usługi Azure Media Services, w tym typ szyfrowania (AES lub PlayReady, Widevine lub FairPlay) i token.

Dołączanie/wykluczanie atrybutów, ustawień, źródeł i ścieżek dokładnie tak, jak w przypadku wideo 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>

Domyślnie duży przycisk odtwarzania znajduje się w lewym górnym rogu, więc nie zakrywa interesujących części plakatu. Jeśli wolisz wyśrodkować duży przycisk odtwarzania, możesz dodać dodatkowy amp-big-play-centeredclass do elementu <video>.

Alternatywna konfiguracja dynamicznego ładowania kodu HTML

Jeśli strona internetowa lub aplikacja ładuje tag wideo dynamicznie (ajax, appendChild itp.), aby nie istniał, gdy strona zostanie załadowana, należy ręcznie skonfigurować odtwarzacz zamiast polegać na atrybucie data-setup. Aby to zrobić, najpierw usuń atrybut konfiguracji danych z tagu, aby nie było żadnych pomyłek w przypadku zainicjowania odtwarzacza. Następnie uruchom następujący kod JavaScript jakiś czas po załadowaniu kodu JavaScript usługi Azure Media Player i załadowaniu tagu wideo do modelu 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"
    }]);

Pierwszym argumentem funkcji amp jest identyfikator tagu wideo. Zastąp go własnym.

Drugi argument jest obiektem opcji. Umożliwia ustawienie dodatkowych opcji, takich jak atrybut konfiguracji danych.

Trzeci argument to wywołanie zwrotne "gotowe". Po zainicjowaniu usługi Azure Media Player wywoła tę funkcję. W gotowym wywołaniu zwrotnym obiekt "this" odwołuje się do wystąpienia odtwarzacza.

Zamiast używać identyfikatora elementu, można również przekazać odwołanie do samego elementu.


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