Do you build things with AMP? Fill out the AMP Developer Survey!
AMP
JA
English Deutsch Français العربية Español Italiano Indonesia 한국어 Português Русский Türkçe 中文 Polski Tiếng việt
  • stories

Supported media types in AMP Stories

Experimental

この実例では、次の試験運用機能を使用します。 amp-google-vrview-image. 下のボタンを使用して試験運用機能を有効にしてください。一部のコンポーネントでは、AMP Dev チャンネルも有効にする必要があります。 Learn more about experimental features.

デモを表示する Playground で開く

Introduction

Stories support only a subset of the media types available in AMPHTML. This samples gives an overview on which are supported.

amp-img

Images are fully supported via the amp-img extension.

 
<amp-story-page id="amp-img">
  <amp-story-grid-layer template="fill">
    <amp-img src="https://unsplash.it/720/320/?image=10"
      grid-area="middle-third"
      width="720"
      height="320"
      layout="responsive"></amp-img>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="thirds">
    <h1 grid-area="upper-third">amp-img</h1>
  </amp-story-grid-layer>
</amp-story-page>

amp-video

The only way to embed videos is currently via the amp-video extension.

 
<amp-story-page id="amp-video">
  <amp-story-grid-layer template="fill">
    <amp-video autoplay
      loop
      grid-area="middle-third"
      width="720"
      height="960"
      poster="https://amp.dev/static/samples/img/story_video_dog_cover.jpg"
      layout="responsive">
      <source src="https://amp.dev/static/samples/video/story_video_dog.mp4"
        type="video/mp4">
    </amp-video>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="thirds">
    <h1 grid-area="upper-third">amp-video</h1>
  </amp-story-grid-layer>
</amp-story-page>

Note that amp-video extension has different validation rules when used within an AMP Story—both the autoplay and poster attributes are required.

background-audio

You can playback audio for a single amp-story-page using the background-audio attribute on the amp-story-page element. This attribute can also be applied to the amp-story element to playback audio across an amp-story.

 
<amp-story-page id="background-audio"
  background-audio="https://ia801402.us.archive.org/16/items/EDIS-SRP-0197-06/EDIS-SRP-0197-06.mp3">
  <amp-story-grid-layer template="thirds">
    <h1 grid-area="upper-third">background-audio</h1>
  </amp-story-grid-layer>
</amp-story-page>

amp-gfycat

Embed animated GIFs from https://gfycat.com/.

 
<amp-story-page id="amp-gfycat">
  <amp-story-grid-layer template="fill">
    <amp-gfycat data-gfyid="TautWhoppingCougar"
      width="640"
      height="360"
      layout="responsive">
    </amp-gfycat>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="vertical">
    <h1 grid-area="upper-third">amp-gfycat</h1>
  </amp-story-grid-layer>
</amp-story-page>

amp-google-vrview-image

Stories will support 360° Media, consisting of 360° videos and images, soon.

The amp-google-vrview-image component is currently experimental. To experience this sample please enable the needed experiments. 

<amp-story-page id="amp-google-vrview-image">
  <amp-story-grid-layer template="fill">
    <amp-google-vrview-image src="https://storage.googleapis.com/vrview/examples/coral.jpg"
      width="400"
      height="300"
      layout="responsive">
    </amp-google-vrview-image>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="thirds">
    <h1 grid-area="upper-third">amp-google-vrview-image</h1>
  </amp-story-grid-layer>
</amp-story-page>
さらに説明が必要ですか？

このページの説明でご質問のすべてを解消できない場合は、あなたの実際の使用事例について他の AMP ユーザーに問い合わせて話し合ってください。

Stack Overflow にアクセスする
説明されていない機能ですか？

AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub でサンプルを編集する