在 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
使用 amp-brightcove 用于 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
使用 amp-dailymotion 用于 dailymotion 视频。在此处查找更多示例 此处。
<amp-dailymotion data-videoid="x3rdtfy" layout="responsive" data-ui-highlight="FF4081" width="480" height="270">
</amp-dailymotion>
amp-facebook
使用 amp-facebook 用于 Facebook 视频。在此处查找更多示例 此处。
<amp-facebook width="552" height="310" layout="responsive" data-embed-as="video" data-href="https://#/zuck/videos/10102509264909801/">
</amp-facebook>
amp-instagram
使用 amp-instagram 用于 Instagram 上的视频。在此处查找更多示例 此处。
<amp-instagram data-shortcode="1totVhIFXl" width="1" height="1" layout="responsive">
</amp-instagram>
amp-twitter
使用 amp-twitter 用于 Twitter 视频。在此处查找更多示例 此处。
<amp-twitter width="375" height="472" layout="responsive" data-tweetid="707569406105092096">
</amp-twitter>
amp-vimeo
使用 amp-vimeo 用于 Vimeo 视频。在此处查找更多示例 此处。
<amp-vimeo data-videoid="27246366" layout="responsive" width="16" height="9">
</amp-vimeo>
amp-vine
使用 amp-vine 用于 Vine 嵌入。在此处查找更多示例 此处。
<amp-vine width="400" height="400" layout="responsive" data-vineid="bpxmJaHED09">
</amp-vine>
amp-youtube
使用 amp-youtube 用于 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 上编辑示例-