应该使用哪个代码片段将 videojs 与 amp-story 上的 amp-video-iframe 集成？

【问题标题】：Which code snippet should be used for integrating videojs with amp-video-iframe on amp-story?应该使用哪个代码片段将 videojs 与 amp-story 上的 amp-video-iframe 集成？
【发布时间】：2018-10-12 09:02:23
【问题描述】：

这两个代码块都应该使用吗？应该只使用一个代码块吗？如果有，是哪一个？

code per video.js

<video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    poster="//vjs.zencdn.net/v/oceans.png"
    data-setup='{}'>
  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
  <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    <a href="http://videojs.com/html5-video-support/" target="_blank">
      supports HTML5 video
    </a>
  </p>
</video>

code per amp-video-iframe

function onAmpIntegrationReady(ampIntegration) {
  var myVideo = document.querySelector('#my-video');
  ampIntegration.listenTo('videojs', myVideo);
}

【问题讨论】：

标签： video.js amp-html amp-story

【解决方案1】：

amp-story 不支持amp-video-iframe。支持的标签取决于您使用的层类型，但对于amp-story-grid-layer，它们可以在here 中找到。值得注意的是，如果您想播放视频，amp-video 是目前唯一的方法。由于amp-video-iframe 支持AMP 的视频接口，您可以查看this GitHub issue 来跟踪此功能的实现/支持。

但是，要回答您的问题（因为它与非故事的 AMP 页面相关）：两个 sn-ps 都是必需的。第一个代码 sn-p 将视频添加到页面，而第二个代码 sn-p 侦听诸如 play 和 pause 之类的事件，以将它们来回传递给 AMP 运行时。请注意，您需要确保 ID 相同（在您发布的代码中，HTML 通过 ID my-player 引用视频，而 JS 通过 ID my-video 引用视频)。

【讨论】：