视频

添加视频

学习最简单的向网站添加视频的方法,并让用户在任何设备上都能享受到最佳体验。

关键要点

  • 在你的网站上使用video元素来加载、解码并播放视频。
  • 为你的视频创建多种格式来覆盖更多的移动平台。
  • 正确缩放你的视频,保证它们不会从容器中溢出。
  • 可访问性事宜:在video元素中添加track子元素。

添加video元素

在你的网站上使用video元素来加载、解码并播放视频:

<video src="chrome.webm" type="video/webm">
    <p>你的浏览器不支持video元素。</p>
</video>

指定多种文件格式

不是所有浏览器都支持相同的视频格式。 <source> 元素可以让你定义多种格式, 一旦用户的浏览器一个也不支持也有后路可退。 比如说:

    <video controls>
      <source src="chrome.webm" type="video/webm">
      <source src="chrome.mp4" type="video/mp4">
      <p>该浏览器不支持video元素。</p>
    </video>
    
查看完整示例

当浏览器分析<source>标签,它使用了可选的type 属性来帮助确定下载并播放哪个文件。如果浏览器支持WebM,那么它就会播放chrome.webm,如果不支持,它就会检查浏览器是否支持MPEG-4视频。 浏览 给极客的数字媒体入门 了解视频及音频是如何在网站上工作的更多信息。

这种方式在服务几种不同的HTML、服务器脚本尤其是移动端上都有诸多优势:

  • 开发人员可以按优先级排列格式。
  • 原生客户端切换可以减少延迟;只需一个请求来获取内容。
  • 让浏览器选择格式更简单、快捷而且可能比使用用户代理检测匹配服务器端数据库更可靠。
  • 定义每个文件资源类型可以提升网络性能,浏览器可以选择一种视频资源而不必下载部分视频来嗅探其格式。

上述几点对于移动设备尤为重要,因为它们的带宽和加载时间都非常珍贵,而用户的耐心又是有限的。 不包含type属性会在多个资源中有不支持格式的时候影响到性能。

使用你的移动浏览器开发者工具,比较使用type属性不使用type属性时的网络活动。 同时在你的浏览器开发工具中检查响应,以确保你的服务器报告了正确的MIME类型; 否则视频资源类型检测不会生效。

指明开始及结束时间

节省带宽并让你的网站更具响应性:使用Media Fragments API来为video元素添加开始和结束时间。

要想添加媒体片段,你只需要在媒体地址中加入#t=[start_time][,end_time]。比如说,从第5秒开始播放这个视频到第10秒, 指明:

<source src="video/chrome.webm#t=5,10" type="video/webm">

你也可以使用Media Fragments API来在同一视频内传递多个片段,就像DVD中的关键点,这样你就不需要编码并提供多个文件了。

记住

  • 大多数平台都支持Media Fragments API,不过IOS不支持。
  • 确保你的服务器支持Range Requests。大部分服务器默认支持Range Requests,但是某些服务器可能会将其关闭。

使用你的浏览器开发者工具,在响应头中检查Accept-Ranges: bytes

Chrome Dev Tools screenshot: Accept-Ranges: bytes

包含一个海报图像

给video元素添加poster属性,这样你的用户就能在元素加载的时候就大概知道其内容,而无需下载视频或开始播放。

<video poster="poster.jpg" ...>
  ...
</video>

src失效或者没有任何咦支持视频格式的时候,海报也可以成为一个后备选项。唯一不好的一点就是要额外增加一个文件请求,这需要花费一些带宽以及请求渲染。更多信息可以查看图像优化

这里是一个是否拥有海报图像的对比, 我们将这个图像变为灰色以证明它并不是视频:

Android Chrome screenshot, portrait: no poster
Android Chrome screenshot, portrait: with poster

除非另有说明,本网页的内容采用知识共享署名3.0许可和代码示例都基于Apache2.0许可。如需详细资讯,请参阅我们的网站政策

回到顶部