谷歌 Web 开发最佳实践手册(2.2.6):视频元素快速参考

【伯乐在线提示】:① 5月6日,谷歌开发者中心推出了一个 Web 开发最佳实践手册。伯乐在线资源频道摘编该资源后,已邀请一些关注 Web 开发的朋友参与翻译手册。② 由于译者朋友几乎都是已在职,都是在工作之余参与,每位的翻译进度会不一样(请理解),所以手册中文版不会按照英文版章节顺序发布。③ 手册中文版尚不完整,请不要转载,谢谢合作。


【导读】简要概述了视频元素上的属性。

在本课程中:
1. 视频元素属性
2. JavaScript

视频元素属性

要查看完整的视频元素属性和定义,参阅视频元素规范

属性 有效性 描述
src 所有浏览器 视频的地址(URL)
poster 所有浏览器 视频封面地址(URL),视频元素加载之后即刻显示,无需下载视频内容。
preload 所有移动设备浏览器都忽略此属性 在视频播放之前提示浏览器预加载元数据(或部分视频)是值得的。属性的取值有 none 、 metadata 或 auto (详情请参阅下面预加载部分)。
autoplay iPhone 与 Android 不支持,所有桌面浏览器、iPad、火狐和 Opera for Android 支持 尽早开始下载和播放。(参阅下面自动播放部分)。
loop 所有浏览器 循环播放视频。
controls 所有浏览器 显示默认的视频控制(播放、暂停、等等)。

 

自动播放(Autoplay)

对于桌面版,autoplay 告诉浏览器尽可能早的开始下载和播放。在 iOS 和 Chrome for Android 上,autoplay 是无效的,用户必须点击屏幕去播放视频。

即使在支持自动播放的平台上,你也要考虑启用它是不是一个好主意:

  • 数据流量有可能是昂贵的。
  • 不经询问,一开始就下载和播放会不经意的占用带宽和 CPU,延迟了页面的渲染。
  • 用户所处的环境可能不适合播放视频和音频。

自动播放行为可以在 Android 网络视图(WebView)通过 WebSettings API 配置。它默认是 true 但一个网络视图应用程序可以选择禁用它。

 

预加载(Preload)

preload 属性提示浏览器应该预加载多少信息和内容。

描述
none 用户可能不看这个视频,不要预加载任何东西。
metadata 预加载元数据(时长、尺寸、字幕轨)以及最小限度的视频。
auto 允许马上下载整个视频。

preload 属性在不同的平台上有不同的效果。比如,Chrome 的桌面版会缓冲25秒的视频,但 iOS 与 Android 版则不会。这意味着在移动版上会出现桌面版所没有的播放启动延迟。详情参阅 Steve Souders’ test page

 

JavaScript

The HTML5 Rocks Video article 很好的总结了控制视频播放的 JavaScript 属性、方法和事件。我们这里已经包括了这些内容,并更新了与移动方面相关的一些内容。

 

属性(Properties)

属性 描述
currentTime 以秒为单位获取或设置播放位置。
volume 获取或设置视频当前的音量。
muted 获取或设置音频静音状态。
playbackRate 获取或设置播放速率;1 为正常速率正向播放。
buffered 有关视频已缓冲多少,是否准备好播放的信息。参阅样例
currentSrc 正在播放的视频的地址。
videoWidth 视频的宽度,以像素为单位(与视频元素的 width 不同)。
videoHeight 视频的高度,以像素为单位(与视频元素的 height 不同)。

移动设备不支持 playbackRate(样例)和 volume 。

 

方法(Methods)

方法 描述
load() 加载或重新加载视频源而不启动播放(比如用 JavaScript 改变视频的 src 的时候)。
play() 在当前进度开始播放视频。
pause() 在当前进度暂停视频。
canPlayType(‘format’) 找出支持哪些格式(参阅检查支持哪些格式)。

在移动设备上(除了 Opera 和 Android)play() 和 pause() 只有在响应用户动作的时候才有效,比如点击一个按钮(参阅样例)。同样地,对于嵌入 YouTube 视频之类的内容也不能启动播放。

 

事件(Events)

这只是可能发射的媒体事件的一个子集。完整的列表请参阅 Mozilla 开发者社群上的媒体事件页面。

事件 描述
canplaythrough 当足够的数据可用,浏览器认为视频可以不中断播放完毕时发射。
ended 视频播放完毕时发射。
error 错误发生时发射。
playing 当视频第一次开始播放、按下暂停之后或者重新开始时发射。
progress 周期性地发射,显示下载进度。
waiting 当一个动作被延迟,在等待另一个动作完成时发射。
loadedmetadata 当浏览器加载完元数据(时间、尺寸、字幕)时发射。
收藏 评论

关于作者:Mxt

Think Deep, Work Lean. 个人主页 · 我的文章 · 12

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部