使用外部視訊的 AMP

在本主題中，您將學習如何將加速移動頁面（AMP）與Brightcove Player和外部非視頻雲視頻一起使用。

概覽

加速行動網頁是一個 Google 專案，旨在讓「在裝置和分銷平台之間建立一致的快速、美觀和高效能的網站和廣告」。您可以在 AMP 中使用 Brightcove 播放器，因為該項目包含一個amp-brightcove組件，允許發布商將布萊特灣播放器嵌入 AMP HTML 文檔中。本示例使用了一個自定義插件，該插件接受通過以下網址傳遞給它的外部（非視頻雲）視頻的URL：amp-brightcove使用自定義組件data-param-video-url屬性。

範例

以下是一個範例 AMP HTML 頁面，其中包括一個布萊特灣播放器。播放器正常運作，所以 HTML 是這個示例的有趣部分。本文件稍後會檢查 HTML 程式碼。

看筆AMP-Brightcove播放器-外部視頻通過Brightcove學習服務（ @ rcrooks1969） 上密碼筆。

來自 AMP 的資源

AMP 項目開發了一個特殊的amp-brightcove組件，顯示布萊特灣播放器。該組件詳細說明在安培亮口文件中。

AMP 提供了一個示例amp-brightcove實現，詳細信息在以下文檔中：

  • amp-brightcove
  • 逐個範例
  • <a href="https://playground.amp.dev/?url=https://amp.dev/documentation/examples/components/amp-brightcove/>AMP 遊樂場</a></li> </ul > </section> <section class="bcls-section">

    播放程式組態

    Brightcove提供了一個插件來增強Brightcove Player的AMP使用。該插件增加了對AMP視頻接口API的支持，該API啟用了一些高級功能：

    • 與擴充分析整合：允許根據 AMP 頁面網域追蹤第三方分析的檢視次數。
    • 與安培綁定集成：播放可由 AMP 頁面中的其他元素控制。

    沒有插件的播放器仍可以在AMP中工作，但沒有該功能。

    外掛程式安裝

    與所有 Brightcove 播放器插件一樣，您需要插件的名稱和 URL 到插件的 JavaScript，這是這裡提供的（這個插件的使用不需要 CSS 文件）：

    外掛程式名稱

      ampSupport

    網址

      //players.brightcove.net/videojs-amp-support/1/videojs-amp-support.js

HTML頁面代碼檢查

