谷歌 Web 开发最佳实践手册(2.2):视频

【导读】:用户喜欢视频,视频可以很有趣,且内容丰富。在移动设备上,视频可以称作是消费信息的一种更简单方式。

但是视频需要带宽,它们在每个平台上的运行并不总是一样的。用户不喜欢等待视频加载,或者当他们按下播放键后屏幕并没有任何反应。阅读更多资料来找到将视频添加到你的网站中最简单的方式,从而确保用户在任何设备上都能得到最佳的体验。

本节包括下面这些小课程:

  1. 添加视频文件 ——学习将视频添加到你的网站中最简单的方式,从而确保用户在任何设备上都能得到最佳的体验。

在本课程中主要包含:

  • 添加视频元素(组件)
  • 指定多个文件格式
  • 指定开始和结束时间
  • 包含海报图片

长话短说:

  • 在你的网站上用视频元素来加载、解码并播放视频
  • 制作视频的多种格式来覆盖广泛的移动平台
  • 视频的大小正确,保证它们不会溢出
  • 可访问性也很重要;添加轨道元素作为视频元素的子元素

添加视频元素

在网站上用视频元素加载、解码并播放视频

译注:请在新窗口查看视频

指定多个文件格式

不是所有浏览器都支持相同的视频格式的,<source>元素可以让你指定多种格式作为备选,以防用户的浏览器不支持某些格式。举例来说:

当浏览器解析<source>标签时,它将使用可选的type属性来帮助决定下载哪个文件或是播放哪个文件。如果浏览器支持WebM格式的话,它会播放chrome.webm文件,如果不支持,它会检查其是否能支持MPEG-4视频的播放,可以参考《极客们的数字媒体入门》来找到更多有关网络上的音频和视频是如何工作的。这种方法比起HTML上不同的服务或是服务器端脚本来讲有诸多优势,尤其是在手机端(移动端):

  • 开发人员可以按照优先顺序列出格式
  • 原生客户端切换减少了等待时间;只发出一个请求来获取内容
  • 让浏览器来选择一种格式更简单、更快,也能也比用用户代理检测来使服务器支持数据库更可靠。
  • 制定每个文件源的类型提高了网络性能;该浏览器可以直接选择一个视频源,而无需对先下载一部分视频来“嗅”(识别)一下视频的格式。

使用你的手机浏览器开发者工具,比较一下有type属性和没有用到type属性时的网络活动情况。同时检查一下你浏览器开发者工具的响应标题,确保你的服务器报告了正确的MINE类型;否则视频源的类型检查将无法正常工作。

指定开始和结束时间

节省带宽,并使你的网站反映更灵敏:使用Media Fragments API接口来为视频元素添加开始时间和结束时间。

译注:请在新窗口查看视频

添加一个媒体片段(media fragment),你只需要简单的将

代码加入到媒体的URL中,举个例子,如果想播放视频的第五秒到第十秒这段内容,只需要:

你还可以用Media Fragments API来提供对于一个视频的多个图像——就像DVD中的提示点一样——而不用编码或是提供于多个文件。

记住:

  • Media Fragments API 支持大多数平台,但是不支持IOS平台。
  • 确保你的服务器支持Range Requests(范围请求)。Range Requests在默认情况下被大多数服务器所启用,但一些托管服务可能会将其关闭。

用你的浏览器开发者工具,在响应标题中检查

Accept-Ranges-Chrome-Dev-Tools

包含海报图片

在视频元素中添加一个poster属性,从而你的用户将在这些元素加载时就对视频内容有所了解,而不需要在下载视频或是开始播放之后才知道其内容。

如果视频的src受损或者所提供的视频格式全部不被支持时,poster也可以是一个备选。poster图像的唯一缺点是会有一个额外的文件请求,这回消耗一定的带宽并且需要渲染。如果想了解更多信息,请参见图像优化这章。

下面是两个并列在一起比较的无海报图片和含有海报图片的视频——我们将海报图像做成灰度图来证明其不是视频。

Chrome-Android-video-no-posterChrome-Android-video-poster

  1. 提供传统平台的替代品——并不是所有平台都支持所有的视频格式,检查一下主流平台所支持的视频格式,并且确保你的视频在这些主流平台中都可以运行。
  2. 自定义视频播放器——不同平台播放视频的方式不同。移动平台的解决方案需要考虑设备的方向(横向或者纵向视图)。使用Fullscreen API来控制视频内容的全屏视图。
  3. 视频大小合适——当事情涉及到保证你的用户开心时,视频的大小就很重要了。
  4. 可访问性很重要——可访问性不是一个特性
  5. 快速参考——视频元素属性的快速概述
收藏 评论

关于作者:卷卷怪

(新浪微博:@卷卷_MeatLover) 个人主页 · 我的文章 · 1

相关文章

可能感兴趣的话题



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