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>
Se as explicações nesta página não respondem a todas as suas perguntas, entre em contato com outros usuários de AMP para discutir seu caso de uso específico.
Ir para o Stack Overflow Falta explicar algum recurso?O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.
Editar amostra no GitHub