- 谷歌AMP教程
- Google AMP - 主页
- Google AMP - 概述
- 谷歌 AMP - 简介
- Google AMP - 图片
- Google AMP - 表单
- Google AMP - Iframe
- Google AMP - 视频
- Google AMP - 按钮
- Google AMP - Timeago
- Google AMP - 数学
- Google AMP - 适合文本
- Google AMP - 日期倒计时
- Google AMP - 日期选择器
- Google AMP - 故事
- 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 - 布局
- 谷歌 AMP - ADS
- 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视频标签几乎相同。
以下是要添加到放大器视频的节点 -
源- 您可以使用此标签添加要播放的不同媒体文件。
Track - 此标签可让您启用视频的字幕。
占位符- 此占位符标签将在视频开始之前显示内容。
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 | 源代码 如果 <source> 节点不存在,则必须指定 src,并且它必须是 https:// url。 |
2 | 海报 海报采用视频开始前显示的 img url。 |
3 | 自动播放 如果浏览器支持,在 amp-video 上设置此属性将自动播放视频。视频将以静音模式播放,用户必须点击视频才能取消静音。 |
4 | 控制 在 amp-video 上设置此属性将在视频上显示类似于 html5 视频的控件。 |
5 | 环形 如果 amp-video 上存在此属性,则视频播放完毕后将再次播放。 |
6 | 跨域 如果播放视频的资源位于不同的来源,则此属性就会出现。 |
7 | 旋转至全屏 如果视频可见,则在用户将设备旋转为横向模式后,视频将显示全屏 |
自动播放 AMP 视频
如果我们需要自动播放视频,我们可以使用自动播放属性。此功能将根据浏览器支持工作。请注意,自动播放时视频将处于静音状态。当用户点击视频时,视频将取消静音。
让我们借助下面给出的工作示例来实现自动播放功能 -
例子
<!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>
您可以通过添加控件属性来激活视频控件,如以下代码所示 -
<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>