HTML5有原生的音频和视频元素,可以直接使用音频视频元素嵌入音频和视频。
音频和视频概述
1、视频容器
音频文件或视频文件,都是容器文件。视频文件包含了音频轨道、视频轨道和其他一些元数据。视频播放时,音频轨道和视频轨道是绑定在一起的。元数据包含了视频的封面、标题、子标题、字幕等相关信息。主流视频容器支持的格式有:.avi、.flv、.mp4、.mkv、.ogg、.webm。
2、编解码器
音频和视频编解码是一组算法,用于对一段特定的音频或视频进行编码和解码,使得音频和视频能够传输和播放。原始的媒体文件体积非常巨大,如果不进行编码,传输的数据量将会非常大。既然进行了编码,如果不进行解码,就无法将编码后的数据重组为原始的媒体数据。主流的音频编解码器:AAC、MPEG-3、Ogg Voribs,视频编解码器:H.264、VP8、Ogg Theora。
video 视频元素
以往的视频播放,需要借助Flash插件才可以实现。但Flash插件不稳定,经常导致浏览器崩溃,因此许多浏览器开始抛弃它,目前谷歌浏览器已经抛弃了Flash插件支持,取而代之的是HTML5的video元素。
属性名称 | s说明 |
---|---|
src | 视频资源的 URL |
width | 视频宽度 |
height | 视频高度 |
autoplay | 设置后,表示立刻开始播放视频 |
preload | 设置后,表示预先载入视频 |
controls | 设置后,表示显示播放控件 |
loo | 设置后,表示反复播放视频 |
muted | 设置后,表示视频处于静音状态 |
poster | 指定视频数据载入时显示的图片 |
1、嵌入一个WebM视频
<video src="test.webm" width="800" height="600"></video>
解析:插入一个视频,主流的视频为.webm,.mp4,.ogg 等。src 表示资源的URL;width 表示窗口宽度;height 表示高度。
2、附加一些属性
<video src="test.webm" width="800" height="600" autoplay controls loop muted></video>
解析:autoplay 表示自动开始播放;controls 表示显示播放控件;loop 表示循环播放;muted 表示静音。
audio 音频元素
和 video 元素一样,audio 元素用于嵌入音频内容,而音频元素的属性和视频元素类似。音频的支持度和视频类似,同样使用元素引入多种格式兼容即可。主流的音频格式有:.mp3,.m4a,.ogg,.wav。
属性名称 | s说明 |
---|---|
src | 视频资源的 URL |
autoplay | 设置后,表示立刻开始播放视频 |
preload | 设置后,表示预先载入视频 |
controls | 设置后,表示显示播放控件 |
1、嵌入一个音频
<audio src="test.mp3" controls autoplay></audio>
解析:和嵌入视频一个道理。