H5多媒体能力

Posted on | In
Words count in article: 2.3k | Reading time ≈ 8

H5多媒体能力
author: @TiffanysBear

H5多媒体能力

多媒体能力顾名思义就是H5提供的播放视频、音频能力。
在HTML5中通过HTML标签<audio>和<video>来支持嵌入式的媒体，是开发者能够方便的将媒体嵌入。

##例子
###音频

1
2
3
<audio src="XXX">
你的浏览器不支持audio标签
</audio>

###视频

1
2
3
4
5
<video controls>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mp4" type="video/mp4">
  你的浏览器不支持video标签
</video>

audio和video元素支持的媒体格式浏览器兼容性情况

##<audio>标签

如果元素包含 src 属性：零个或多个 <track> 元素，其后紧跟不包含 <audio> 或者 <video>媒体元素的透明内容。
或者：零个或多个 <source> 元素，其后紧跟零个或多个 <track> 元素，其后紧跟不包含 <audio> 或者 <video>媒体元素的透明内容。

属性

  • autoplay [Boolean] 音频自动播放。

  • buffered 通过该属性获取已缓冲的资源的时间段信息。该属性包含一个 TimeRanges 对象。

  • controls 如果设置了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。

  • loop [Boolean] 循环播放音频。

  • muted [Boolean] 表示是否静音的布尔值。默认值为false，表示有声音。

  • played 一个TimeRanges 对象，表示所有已播放的音频片段。

  • preload 枚举属性，让开发者自行思考来示意浏览器使用何种加载方式以达到最好的用户体验。可以是以下属性之一：

    • none 示意用户可能不会播放该音频，或者服务器希望节省带宽；换句话说，该音频不会被缓存；
    • metadata 示意即使用户可能不会播放该音频，但获取元数据 (例如音频长度) 还是有必要的。
    • auto 示意用户可能会播放音频；换句话说，如果有必要，整个音频都将被加载，即使用户不期望使用。
    • 空字符串 等效于auto属性。
    • 假如不设置，默认值就是浏览器定义的了（不同浏览器会选择自己的默认值）， 即使规范建议设置为 metadata.
    • autoplay 属性优先于 preload 假如用户想自动播放视频，那么很明显浏览器需要下载视频。同时设置autoplay 和 preload属性在规范里是允许的。
    • 规范没有强制浏览器去遵循该属性的值；这仅仅只是个提示。

  • src 嵌入的音频的URL。 该URL应遵从 HTTP access controls. 这是一个可选属性；你可以在audio元素中使用 <source> 元素来替代该属性指定嵌入的音频。

  • volume 音频播放的音量。值从0.0 (无声) 到 1.0 (最大声).

###事件
| 事件 | 描述 |
| —- | —- |
| abort | 在播放被终止时触发。|
| canplay | 在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。|
| canplaythrough |在媒体的readyState变为CAN_PLAY_THROUGH时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置currentTime会使得firefox触发一次canplaythrough事件，其他浏览器或许不会如此。|
| durationchange |元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。|
| emptied |媒体被清空（初始化）时触发。|
| ended |播放结束时触发。|
|error|在发生错误时触发。元素的error属性会包含更多信息|
| loadeddata | 媒体的第一帧已经加载完毕|
| loadedmetadata | 媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。|
| loadstart | 在媒体开始加载时触发。|
| mozaudioavailable |当音频数据缓存并交给音频层处理时|
| pause |播放暂停时触发。|
| play | 在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。|
| playing |在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。|
| progress | 告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。|
| ratechange | 在回放速率变化时触发。|
| seeked |在跳跃操作完成时触发。|
| seeking |在跳跃操作开始时触发。|
| stalled | 在尝试获取媒体数据，但数据不可用时触发。|
| suspend |在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。|
| timeupdate |元素的currentTime属性表示的时间已经改变。|
| volumechange |在音频音量改变时触发（既可以是volume属性改变，也可以是muted属性改变）|
| waiting | 在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发。|

###业内实例

##<vedio>标签

<video> 元素 用于在HTML或者XHTML文档中嵌入视频内容。包含任一 src 属性或是一个或多个 <source> 元素，其后紧跟流式内容 或 段落内容 ， 不包括<video> 或者 <audio> 元素。

属性

  • autoplay [Boolean] 视频会马上自动开始播放，不会停下来等着数据载入结束。
  • buffered 这个属性可以读取到哪段时间范围内的媒体被缓存了。该属性包含了一个 TimeRanges 对象。
  • controls Gecko 会提供用户控制，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。
  • crossorigin 该枚举属性指明抓取相关图片是否必须用到CORS（跨域资源共享）。不加这个属性时，抓取资源不会走CORS请求(即，不会发送 Origin: HTTP 头)，保证其在 <canvas> 元素中使用时不会被污染。如果指定非法值，会被当作指定了枚举关键字 anonymous 一样使用。
    • anonymous 跨域请求（即，使用 Origin: 的HTTP头）会被执行。但是不发送凭证（即，不发送cookie， X.509 证书或者 HTTP Basic 授权）。如果服务器不提供证书给源站点 (不设置 Access-Control-Allow-Origin: HTTP头)，图片会被 污染 并且它的使用会受限。
    • use-credentials 跨域请求A cross-origin request (i.e. with Origin: HTTP header) 会被执行，且凭证会被发送 (即， 发送一个 cookie, 一个证书和HTTP Basic授权会被执行)。如果服务器不提供证书给源站点 (通过Access-Control-Allow-Credentials: HTTP 头)，图像会被 污染 且它的使用会受限。
  • height 视频展示区域的高度，单位是CSS像素。
  • loop [Boolean] 指定后，会在视频结尾的地方，自动返回视频开始的地方。
  • muted [Boolean] 指明了视频里的音频的默认设置。设置后，音频会初始化为静音。默认值是false,意味着视频播放的时候音频也会播放 。
  • played 一个 TimeRanges 对象，指明了视频已经播放的所有范围。
  • preload 该枚举属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么。可能是下列值之一：
    • none 提示作者认为用户不需要查看该视频，服务器也想要最小化访问流量；换句话说就是提示浏览器该视频不需要缓存。
    • metadata 提示尽管作者认为用户不需要查看该视频，不过抓取元数据（比如：长度）还是很合理的。
    • auto 用户需要这个视频优先加载；换句话说就是提示：如果需要的话，可以下载整个视频，即使用户并不一定会用它。
    • 空字符串：也就代指 auto 值。
    • autoplay 属性优先于 preload 假如用户想自动播放视频。
  • poster 一个海报帧的URL，用于在用户播放或者跳帧之前展示。如果属性未指定，那么在第一帧可用之前什么都不会展示；之后第一帧就像海报帧一样展示。
  • src 要嵌到页面的视频的URL。可选；你也可以使用video块内的 元素来指定需要嵌到页面的视频。
  • width 视频显示区域的宽度，单位是CSS像素。

时间偏移量目前是指定为float类型的值，表示偏移的秒数

###事件
同之前内容。

###业内实例
####爱奇艺、腾讯视频、优酷
三大视频网站都是使用的是<video>元素来播放视频。
####哔哩哔哩
哔哩哔哩使用的是自己开源的播放器flv.js
不过基本上也是用的<video>元素

####现在github上star最多的视频播放器一个是videojs/video.js,另一个是哔哩哔哩的flv.js,还有sampotts/plyr。音频视频播放器mediaelement/mediaelement