AMP
  • websites

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="bpxmJaHED09">
</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 项目强烈鼓励您参与并做出贡献!我们希望您能成为我们开放源代码社区的持续参与者,但我们也欢迎您对所热衷问题做出一次性贡献。

编辑 GitHub 上的示例