#BlackLivesMatter
Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP

Important: this documentation is not applicable to your currently selected format email!

amp-story-page

Description

A single screen of an AMP story.

Required Scripts

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

The <amp-story-page> component represents the content to display on a single page of a story.

Example

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

Attributes

id [required]

A unique identifier for the page. Can be used for styling the page and its descendants in CSS, and is also used to uniquely identify the page in the URL fragment.

auto-advance-after [optional]

Specifies when to auto-advance to the next page. If omitted, the page will not automatically advance. The value for auto-advance-after must be either:

  • A positive amount of time to wait before automatically advancing to the next page
  • An ID of an HTMLMediaElement or video-interface video whose completion will trigger the auto-advance

For example:

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

background-audio [optional]

A URI to an audio file that plays while this page is in view.

For example:

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

Children (of amp-story-page)

The <amp-story-page> component contains one or more layers. Layers are stacked bottom-up (the first layer specified in the DOM is at the bottom; the last layer specified in the DOM is at the top).

도움이 더 필요하신가요?

이 문서를 수십 번 읽었음에도 여전히 궁금한 점이 남아 있나요? 다른 개발자들도 같은 심정일지 모릅니다. Stack Overflow에서 소통해 보세요.

Stack Overflow로 이동
버그나 누락된 기능을 발견하셨나요?

AMP 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.

GitHub로 이동하기