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