Azure 媒體播放器完整安裝

發行項
07/12/2023

Azure 媒體播放器很容易設定。只需要一些時間從 Azure 媒體服務帳戶取得基本的媒體內容播放。也會在版本的範例目錄中提供範例。

步驟 1：在頁面前端包含 JavaScript 和 CSS 檔案

透過 Azure 媒體播放器，您可以從 CDN 裝載的版本存取指令碼。現在通常會建議將 JavaScript 放置在結尾本文標記 <body> 前面，而不是 <head> 前面，但是 Azure 媒體播放器包含 'HTML5 Shiv'，在舊版 IE 版本中需要在頁首，才能讓影片標記成為有效的元素。

注意

如果您已經使用 HTML5 shiv，例如 Modernizr，您可以在任何位置包含 Azure 媒體播放器 JavaScript。不過，請確定您的 Modernizr 版本包含適用於影片的 shiv。

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>

重要事項

您不應在生產環境中使用 latest 版本，因為此版本將依需求而變動。將 latest 取代為 Azure 媒體播放器的版本。例如，以 2.1.1 取代 latest。您可以在這裡查詢 Azure 媒體播放器的版本。

注意

從 1.2.0 版本開始，就不再需要包含後援技術的位置 (會自動從 azuremediaplayer.min.js 檔案的相對路徑挑選位置)。您可以藉由在 <head> 中於上述指令碼後面新增下列指令碼，修改後援技術的位置。

注意

由於 Flash 和 Silverlight 外掛程式的本質，因此應該在網域上裝載 swf 和 xap 檔案，沒有任何敏感性資訊或資料，系統會自動為您處理 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>

步驟 2：將 HTML5 影片標記新增至您的頁面

透過 Azure 媒體播放器，您可以使用 HTML5 影片標記來內嵌影片。 Azure 媒體播放器接著會讀取標記，使其在所有瀏覽器中運作，而不只是支援 HTML5 視訊的瀏覽器。除了基本標記之外，Azure 媒體播放器還需要一些額外的部分。

<video> 上的 <data-setup> 屬性會告訴 Azure 媒體播放器在頁面就緒時，自動設定影片，並且從屬性讀取任何影片 (JSON 格式)。
id 屬性：應該使用，並且針對相同頁面上的每部影片是唯一的。
class 屬性包含兩個類別：
- azuremediaplayer 會套用 Azure 媒體播放器 UI 功能所需的樣式
- amp-default-skin 會將預設面板套用至 HTML5 控制項
<source> 包含兩個必要屬性
- src 屬性可以包含從 Azure 媒體服務新增的 *.ism/manifest 檔案，Azure 媒體播放器會自動將 DASH、SMOOTH 和 HLS 的 URL 新增至播放器
- type 屬性是串流的必要 MIME 類型。與 ".ism/manifest" 相關聯的 MIME 類型是 "application/vnd.ms-sstr+xml"
<source> 上的選用<data-setup> 屬性會告訴 Azure 媒體播放器是否有任何來自 Azure 媒體服務的串流的唯一傳遞原則，包括但不限於加密類型 (AES 或 PlayReady、Widevine 或 FairPlay) 和權杖。

包含/排除屬性、設定、來源和追蹤，與 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>

根據預設，大型播放按鈕位於左上角，因此不會遮蔽海報的有趣部分。如果您想要將大型播放按鈕置中，您可以將額外的 amp-big-play-centeredclass 新增至 <video> 元素。

動態載入 HTML 的替代設定

如果您的網頁或應用程式以動態方式載入影片標記 (ajax、appendChild 等)，當頁面載入時可能不存在，您會想要手動設定播放器，而不是依賴資料設定屬性。若要這樣做，請先從標記中移除資料設定屬性，以便在播放器初始化時不會混淆。接下來，在 Azure 媒體播放器 JavaScript 載入之後，以及在影片標記載入 DOM 之後，執行下列 JavaScript。

    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 函式中的第一個引數是影片標記的識別碼。將其取代為您自己的識別碼。

第二個引數是選項物件。可讓您設定其他選項，例如您可以使用資料設定屬性。

第三個引數是「就緒」回呼。一旦 Azure 媒體播放器初始化，就會呼叫此函式。在就緒回呼中，「此」物件是指播放器執行個體。

您也可以傳遞元素本身的參考，而不是使用元素識別碼。


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

Azure 媒體播放器完整安裝

步驟 1：在頁面前端包含 JavaScript 和 CSS 檔案

CDN 版本

步驟 2：將 HTML5 影片標記新增至您的頁面

動態載入 HTML 的替代設定

其他資源