
- Google AMP 教程
- Google AMP - 首页
- Google AMP - 概述
- Google AMP - 简介
- Google AMP - 图片
- Google AMP - 表单
- Google AMP - 内嵌框架 (Iframes)
- Google AMP - 视频
- Google AMP - 按钮
- Google AMP - 时间戳 (Timeago)
- Google AMP - Mathml
- Google AMP - 自动调整文本大小 (Fit Text)
- Google AMP - 日期倒计时
- Google AMP - 日期选择器
- Google AMP - 故事 (Story)
- Google AMP - 选择器
- Google AMP - 链接
- Google AMP - 字体
- Google AMP - 列表
- Google AMP - 用户通知
- Google AMP - 下一页
- Google AMP - 属性
- 样式和自定义 CSS
- Google AMP - 动态 CSS 类
- Google AMP - 动作和事件
- Google AMP - 动画
- Google AMP - 数据绑定
- Google AMP - 布局
- Google AMP - 广告
- Google AMP - 分析
- Google AMP - 社交小工具
- Google AMP - 媒体
- HTML 页面转换为 AMP 页面
- Google AMP - 基本语法
- Google AMP - 验证
- Google AMP - 缓存
- Google AMP - 自定义 JavaScript
- Google AMP - CORS
- Google AMP 有用资源
- Google AMP - 快速指南
- Google AMP - 有用资源
- Google AMP - 讨论
Google AMP - 视频
amp 中的 amp-video 是一个标准的 HTML5 视频标签,用于播放直接嵌入的视频。本章我们将了解如何使用 amp-video。
要使用 amp-video,我们需要添加以下脚本:
<script async custom-element = "amp-video" src = "https://cdn.ampproject.org/v0/amp-video-0.1.js"> </script>
Amp-video 有一个 src 属性,它包含要加载的视频资源,amp 会在运行时延迟加载它。此外,它的几乎所有功能都与 HTML5 video 标签相同。
以下是需要添加到 amp-video 的节点:
Source - 你可以使用此标签添加不同的媒体文件进行播放。
Track - 此标签允许你为视频启用字幕。
Placeholder - 此占位符标签会在视频开始播放前显示内容。
Fallback - 当浏览器不支持 HTML5 视频时,将调用此标签。
amp-video 标签的格式
amp-video 标签的格式如下所示:
<amp-video controls width = "640" height = "360" layout = "responsive" poster = "images/videoposter.png"> <source src = "video/bunny.webm" type = "video/webm" /> <source src = "video/samplevideo.mp4" type = "video/mp4" /> <div fallback> <p>This browser does not support the video element.</p> </div> </amp-video>
让我们通过下面的工作示例来了解 amp-video:
示例
<!doctype html> <html amp lang = "en"> <head> <meta charset = "utf-8"> <script async src = "https://cdn.ampproject.org/v0.js"></script> <title>Google AMP - Amp Video</title> <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html"> <meta name = "viewport" content = "width = device-width, minimum-scale = 1,initial-scale=1"> <style amp-boilerplate> body { -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both} @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body { -webkit-animation:none; -moz-animation:none; -ms-animation:none; animation:none } </style> </noscript> <script async custom-element = "amp-video" src = "https://cdn.ampproject.org/v0/amp-video-0.1.js"> </script> </head> <body> <h3>Google AMP - Amp Video</h3> <amp-video controls width = "640" height = "360" layout = "responsive" poster = "images/videoposter.png"> <source src = "video/bunny.webm" type = "video/webm" /> <source src = "video/samplevideo.mp4" type = "video/mp4" /> <div fallback> <p>This browser does not support the video element.</p> </div> </amp-video> </body> </html>
输出
上面代码的输出如下所示:

amp-video 可用的属性
amp-video 可用的属性列在下面的表格中:
序号 | 属性 & 描述 |
---|---|
1 | src 如果不存在 <source> 节点,则必须指定 src 属性,并且它必须是 https:// URL。 |
2 | poster poster 属性接受一个 img URL,在视频开始播放前显示。 |
3 | autoplay 如果 amp-video 包含此属性,并且浏览器支持,则会自动播放视频。视频将以静音模式播放,用户需要点击视频才能取消静音。 |
4 | controls 如果 amp-video 包含此属性,则会显示类似于 HTML5 video 的视频控件。 |
5 | loop 如果 amp-video 包含此属性,视频播放结束后会再次播放。 |
6 | crossorigin 如果视频资源位于不同的域,则此属性会发挥作用。 |
7 | rotate-to-fullscreen 如果视频可见,当用户将设备旋转到横向模式后,视频会全屏显示。 |
自动播放 AMP 视频
如果需要自动播放视频,可以使用 autoplay 属性。此功能将根据浏览器支持情况生效。请注意,自动播放时视频将处于静音状态。用户点击视频后,将取消静音。
让我们通过下面的工作示例来了解 autoplay 功能:
示例
<!doctype html> <html amp lang = "en"> <head> <meta charset = "utf-8"> <script async src = "https://cdn.ampproject.org/v0.js"></script> <title>Google AMP - Amp Video</title> <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html"> <meta name = "viewport" content = "width=device-width,minimum-scale = 1, initial-scale = 1"> <style amp-boilerplate> body { -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both; -moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body{ -webkit-animation:none; -moz-animation:none; -ms-animation:none; animation:none } </style> </noscript> <script async custom-element = "amp-video" src = " https://cdn.ampproject.org/v0/amp-video-0.1.js"> </script> </head> <body> <h3>Google AMP - Amp Video Autoplay</h3> <amp-video controls width = "640" height = "360" layout = "responsive" poster = "images/videoposter.png" autoplay> <source src = "video/bunny.webm" type = "video/webm" /> <source src = "video/samplevideo.mp4" type = "video/mp4" /> <div fallback> <p>This browser does not support the video element.</p> </div> </amp-video> </body> </html>

你可以通过添加 controls 属性来为视频激活控件,如下面的代码所示:
<amp-video controls width = "640" height = "360" layout = "responsive" poster = "images/videoposter.png" autoplay> <source src = "video/bunny.webm" type = "video/webm" /> <source src = "video/samplevideo.mp4" type = "video/mp4" /> <div fallback> <p>This browser does not support the video element.</p> </div> </amp-video>