Question

在以下情况下，<div>标签如何与amp-story交互？哪些场景根据amp-story在快速加载，没有AMP错误等情况下的工作方式运行，为什么？

方案1：amp-story之外的div标签

<div>
  <div class="amp-video-container">
    <amp-story-page id="page-1">
      <amp-story-grid-layer template="fill">
            <amp-video autoplay
                loop
                width="720"
                height="960"
                poster="https://ampbyexample.com/img/story_video_dog_cover.jpg"
                layout="responsive">
                <source src="https://ampbyexample.com/video/story_video_dog.mp4"
                type="video/mp4">
            </amp-video>
      </amp-story-grid-layer>
    </amp-story-page>  
  </div>
</div>

方案2：amp-story-page中的div标签

<amp-story-page id="page-1">
    <div>
        <div class="amp-video-container">
            <amp-story-grid-layer template="fill">
                <amp-video autoplay
                loop
                width="720"
                height="960"
                poster="https://ampbyexample.com/img/story_video_dog_cover.jpg"
                layout="responsive">
                <source src="https://ampbyexample.com/video/story_video_dog.mp4"
                type="video/mp4">
                </amp-video>
            </amp-story-grid-layer>
        </div>
    </div>
</amp-story-page>

方案3：amp-story-grid-layer内的div标签

<amp-story-page id="page-1">
    <amp-story-grid-layer template="fill">
        <div>
            <div class="amp-video-container">
                <amp-video autoplay
                loop
                width="720"
                height="960"
                poster="https://ampbyexample.com/img/story_video_dog_cover.jpg"
                layout="responsive">
                <source src="https://ampbyexample.com/video/story_video_dog.mp4"
                type="video/mp4">
                </amp-video>
            </div>
        </div>
    </amp-story-grid-layer>
</amp-story-page>

参考 https://xbyexample.appspot.com/advanced/video_carousels_with_amp-carousel/

Answer 1

方案1和2无效。故事中的所有内容都必须在一个层中，因此场景3是唯一符合此条件的内容。

要检查您的文档是否为有效的AMP，请参阅http://validator.ampproject.org/。有关AMP故事的结构的更多信息，请参见understanding the parts of an AMP story。

在以下情况下，<div>标签如何与amp-story交互？

1 个答案: