重要提示：此文档不适用于您当前选择的格式广告！

amp-story-page

描述

AMP 故事的单个屏幕。

必需的脚本

<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>

用法

<amp-story-page> 组件表示要在故事的单个页面上显示的内容。

<amp-story-page id="cover">
  <amp-story-grid-layer template="fill">
    <amp-video
      layout="fill"
      src="background.mp4"
      poster="background.png"
      muted
      autoplay
    ></amp-video>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="vertical">
    <h1>These are the Top 5 World's Most...</h1>
    <p>Jon Bersch</p>
    <p>May 18</p>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="thirds">
    <amp-img
      grid-area="bottom-third"
      src="a-logo.svg"
      width="64"
      height="64"
    ></amp-img>
  </amp-story-grid-layer>
</amp-story-page>

有效的子项

<amp-story-page> 组件包含一个或多个图层。图层从下到上堆叠（DOM 中指定的第一个图层位于底部；DOM 中指定的最后一个图层位于顶部）。

属性

id [必需]

页面的唯一标识符。可用于在 CSS 中设置页面及其后代的样式，也用于在 URL 片段中唯一标识页面。

auto-advance-after [可选]

指定何时自动前进到下一页。如果省略，则页面不会自动前进。auto-advance-after 的值必须是指定的时间量，或者HTMLMediaElement或视频接口的 id。

例外情况 auto-advance-after 启用了一种轻松的用户体验。在没有 auto-advance-after 的情况下，服务平台可能会决定在特定时间后自动前进。

时间

在指定的时间后自动前进到下一个故事页面。时间必须为正数。

<amp-story-page id="tokyo" auto-advance-after="1s">
  ...
</amp-story-page>

元素 `id`

当视频完成时，您可以自动前进到下一个故事页面。将 auto-advance-after 属性指向显示视频的 HTMLMediaElement 或视频接口的 ID。这包括 AMP 特定组件，例如amp-video。

<amp-story-page id="tokyo" auto-advance-after="video1">
  ...
    <amp-video autoplay id="video1"
    width="720" height="1280"
    poster="todo.jpg"
    layout="responsive">
    <source src="video1.mp4" type="video/mp4">
    </amp-video>
  ...
</amp-story-page>

background-audio [可选]

指向在此页面可见时播放的音频文件的 URI。

例如

<amp-story-page
  id="zurich"
  background-audio="./media/switzerland.mp3"
></amp-story-page>

动画

需要更多帮助？

您已经阅读了本文档十几次，但它并没有真正涵盖您所有的问题？也许其他人也有同样的感受：请在 Stack Overflow 上与他们联系。

转到 Stack Overflow

发现错误或缺少功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的持续参与者，但我们也欢迎您对您特别感兴趣的问题做出一次性贡献。

转到 GitHub