Do you build things with AMP? Fill out the AMP Developer Survey!
AMP
  • stories

Supported media types in AMP Stories

Experimental

Contoh ini menggunakan fitur eksperimental berikut ini: amp-google-vrview-image. Aktifkan percobaan melalui tombol di bawah ini. Beberapa komponen mengharuskan AMP Dev Channel diaktifkan juga. Learn more about experimental features.

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>
Perlu penjelasan lebih lanjut?

Jika penjelasan pada halaman ini tidak menjawab semua pertanyaan Anda, silakan hubungi pengguna AMP lainnya untuk mendiskusikan contoh penggunaan Anda yang spesifik.

Kunjungi Stack Overflow
Fitur yang tidak dijelaskan?

Proyek AMP sangat menganjurkan partisipasi dan kontribusi Anda! Kami berharap Anda akan terus ambil bagian dalam komunitas sumber terbuka kami, tetapi kami juga menerima kontribusi satu kali untuk topik tertentu yang Anda minati.

Edit sampel di GitHub