HTML5 音频和视频(20160808-0008)
2016-08-24 16:31
190 查看
一、音频和视频概述
首先,要理解两个概念:容器(container)和编解码器(codec)。
1、视频容器
音频文件或视频文件,都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其它一些元数据。视频播放时,视频轨道和音频轨道是绑定在一起的。元数据包含了视频封面、标题、子标题、字幕等相关信息。主流视频容器支持的格式为: .avi .flv .mp4 .mkv .ogg .webm。
2、编解码器
音频和视频编码/解码是一组算法,用来对一段特定音频或视频进行解码和编码,以便音频和视频能够播放。原始的媒体文件体积非常巨大,如果不对其进行编码,那么数据量是非常惊人的,在互联网上传播则要耗费无法忍受的时间;如果不对其进行解码,就无法将编码后的数据重组为原始的媒体数据。主流的音频编解码器:ACC、MPEG-3、Ogg Voribs,视频编解码器:H.264、VP8、Ogg Theora。
3、浏览器支持情况
起初,HTML5 规范本来打算指定编解码器,但实施起来极为困难。部分厂商已有自己的标准,不愿实现标准;一些编解码器受专利保护,需要支付昂贵费用。最终放弃了统一规范的要求,导致各个浏览器实现自己的标准。
除了上面三款浏览器,还有 Safari5+ 支持 MPEG-4,Oprall 支持 WebM 和 OGG,通过这组数据,只要备好 MP4 和 OGG 格式即可,但对于新的高清标准 WebM,当然是非常必要的,因为 WebM 不但清晰度高,而且免费,不受限制许可的使用源码和专利权。
二、video 视频元素
以往的视频播放,需要借助 Flash 插件才可以实现。但 Flash 插件的不稳定性经常让浏览器导致崩溃,因此很多浏览器或系统厂商开始抛弃它。而取代他的正式 HTML5 的video 元素。
1、嵌入一个 WebM 视频
<video src="xxx.webm" width="200" height="300"> </video>
解释:<video> 插入一个视频,主流的视频为 .webm .mp4 .ogg等。src 表示资源URL;width 表示宽度;height 表示高度。
2、附加一些属性
<video src="xxx.webm" width="200" height="300" autoplay controls loop muted> </video>
3、预加载设置
<video src="http:// xxx.webm" width="200" height="300" controls preload="none"> </video>
解释:preload 属性有三个值:none表示播放器什么都不加载;metadata 表示播放之前只能加载元数据(宽高、第一帧画面等信息);auto 表示请求浏览器尽快下载整个视频。
4、使用预览图
<video src="http:// xxx.webm" width="200" height="300" controls poster="xxx.png"> </video>
解释:poster 属性表示在视频的第一帧,做一张预览图。
5、兼容多个浏览器
<video src="xxx.webm" width="200" height="300" autoplay controls poster="xx.png">
<source src="xx.webM">
<source src="xx.mp4">
<source src="xx.ogg">
<object>实现flash插件播放,如果屏蔽IE9以下则不需要</object>
</video>
三、audio 音频元素
和 video 元素一样,audio 元素用于嵌入音频内容,而音频元素的属性和视频元素的类似。视频支持度和视频类似,使用 <source> 元素引入多种格式兼容即可。主流的视频格式有: .mp3 .m4a .ogg .wav。
1、嵌入一个音频
<audio src="xxx.mp3" controls autoplay> </audio>
2、兼容多个浏览器
<audio>
<source src="xx.mp3">
<source src="xx.m4a">
<source src="xx.wav">
</audio>解释:略
示例代码地址
首先,要理解两个概念:容器(container)和编解码器(codec)。
1、视频容器
音频文件或视频文件,都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其它一些元数据。视频播放时,视频轨道和音频轨道是绑定在一起的。元数据包含了视频封面、标题、子标题、字幕等相关信息。主流视频容器支持的格式为: .avi .flv .mp4 .mkv .ogg .webm。
2、编解码器
音频和视频编码/解码是一组算法,用来对一段特定音频或视频进行解码和编码,以便音频和视频能够播放。原始的媒体文件体积非常巨大,如果不对其进行编码,那么数据量是非常惊人的,在互联网上传播则要耗费无法忍受的时间;如果不对其进行解码,就无法将编码后的数据重组为原始的媒体数据。主流的音频编解码器:ACC、MPEG-3、Ogg Voribs,视频编解码器:H.264、VP8、Ogg Theora。
3、浏览器支持情况
起初,HTML5 规范本来打算指定编解码器,但实施起来极为困难。部分厂商已有自己的标准,不愿实现标准;一些编解码器受专利保护,需要支付昂贵费用。最终放弃了统一规范的要求,导致各个浏览器实现自己的标准。
除了上面三款浏览器,还有 Safari5+ 支持 MPEG-4,Oprall 支持 WebM 和 OGG,通过这组数据,只要备好 MP4 和 OGG 格式即可,但对于新的高清标准 WebM,当然是非常必要的,因为 WebM 不但清晰度高,而且免费,不受限制许可的使用源码和专利权。
二、video 视频元素
以往的视频播放,需要借助 Flash 插件才可以实现。但 Flash 插件的不稳定性经常让浏览器导致崩溃,因此很多浏览器或系统厂商开始抛弃它。而取代他的正式 HTML5 的video 元素。
video 属性名称 | 说明 |
---|---|
src | 视频资源的URL |
width | 视频宽度 |
height | 视频高度 |
autoplay | 设置后,立刻开始播放视频 |
preload | 设置后,预先载入视频 |
controls | 设置后,显示播放控件 |
loop | 设置后,反复播放视频 |
muted | 设置后,视频处于静音状态 |
poster | 指定视频数据载入时显示的图片 |
<video src="xxx.webm" width="200" height="300"> </video>
解释:<video> 插入一个视频,主流的视频为 .webm .mp4 .ogg等。src 表示资源URL;width 表示宽度;height 表示高度。
2、附加一些属性
<video src="xxx.webm" width="200" height="300" autoplay controls loop muted> </video>
3、预加载设置
<video src="http:// xxx.webm" width="200" height="300" controls preload="none"> </video>
解释:preload 属性有三个值:none表示播放器什么都不加载;metadata 表示播放之前只能加载元数据(宽高、第一帧画面等信息);auto 表示请求浏览器尽快下载整个视频。
4、使用预览图
<video src="http:// xxx.webm" width="200" height="300" controls poster="xxx.png"> </video>
解释:poster 属性表示在视频的第一帧,做一张预览图。
5、兼容多个浏览器
<video src="xxx.webm" width="200" height="300" autoplay controls poster="xx.png">
<source src="xx.webM">
<source src="xx.mp4">
<source src="xx.ogg">
<object>实现flash插件播放,如果屏蔽IE9以下则不需要</object>
</video>
三、audio 音频元素
和 video 元素一样,audio 元素用于嵌入音频内容,而音频元素的属性和视频元素的类似。视频支持度和视频类似,使用 <source> 元素引入多种格式兼容即可。主流的视频格式有: .mp3 .m4a .ogg .wav。
属性名称 | 说明 |
---|---|
src | 音频资源的URL |
autoplay | 设置后,立刻开始播放 |
preload | 设置后,预先载入音频 |
controls | 设置后,显示播放器控件 |
<audio src="xxx.mp3" controls autoplay> </audio>
2、兼容多个浏览器
<audio>
<source src="xx.mp3">
<source src="xx.m4a">
<source src="xx.wav">
</audio>解释:略
示例代码地址
相关文章推荐
- 移动端HTML5音频与视频问题及解决方案
- HTML5-音频audio和视频video标签
- html5音频和视频
- HTML5-音频和视频的处理
- HTML5音频与视频
- 使用HTML5捕捉音频与视频信息概述及实例
- 【面向HTML5--视频和音频】
- Html5(5)视频、音频 及 拖放
- HTML5中的音频、视频(HTML Multimedia)
- 解决chromium对html5 标签的 mp3 等视频音频网页的兼容性问题
- HTML5:向网页中添加视频和音频
- html5的视频音频放置方法
- Html5新属性audio音频和video视频的控制详解(controls)
- HTML5使用jplayer播放音频、视频
- HTML5音频和视频播放
- HTML5 audio与video标签实现视频播放,音频播放
- Html5之audio音频和video视频的控制详解(controls)
- HTML5学习笔记第一节(智能提示和视频音频标签)
- HTML5中的音频和视频播放
- 在 Windows Server 2008 (R2)上的IE9不支持HTML5 视频与音频解决办法