在以下场景中，<div> 标签如何与 amp-story 交互？

Question

在以下场景中，<div> 标签如何与 amp-story 交互？哪些场景根据 amp-story 应该以快速加载、无 AMP 错误等方式工作，为什么？

场景 1：div 标签在 amp-story 之外

<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：div amp-story-grid-layer 中的标签

<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/. For more about the structure of an AMP story, see understanding the parts of an AMP story。

在以下场景中，<div> 标签如何与 amp-story 交互？

How do <div> tags interact with amp-story in the following scenarios?

video

amp-html

amp-story