0

Should both of these code blocks be used? Should only one code block be used? If so, which one?

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

1 回答 1

1

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

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

于 2018-10-12T01:02:23.663 回答