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 整合

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

<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