amp-story-player

說明

用於在您自己的 AMP 網站中嵌入和播放您喜愛的故事播放器。

必要指令碼

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

支援的版面配置

填滿 (fill) 固定 (fixed) 固定高度 (fixed-height) 彈性項目 (flex-item) 回應式 (responsive) 內在 (intrinsic)

用法

使用 amp-story-player 在 AMP 網頁中嵌入和播放故事。

嵌入 AMP 頁面

以下程式碼片段示範在 AMP 網頁中嵌入 <amp-story-player>。

<head>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script
    async
    custom-element="amp-story-player"
    src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js"
  ></script>
</head>
<body>
  <amp-story-player layout="fixed" width="360" height="600">
    <a href="https://preview.amp.dev/documentation/examples/introduction/stories_in_amp/">
      <img src="https://amp.dev.org.tw/static/samples/img/story_dog2_portrait.jpg" width="360" height="600" loading="lazy" data-amp-story-player-poster-img>
      Stories in AMP - Hello World
    </a>
  </amp-story-player>
</body>