Share via

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 tylko kilka minut. Przykłady są również udostępniane w katalogu samples wydania.

Krok 1. Uwzględnianie plików JavaScript i CSS w nagłówku strony

Za pomocą usługi Azure Media Player można uzyskać dostęp do skryptów z hostowanej wersji usługi CDN. Często zaleca się teraz umieszczenie kodu JavaScript przed tagiem <body> treści końcowej 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 przestrzegać tagu wideo jako prawidłowego elementu.

Uwaga

Jeśli już używasz podkładki 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żne

Nie należy używać latest wersji w środowisku produkcyjnym, ponieważ może to ulec zmianie na żądanie. Zastąp latest element wersją usługi Azure Media Player. Na przykład zastąp ciąg latest ciągiem 2.1.1. W tym miejscu można wykonywać zapytania dotyczące wersji usługi Azure Media Player.

Uwaga

1.2.0 Ponieważ wersja nie jest już wymagana, aby uwzględnić lokalizację 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> pliku po powyższych skryptach.

Uwaga

Ze względu na charakter wtyczek Flash i Silverlight pliki w formacie winer i xap powinny być hostowane w domenie bez poufnych informacji lub danych — jest to automatycznie obsługiwane 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żna użyć tagu wideo HTML5 do osadzenia wideo. Usługa Azure Media Player odczyta tag i sprawi, że będzie działać we wszystkich przeglądarkach, a nie tylko w tych, które obsługują wideo HTML5. Poza podstawowymi adiustacjami usługa Azure Media Player potrzebuje kilku dodatkowych elementów.

  1. Atrybut <data-setup> w obiekcie <video> informuje usługę Azure Media Player o automatycznym skonfigurowaniu wideo, gdy strona jest gotowa, i odczytuje dowolny (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. Element <source> zawiera dwa wymagane atrybuty
    • src Atrybut może zawierać plik *.ism/manifest z usługi Azure Media Services, usługa Azure Media Player automatycznie dodaje adresy URL dash, SMOOTH i HLS do odtwarzacza
    • type atrybut jest wymaganym typem MIME strumienia. Typ MIME skojarzony z plikiem ".ism/manifest" to "application/vnd.ms-sstr+xml"
  5. Opcjonalny<data-setup> atrybut polecenia informuje usługę <source> Azure Media Player, czy istnieją jakiekolwiek unikatowe zasady dostarczania dla strumienia z usługi Azure Media Services, w tym, ale nie tylko, typ szyfrowania (AES lub PlayReady, Widevine lub FairPlay) i token.

Uwzględnij/wyklucz atrybuty, ustawienia, źródła i śledzi 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 ukrywa interesujących części plakatu. Jeśli wolisz wyśrodkować duży przycisk odtwarzania, możesz dodać dodatkowy amp-big-play-centeredclass element <video> .

Alternatywna konfiguracja dynamicznie ładowanego kodu HTML

Jeśli strona internetowa lub aplikacja ładuje tag wideo dynamicznie (ajax, appendChild itp.), aby nie istniała, gdy strona zostanie załadowana, należy ręcznie skonfigurować odtwarzacz zamiast polegać na atrybucie konfiguracji danych. W tym celu najpierw usuń atrybut data-setup z tagu, aby nie było pomyłek podczas inicjowania gracza. 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 amp w funkcji jest identyfikator tagu wideo. Zastąp go własnym.

Drugim argumentem jest obiekt options. Umożliwia ustawienie dodatkowych opcji, takich jak można za pomocą atrybutu data-setup.

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