Supported media types in AMP Stories
Experimental
この実例では、次の試験運用機能を使用します。 amp-google-vrview-image
. 下のボタンを使用して試験運用機能を有効にしてください。一部のコンポーネントでは、AMP Dev チャンネルも有効にする必要があります。 Learn more about experimental features.
- AMP VersionPROD DEV
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.
<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>
このページの説明でご質問のすべてを解消できない場合は、あなたの実際の使用事例について他の AMP ユーザーに問い合わせて話し合ってください。
Stack Overflow にアクセスする 説明されていない機能ですか?AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています!当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。
GitHub でサンプルを編集する