时间戳

首页 > 解决方案 > 怎么做

标签在以下场景中与 amp-story 交互？

video - 怎么做
标签在以下场景中与 amp-story 交互？

问题描述

<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/

标签： videoamp-htmlamp-story

解决方案

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

要检查您的文档是否是有效的 AMP，请参阅http://validator.ampproject.org/。有关 AMP 故事结构的更多信息，请参阅了解 AMP 故事的各个部分。

推荐阅读