AMP
  • stories

Supported media types in AMP Stories

Experimental

Ví dụ này sử dụng tính năng thử nghiệm sau: amp-google-vrview-image. Kích hoạt thử nghiệm thông qua nút dưới đây. Một số thành phần cũng yêu cầu AMP Dev Channel được bật. 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>
Bạn cần được giải thích thêm?

Nếu bạn vẫn còn thắc mắc sau khi đọc hướng dẫn trên trang này, hãy liên hệ với những người dùng AMP khác để thảo luận về trường hợp sử dụng cụ thể của bạn.

Truy cập Stack Overflow
Một tính năng chưa được giải thích?

Dự án AMP đặc biệt khuyến khích sự tham gia và đóng góp của bạn! Chúng tôi hi vọng bạn sẽ trở thành một người tham gia tích cực trong cộng đồng mã nguồn mở của chúng tôi, nhưng chúng tôi cũng chào mừng các đóng góp đơn lẻ về vấn đề mà bạn đặc biệt quan tâm.

Chỉnh sửa mẫu trên GitHub