Supported media types in AMP Stories
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"
alt="..."></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"
alt="...">
<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>
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