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 属性将指向包含视频播放器的文档。此 URL 必须是相对的或定义了 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 编写