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> 标记中包含以下内容。

<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 编写