amp-video-iframe

檢視示範在 Playground 中開啟

簡介

使用 amp-video-iframe，您可以加入自訂的影片播放器，以取得 AMP 影片介面中提供的所有功能

這個範例整合了 AMP 頁面和一個使用 Video.JS 框架的簡單自訂播放器。您可以按照元件文件中的整合說明，使用任何框架或自訂播放器

您可以在這裡查看範例的實際運作情況。

設定

加入 amp-video-iframe 擴充功能指令碼。

<script async custom-element="amp-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></script>

基本用法

設定 autoplay 屬性，以便在使用者將影片捲動到視野範圍內時自動開始播放。src 屬性會指向包含影片播放器的文件。這個網址必須是相對網址或已定義 HTTPS。您可以在這裡閱讀所參考文件的原始碼。

<amp-video-iframe id="myVideo" src="/static/samples/files/amp-video-iframe-videojs.html" width="720" height="405" layout="responsive" autoplay>
  <amp-img placeholder src="/static/samples/img/amp-video-iframe-sample-placeholder.jpg" layout="fill">
  </amp-img>
</amp-video-iframe>

影片 iframe 整合

在框架中的文件中，您必須加入程式庫和簡單的整合回呼，以便主機與您的框架通訊。在您的 <head> 標記中加入 amp-video-iframe 框架整合程式庫。

<script async src="https://cdn.ampproject.org/video-iframe-integration-v0.js"></script>

撰寫整合指令碼，以將 AMP 文件與這個框架通訊。整合程式庫原生支援 Video.JS (和 JwPlayer)，因此這項工作非常簡單。如果您未使用 Video.JS 或 JwPlayer，則可以使用程式庫提供的工具 (如這裡所述)。對於 Video.JS，請在您的視訊和 Video.JS 程式庫指令碼之後，在 ` tag 中加入以下內容。

<script>
  // Wait for API to initialize
  (window.AmpVideoIframe = window.AmpVideoIframe || [])
      .push(function(ampIntegration) {
        var myVideo = document.querySelector('#my-video');

        // Listen to element that uses Video.JS.
        ampIntegration.listenTo('videojs', myVideo);
      });
</script>

需要進一步說明嗎？

如果本頁的說明沒有涵蓋您的所有問題，歡迎您與其他 AMP 使用者聯絡，討論您的確切使用案例。

前往 Stack Overflow

未說明的特色功能？

AMP 專案大力鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別感興趣的問題提供一次性的貢獻。

在 GitHub 上編輯範例

由 @alanorozco 撰寫