Azure 媒體播放器完整設定

文章
07/16/2024

Azure 媒體播放器很容易設定。您只需要幾分鐘的時間，即可直接從 Azure 媒體服務帳戶取得媒體內容的基本播放。版本範例目錄中也會提供範例。

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

透過 Azure 媒體播放機，您可以從 CDN 裝載的版本存取腳本。現在建議先將 JavaScript 放在結尾本文標記之前，<body> 而不是 <head>，但 Azure 媒體播放機包含『HTML5 Shiv』，它必須位於舊版 IE 版本的前端，以將視訊標記視為有效的元素。

注意

如果您已經使用 html5 shiv，例如 Modernizr 您可以在任何地方包含 Azure 媒體播放機 JavaScript。不過，請確定您的Modernizr版本包含shiv for video。

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>

重要

您應該 NOT 在生產環境中使用 latest 版本，因為這可能會視需要變更。以 Azure 媒體播放器版本取代 latest。例如，將 latest 取代為 2.1.1。您可以從此處的查詢 Azure 媒體播放器版本，。

注意

由於 1.2.0 版本，不再需要包含後援技術的位置（它會自動從 azuremediaplayer.min.js 檔案的相對路徑中挑選位置）。您可以在上述腳本之後，在 <head> 中新增下列腳本，以修改後援技術的位置。

注意

由於 Flash 和 Silverlight 外掛程式的本質，因此應該在網域上裝載沒有敏感性資訊或數據，因此會自動為您處理 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 屬性可以包含 *.ism/manifest 檔案從 Azure 媒體服務新增，Azure 媒體播放機會自動將 DASH、SMOOTH 和 HLS 的 URL 新增至播放機
- type 屬性是數據流的必要MIME類型。與 「.ism/manifest」相關聯的 MIME 類型“application/vnd.ms-sstr+xml”
<source> 上的 選擇性<data-setup> 屬性會告訴 Azure 媒體播放機，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 函式中的第一個自變數是影片卷標的標識碼。將它取代為您自己的。

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

第三個自變數是「就緒」回呼。一旦 Azure 媒體播放器初始化之後，它會呼叫此函式。在就緒的回呼中，『this』物件是指播放器實例。

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


    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 的替代設定

更多資源