amp-video-iframe

查看 Demo 在 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 程式庫指令碼之後，在 ` 標籤中加入下列程式碼。

<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 撰寫