重要事項：這份文件不適用於您目前選取的格式 websites！

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 [必填]

頁面的專屬 ID。可用於在 CSS 中設定頁面及其後代元素的樣式，也可用於在網址片段中專門識別頁面。

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