HTML5 音频和视频
HTML5 音频和视频
要点：
- 音频和视频概述
- video 视频元素
- audio 音频元素
HTML5有原生的音频和视频元素，可以直接使用音频视频元素嵌入音频和视频。
音频和视频概述
1、视频容器
音频文件或视频文件，都是容器文件。视频文件包含了音频轨道、视频轨道和其他一些元数据。视频播放时，音频轨道和视频轨道是绑定在一起的。元数据包含了视频的封面、标题、子标题、字幕等相关信息。主流视频容器支持的格式有：.avi、.flv、.mp4、.mkv、.ogg、.webm。
2、编解码器
音频和视频编解码是一组算法，用于对一段特定的音频或视频进行编码和解码，使得音频和视频能够传输和播放。原始的媒体文件体积非常巨大，如果不进行编码，传输的数据量将会非常大。既然进行了编码，如果不进行解码，就无法将编码后的数据重组为原始的媒体数据。主流的音频编解码器：AAC、MPEG-3、Ogg Voribs，视频编解码器：H.264、VP8、Ogg Theora。
3、浏览器支持情况
在HTML5规范本中，打算指定编解码器，但由于浏览器厂商已经有了自己的标准，而且有些编解码器受到专利保护，因此放弃了统一规范的要求。
| 容器格式 | 视频编解码 | 音频编解码 | IE9+ | Firefox5+ | Chrome13+ |
|---|---|---|---|---|---|
| WebM | VP8 | Vorbis | × | √ | √ |
| OGG | Theora | Vorbis | × | √ | √ |
| MPEG-4 | H.264 | AAC | √ | × | √ |
通常浏览器至少会支持OGG和MP4其中一种，但同时对于新的高清标准WebM也是非常需要的。WebM不仅清晰度高，而且免费，可以不受限制许可的使用源码和专利权。
video 视频元素
以往的视频播放，需要借助Flash插件才可以实现。但Flash插件不稳定，经常导致浏览器崩溃，因此许多浏览器开始抛弃它，目前谷歌浏览器已经抛弃了Flash插件支持，取而代之的是HTML5的video元素。
| 属性名称 | 说明 |
|---|---|
| src | 视频资源的 URL |
| width | 视频宽度 |
| height | 视频高度 |
| autoplay | 设置后，表示立刻开始播放视频 |
| preload | 设置后，表示预先载入视频 |
| controls | 设置后，表示显示播放控件 |
| loo | 设置后，表示反复播放视频 |
| muted | 设置后，表示视频处于静音状态 |
| poster | 指定视频数据载入时显示的图片 |
1、嵌入一个WebM视频
<video src="test.webm" width="800" height="600">video>
解析：
2、附加一些属性
<video src="test.webm" width="800" height="600" autoplay controls loop muted>video>
解析：autoplay 表示自动开始播放；controls 表示显示播放控件；loop 表示循环播放；muted 表示静音。
3、预加载设置
<video src="http://li.cc/test.webm" width="800" height="600" controls preload="none">video>
解析：preload 属性有三个值：none 表示播放器什么都不加载；metadata 表示播放之前只能加载元数据（宽高、第一帧画面等信息）；auto 表示请求浏览器尽快下载整个视频。
4、使用预览图
<video src="http://li.cc/test.webm" width="800" height="600" controls poster="img.png">video>
解析：poster 属性表示在视频的第一帧，做一张预览图。
5、兼容多个浏览器
<video width="800" height="600" controls poster="img.png"><source src="test.webm"><source src="test.mp4"><source src="test.ogg"><object>这里引入 flash 播放器以实现IE9以下浏览器的播放，但现在没必要了object>
video>
解析：通过
audio 音频元素
和 video 元素一样，audio 元素用于嵌入音频内容，而音频元素的属性和视频元素类似。音频的支持度和视频类似，同样使用
| 属性名称 | 说明 |
|---|---|
| src | 视频资源的 URL |
| autoplay | 设置后，表示立刻开始播放视频 |
| preload | 设置后，表示预先载入视频 |
| controls | 设置后，表示显示播放控件 |
1、嵌入一个音频
<audio src="test.mp3" controls autoplay>audio>
解析：和嵌入视频一个道理。
2、兼容多个浏览器
<audio controls><source src="test.mp3"><source src="test.m4a"><source src="test.wav">
audio>
解析：和视频元素一样，使用不用格式的音频文件来实现不同浏览器的兼容性。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！