amp-video-iframe

查看示範在 Playground 中開啟

簡介

透過 amp-video-iframe，您可以加入自訂建構的影片播放器，此播放器將取得 AMP Video Interface 中提供的所有功能

此範例將 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 函式庫指令碼之後，在 ` 標記中包含以下內容。

<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