H5多媒体能力

Tiffany_c4df

发布于 2019-11-28 09:37:10

2K00

代码可运行

文章被收录于专栏：前端小课堂前端小课堂

运行总次数：0

代码可运行

H5多媒体能力 author: @TiffanysBear

H5多媒体能力

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

##例子

###音频

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

###视频

<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 (最大声).

###业内实例

##\<vedio>标签

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

属性

autoplay [Boolean] 视频会马上自动开始播放，不会停下来等着数据载入结束。
buffered 这个属性可以读取到哪段时间范围内的媒体被缓存了。该属性包含了一个 TimeRanges 对象。
controls Gecko 会提供用户控制，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。
crossorigin 该枚举属性指明抓取相关图片是否必须用到CORS（跨域资源共享）。不加这个属性时，抓取资源不会走CORS请求(即，不会发送 Origin: HTTP 头)，保证其在 \ 元素中使用时不会被污染。如果指定非法值，会被当作指定了枚举关键字 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像素。