在 AMP 中集成视频概述
简介
在 AMP HTML 文件中集成视频有很多不同的方法。以下是当前所有支持的视频格式和平台的列表。
设置
导入库。我们使用了几个必须导入的示例。我们从 amp-instagram 开始
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
为 vine 示例导入 amp-vine。
<script async custom-element="amp-vine" src="https://cdn.ampproject.org/v0/amp-vine-0.1.js"></script>
为 youtube 示例导入 amp-youtube。
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
为 vimeo 示例导入 amp-vimeo。
<script async custom-element="amp-vimeo" src="https://cdn.ampproject.org/v0/amp-vimeo-0.1.js"></script>
为 dailymotion 示例导入 amp-dailymotion。
<script async custom-element="amp-dailymotion" src="https://cdn.ampproject.org/v0/amp-dailymotion-0.1.js"></script>
为 twitter 示例导入 amp-twitter。
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
为 facebook 示例导入 amp-facebook。
<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
为 brightcove 示例导入 amp-brightcove。
<script async custom-element="amp-brightcove" src="https://cdn.ampproject.org/v0/amp-brightcove-0.1.js"></script>
为 iframe 示例导入 amp-iframe。
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
为 video 示例导入 amp-video。
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
使用 amp-video 嵌入您自己的视频
对托管视频使用 amp-video。在此处查找更多示例 此处。
您的浏览器不支持 HTML5 视频。
<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>
支持的视频平台
amp-brightcove
对 Brightcove 视频使用 amp-brightcove。在此处查找更多示例 此处。
<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
对 dailymotion 视频使用 amp-dailymotion。在此处查找更多示例 此处。
<amp-dailymotion data-videoid="x3rdtfy" layout="responsive" data-ui-highlight="FF4081" width="480" height="270">
</amp-dailymotion>
amp-facebook
对 Facebook 视频使用 amp-facebook。在此处查找更多示例 此处。
<amp-facebook width="552" height="310" layout="responsive" data-embed-as="video" data-href="https://#/zuck/videos/10102509264909801/">
</amp-facebook>
amp-instagram
对 Instagram 上的视频使用 amp-instagram。在此处查找更多示例 此处。
<amp-instagram data-shortcode="1totVhIFXl" width="1" height="1" layout="responsive">
</amp-instagram>
amp-twitter
对 Twitter 视频使用 amp-twitter。在此处查找更多示例 此处。
<amp-twitter width="375" height="472" layout="responsive" data-tweetid="707569406105092096">
</amp-twitter>
amp-vimeo
对 Vimeo 视频使用 amp-vimeo。在此处查找更多示例 此处。
<amp-vimeo data-videoid="27246366" layout="responsive" width="16" height="9">
</amp-vimeo>
amp-vine
对 Vine 嵌入使用 amp-vine。在此处查找更多示例 此处。
<amp-vine width="400" height="400" layout="responsive" data-vineid="bpxmJaHED09">
</amp-vine>
amp-youtube
对 YouTube 视频使用 amp-youtube。在此处查找更多示例 此处。
<amp-youtube width="480" height="270" layout="responsive" data-videoid="lBTCB7yLs8Y">
</amp-youtube>
如果不支持您的视频提供商怎么办？
对于 AMP 中不支持的视频，使用 amp-video-iframe。在此处查找更多示例 此处。
<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 上编辑示例-