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