Integrating Videos in AMP an Overview
Introduction
There many different ways to integrate videos in AMP HTML files. Here is a list of all currently supported video formats and platforms.
Setup
Import the libraries. We used several examples that have to be imported. We start with amp-instagram
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
Import amp-vine for the vine example.
<script async custom-element="amp-vine" src="https://cdn.ampproject.org/v0/amp-vine-0.1.js"></script>
Import amp-youtube for the youtube example.
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
Import amp-vimeo for the vimeo example.
<script async custom-element="amp-vimeo" src="https://cdn.ampproject.org/v0/amp-vimeo-0.1.js"></script>
Import amp-dailymotion for the dailymotion example.
<script async custom-element="amp-dailymotion" src="https://cdn.ampproject.org/v0/amp-dailymotion-0.1.js"></script>
Import amp-twitter for the twitter example.
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
Import amp-facebook for the facebook example.
<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
Import amp-brightcove for the brightcove example.
<script async custom-element="amp-brightcove" src="https://cdn.ampproject.org/v0/amp-brightcove-0.1.js"></script>
Import amp-iframe for the iframe example.
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Import amp-video for the video example.
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
Embed your own Video with amp-video
Use amp-video for hosted videos.
Find more examples here.
Your browser doesn't support HTML5 video.
<amp-video width="480"
height="270"
src="/static/samples/video/tokyo.mp4"
poster="/static/samples/img/tokyo.jpg"
layout="responsive"
controls>
<div fallback>
<p>Your browser doesn't support HTML5 video.</p>
</div>
<source type="video/mp4"
src="/static/samples/video/tokyo.mp4">
<source type="video/webm"
src="/static/samples/video/tokyo.webm">
</amp-video>
Supported Video Platforms
amp-brightcove
Use amp-brightcove for Brightcove videos.
Find more examples here.
<amp-brightcove data-account="906043040001"
data-video-id="1401169490001"
data-player-id="180a5658-8be8-4f33-8eba-d562ab41b40c"
layout="responsive"
width="480"
height="270">
</amp-brightcove>
amp-dailymotion
Use amp-dailymotion for dailymotion videos.
Find more examples here.
<amp-dailymotion data-videoid="x3rdtfy"
layout="responsive"
data-ui-highlight="FF4081"
width="480"
height="270">
</amp-dailymotion>
amp-facebook
Use amp-facebook for Facebook videos.
Find more examples here.
<amp-facebook width="552"
height="310"
layout="responsive"
data-embed-as="video"
data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
</amp-facebook>
amp-instagram
Use amp-instagram for videos on Instagram.
Find more examples here.
<amp-instagram data-shortcode="1totVhIFXl"
width="1"
height="1"
layout="responsive">
</amp-instagram>
amp-twitter
Use amp-twitter for Twitter videos.
Find more examples here.
<amp-twitter width="375"
height="472"
layout="responsive"
data-tweetid="707569406105092096">
</amp-twitter>
amp-vimeo
Use amp-vimeo for Vimeo videos.
Find more examples here.
<amp-vimeo data-videoid="27246366"
layout="responsive"
width="16"
height="9">
</amp-vimeo>
amp-vine
Use amp-vine for Vine embeds.
Find more examples here.
<amp-vine width="400"
height="400"
layout="responsive"
data-vineid="MdKjXez002d">
</amp-vine>
amp-youtube
Use amp-youtube for YouTube videos.
Find more examples here.
<amp-youtube width="480"
height="270"
layout="responsive"
data-videoid="lBTCB7yLs8Y">
</amp-youtube>
What if your Video Provider is not Supported?
Use amp-video-iframe for videos not supported in AMP.
Find more examples here.
<amp-video-iframe id="myVideo"
src="/static/samples/files/custom-video-player.html"
width="317"
height="210"
layout="responsive"
autoplay>
<amp-img placeholder
src="/static/samples/img/bird.jpg"
layout="fill">
</amp-img>
</amp-video-iframe>
このページの説明でご質問のすべてを解消できない場合は、あなたの実際の使用事例について他の AMP ユーザーに問い合わせて話し合ってください。
Stack Overflow にアクセスする 説明されていない機能ですか？AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。
GitHub でサンプルを編集する-