Eksiksiz Azure Media Player kurulumu

  • Makale

Azure Media Player'ı ayarlamak kolaydır. Doğrudan Azure Media Services hesabınızdan medya içeriğinin temel kayıttan yürütülmesi yalnızca birkaç dakika sürer. Örnekler , sürümün samples dizininde de sağlanır.

1. Adım: JavaScript ve CSS dosyalarını sayfanızın başına ekleyin

Azure Media Player ile betiklere CDN tarafından barındırılan sürümden erişebilirsiniz. JavaScript'i yerine son gövde etiketinden önce koymak genellikle önerilir, ancak Azure Media Player video etiketine <body><head>geçerli bir öğe olarak saygı göstermek için eski IE sürümlerinin başında olması gereken bir 'HTML5 Shiv' içerir.

Not

Zaten Modernizr gibi bir HTML5 dolgusu kullanıyorsanız Azure Media Player JavaScript'i her yere ekleyebilirsiniz. Ancak Modernizr sürümünüzde video için dolgu bulunduğundan emin olun.

CDN Sürümü

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

Önemli

İsteğe latest bağlı olarak değiştirilme durumuna bağlı olduğundan, sürümü üretimde KULLANMAMALISINIZ. değerini Azure Media Player'ın bir sürümüyle değiştirin latest . Örneğin, değerini ile 2.1.1değiştirinlatest. Azure Media Player sürümleri buradan sorgulanabilir.

Not

Sürümden 1.2.0 bu yana, konumu geri dönüş tekniklerine eklemek artık gerekli değildir (konumu azuremediaplayer.min.js dosyasının göreli yolundan otomatik olarak alır). Yukarıdaki betiklerin arkasına aşağıdaki betiği <head> ekleyerek geri dönüş tekniklerinin konumunu değiştirebilirsiniz.

Not

Flash ve Silverlight eklentilerinin doğası gereği swf ve xap dosyalarının hassas bilgiler veya veriler olmadan bir etki alanında barındırılması gerekir. Bu, Azure CDN barındırılan sürümüyle sizin için otomatik olarak ele alınır.

    <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. Adım: Sayfanıza HTML5 video etiketi ekleme

Azure Media Player ile html5 video etiketi kullanarak video ekleyebilirsiniz. Ardından Azure Media Player etiketi okur ve yalnızca HTML5 videosunu destekleyen tarayıcılarda değil tüm tarayıcılarda çalışmasını sağlar. Temel işaretlemenin ötesinde, Azure Media Player'ın birkaç ek parçaya ihtiyacı vardır.

  1. <data-setup> üzerindeki <video> özniteliği, Azure Media Player'a sayfa hazır olduğunda videoyu otomatik olarak ayarlamasını ve özniteliğinden herhangi birini (JSON biçiminde) okumasını söyler.
  2. Özniteliği id : Aynı sayfadaki her video için kullanılmalıdır ve benzersiz olmalıdır.
  3. class özniteliği iki sınıf içerir:
    • azuremediaplayer Azure Media Player kullanıcı arabirimi işlevselliği için gereken stilleri uygular
    • amp-default-skin VARSAYıLAN dış görünümü HTML5 denetimlerine uygular
  4. iki <source> gerekli öznitelik içerir
    • src özniteliği Azure Media Services'ten *.ism/manifest dosyası ekleyebilir, Azure Media Player DASH, SMOOTH ve HLS URL'lerini otomatik olarak oynatıcıya ekler
    • type özniteliği, akışın gerekli MIME türüdür. ".ism/manifest" ile ilişkilendirilmiş MIME türü "application/vnd.ms-sstr+xml"
  5. üzerindeki <source>isteğe bağlı<data-setup> öznitelik, Azure Media Player'a Azure Media Services'ten gelen akış için şifreleme türü (AES veya PlayReady, Widevine veya FairPlay) ve belirteç dahil ancak bunlarla sınırlı olmamak üzere benzersiz teslim ilkeleri olup olmadığını bildirir.

Öznitelikleri, ayarları, kaynakları dahil edin/hariç tutun ve HTML5 videosunda yaptığınız gibi izler.

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

Varsayılan olarak, büyük oynatma düğmesi sol üst köşede bulunur, bu nedenle posterin ilginç kısımlarını kaplamaz. Büyük oynatma düğmesini ortalamayı tercih ederseniz, öğenize <video> bir ek amp-big-play-centeredclass ekleyebilirsiniz.

Dinamik olarak yüklenen HTML için alternatif Kurulum

Web sayfanız veya uygulamanız video etiketini dinamik olarak yüklerse (ajax, appendChild, vb.), böylece sayfa yüklendiğinde mevcut olmayabilir, veri kurulum özniteliğine güvenmek yerine oynatıcıyı el ile ayarlamak istersiniz. Bunu yapmak için önce etiketinden veri kurulumu özniteliğini kaldırın, böylece oynatıcı başlatıldığında herhangi bir karışıklık olmaz. Ardından, Azure Media Player JavaScript yüklendikten bir süre sonra ve video etiketi DOM'a yüklendikten sonra aşağıdaki JavaScript'i çalıştırı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"
    }]);

İşlevdeki amp ilk bağımsız değişken, video etiketinizin kimliğidir. Bunu kendinizle değiştirin.

İkinci bağımsız değişken bir seçenekler nesnesidir. Veri kurulumu özniteliğiyle yapabileceğiniz gibi ek seçenekler ayarlamanıza olanak tanır.

Üçüncü bağımsız değişken bir 'hazır' geri çağırmadır. Azure Media Player başlatıldıktan sonra bu işlevi çağırır. Hazır geri çağırmada 'this' nesnesi oyuncu örneğine başvurur.

Öğe kimliği kullanmak yerine, öğenin kendisine bir başvuru da geçirebilirsiniz.


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