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"></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>
Bu sayfadaki açıklamalar tüm sorularınıza yanıt vermiyorsa, özgün kullanım durumunuzu tartışmak üzere diğer AMP kullanıcılarına ulaşmaktan çekinmeyin.
Stack Overflow'a git Açıklanmayan bir özellik mi var?AMP projesi, katılımınızı ve katkılarınızı güçlü bir şekilde teşvik ediyor! Açık kaynak topluluğumuzun devamlı bir katılımcısı olacağınızı umuyoruz ancak özel olarak ilgilendiğiniz konularla ilgili tek seferlik katkıları da memnuniyetle karşılıyoruz.
Örneği GitHub'ta düzenle