下面顯示了上述CodePen示例的HTML頁面代碼（下一節將詳細介紹插件代碼）。代碼的完整解釋由 AMP 在鏈接到上面的文檔中提供。在下面的列表中有一些需要注意的技巧/陷阱：

  • 第十四行：您可以新增單一style標籤，但必須包含amp-custom屬性。
  • 第26行：不要美化代碼。樣板 CSS 是需要由 AMP 提供。
  • 第 42 行：外部視頻的URL在此處傳遞。請記住，由於該名稱將從iframe的src URL，名稱為videoUrl。
  • 第 43 行：的data-video-id必須存在，但在使用外部視頻時未分配值。
  • 第 44 行：width和height屬性決定了嵌入在自適應版面中的播放器的外觀比例。
  <!--
    ## Introduction
  
    The `amp-brightcove` component allows embedding a Brightcove
    [Video Cloud](https://www.brightcove.com/en/online-video-platform) or
    [Perform](https://www.brightcove.com/en/perform) player.
  -->
  <!-- -->
  <!doctype html>
  <html ⚡>
  <head>
    <meta charset="utf-8">
    <title>amp-brightcove</title>
    <style amp-custom>
      .player-container {
        width: 640px;
        height: 360px;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <!-- ## Setup -->
    <!-- Import the Brightcove component in the header. -->
    <script async custom-element="amp-brightcove" src="https://cdn.ampproject.org/v0/amp-brightcove-0.1.js"></script>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <link rel="canonical" href="https://ampbyexample.com/components/amp-brightcove/">
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  
  
  </head>
  <body>
  
    <!-- ## Basic Usage -->
    <!--
      A responsive brightcove video. The required data is `data-account` and `data-video-id`. Other
      supported parameters are `data-player-id`, `data-embed` and `data-playlist-id`.
    -->
    <div class="player-container">
      <amp-brightcove
        data-account="3676484087001"
        data-player-id="ByrhJWAPf"
        layout="responsive"
        data-param-video-url="//solutions.brightcove.com/bcls/videos/calm-day-oregon-coast.mp4"
        data-video-id
        width="16" height="9">
      </amp-brightcove>
    </div>
  
  
  </body>
  </html>

插件代碼檢查

AMP運作的方式是amp-brightcove組件創建Brightcove Player的iframe實現。iframe的網址中將是自定義屬性，如下所示：

  <iframe frameborder="0" allowfullscreen="true" src="https://players.brightcove.net/3676484087001/ByrhJWAPf_default/index.html?videoUrl=%2F%2Fsolutions.brightcove.com%2Fbcls%2Fvideos%2Fcalm-day-oregon-coast.mp4"; class="i-amphtml-fill-content" kwframeid="1"></iframe>

如果您在iframe代碼中滾動，則會看到此處顯示的查詢字符串：

AMP iframe源

請注意，查詢字符串名稱為videoUrl。另請注意，URL已被URL編碼。這兩個問題都將反映在插件代碼中，如下所示：

  • 第21-38行：查找與查詢字符串關聯的值的輔助函數，該輔助函數作為參數傳遞給該函數。
  • 第 7 行：檢索值videoUrl使用輔助函數查詢字符串。
  • 第 8 行：使用JavaScript的decodeURIComponent()獲取視頻有效URL的方法。
  • 第11-14行：使用解碼的URL並將視頻放置在播放器中。如果您要使用MP4以外的視頻格式，則您要么需要傳遞正確的type值，或編寫邏輯以讀取視頻的擴展名並分配正確的值。
  • 第七至十九號線：當然不是必須的，但是如果您希望視頻在啟動時播放，則可以使用此代碼。
  videojs.registerPlugin('ampPassVideo', function() {
    var myPlayer = this,
      encodedVideoQueryParam,
      decodedVideoQueryParam;
  
    // Get the query string and un-URL encode it
    encodedVideoQueryParam = getQuerystring('videoUrl');
    decodedVideoQueryParam = decodeURIComponent(encodedVideoQueryParam);
  
    // Load the video into the player
    myPlayer.src({
      'type': 'video/mp4',
      'src': decodedVideoQueryParam
    });
  
    // On loadedmetadata event, play the video
    myPlayer.on('loadedmetadata', function(){
      myPlayer.play();
    });
  
    /*
     * usage: foo = getQuerystring("bctid", null);
     * foo will be equal to value of query param bctid
     * note that the default_ parameter is what you will get back
     * if the key isn’t found
     */
    function getQuerystring(key, default_) {
      var regex, qs;
      if (default_ == null) default_ = "";
      key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
      regex = new RegExp("[\\?&]" + key + "=([^&#]*)");
      qs = regex.exec(window.location.href);
      if (qs === null) {
        return default_;
      } else {
        return qs[1];
      }
    }
  });

您可以使用以下方式將此插件分配給播放器工作室或播放器管理API。

功能

雖然 AMP 文件中討論了一些特別重要的功能，這裡有一些特別重要的功能：

自訂參數

您可能想要將其他資訊傳遞給您的播放器，以便您的外掛程式存取。您可以通過在必須命名的amp-brightcove元素上添加額外的屬性來完成此操作data-param-*，其中*是屬性的名稱。

參數被傳遞為駱駝套裝的屬性名稱附加到播放器 URL。鍵和值是 URL 編碼的。例如：

  • data-param-language="de"變成&language=de
  • data-param-ad-vars="key:val;key2:val2"變成&adVars=key%3Aval%3Bkey2%3Aval2

外部反向連結支援

布萊特灣播放器 v6.25.0+ 支持在 iframe 上設置任意引用。AMP 組件現在支持通過其自己的反向連結傳遞給玩家，通過添加一個referrer="EXTERNAL_REFERRER"屬性它們的放大亮度嵌入。

外部參照者是 AMP 自己的宏-有關更多信息，請參閱 https://github.com/ampproject/amphtml/blob/19135a3aac7813a9ff263a9f863fe35aeb316582/spec/amp-var-substitutions.md#external-referrer 。

AMP 分析

AMP 文件中可使用 Amp-Analytics 元件，以追蹤任何任意分析的資料。如果發佈商希望包含視頻活動，他們現在可以這樣做。

AMP 關於 AMP 分析語法的文檔（這很麻煩）在這裡： https://www.ampproject.org/docs/reference/components/amp-analytics 。特別是視訊分析： https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-video-analytics.md 。

有一個範例可用，追蹤到 example.com ，因此您會在網路索引標籤中看到信標為錯誤： http://solutions.brightcove.com/bclifford/ampexamples/analytics.html 。

AMP 繫結

AMP 綁定是 AMP 的 API 組件之間的交互。在基本層面上，它允許您擁有播放器外部的東西來控制播放。例如，以下代碼將播放視頻，其中myPlayer是個id amp-brightcove 播放器。

    <button on="tap:myPlayer.play">Play</button>

AMP 不信任視頻事件，所以你目前無法做一些更有用的事情，例如在視頻端。這裡有一個例子： http://solutions.brightcove.com/bclifford/ampexamples/bind.html 。