Azure Media Player tam 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. Örnekleri 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 <head>yerine son gövde etiketinden <body> önce yerleştirmeniz önerilir, ancak Azure Media Player'da eski IE sürümlerinin video etiketine geçerli bir öğe olarak saygı duyması için başında olması gereken bir 'HTML5 Shiv' bulunur.

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

DEĞİl üretimde latest sürümünü kullanmanız gerekir, bu durum isteğe bağlı olarak değişebilir. latest'i Azure Media Player sürümüyle değiştirin. Örneğin, latest yerine 2.1.1yazın. Azure Media Player sürümleri buradasorgulanabilir.

Not

1.2.0 sürümünden 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 betiklerden sonra <head> aşağıdaki betiği 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 halledilir.

    <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, video eklemek için HTML5 video etiketi kullanabilirsiniz. Ardından Azure Media Player etiketi okur ve yalnızca HTML5 videosunu destekleyenler 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. <video> <data-setup> özniteliği, Azure Media Player'a sayfa hazır olduğunda videoyu otomatik olarak ayarlamasını ve özniteliğinden herhangi bir (JSON biçiminde) okumasını söyler.
  2. id özniteliği: 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. <source> iki 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. <source> isteğe bağlı<data-setup> özniteliği, 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ı ve parçaları TAM OLARAK HTML5 videosunda yaptığınız gibi dahil edin/hariç tutun.

    <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, <video> öğenize ek bir 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 etiketten veri kurulumu özniteliğini kaldırın, böylece yürütücü başlatıldığında herhangi bir karışıklık yaşanmaz. 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"
    }]);

amp işlevindeki ilk bağımsız değişken, video etiketinizin kimliğidir. Kendi cihazınızla 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"]);