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

Question

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

<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);
}

Answer 1

amp-video-iframe 不受 amp-story 支持。支持的标签取决于您使用的图层类型，但是对于 amp-story-grid-layer 可以找到它们 here. Notably, if you are looking to play video, amp-video is currently the only way to do it. Since amp-video-iframe supports AMP's video interface, you can see this GitHub issue 以跟踪此功能的 implementation/support。

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

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

Which code snippet should be used for integrating videojs with amp-video-iframe on amp-story?

video.js

amp-html

amp-story