通过两个原生的媒体元素向HTML页面中嵌入音频和视频
一.音频和视频概述
首先,我们要理解两个概念:容器(container)和编解码器(codec)
1.视频容器
音频文件或视频文件,都只是一个容器文件。视频文件包含了音频轨道,视频轨道和其他一些元数据,视频播放时,音频轨道和视频轨道是绑定在一起的,元数据包含了视频的封面,标题,子标题,字幕等相关信息,主流视频容器支持的格式为:.avi,.flv,.mp4,.mkv ,ogg,webm
2.编解码器
音频和视频编码和解码是一组算法,用来对一段特定音频或视频进行解码和编码,以便音频和视频能够正常播放。原始的媒体文件体积非常巨大,如果不对其进行编码,那么数据量是非常惊人的,在互联网上传播则要耗费无法忍受的时间,如果不对其进行解码,就无法将解码后的数据重组为原始的媒体数据。主流的音频编解码器:H.264 ,VP8,Ogg Theora。
3.浏览器支持情况
起初,HTML5规范本来打算指定编解码器,但实施起来极为困难,部分厂商已有自己的标准,不愿实现标准;而有一些编解码器受专利保护,需要支付昂贵费用,最终放弃了统一规范的要求,导致各个浏览器实现自己的标准。
容器格式 视频编解码器 音频解码器 IE9+ Firefox5+ Chrome13+
WEBM VP8 Vorbis F T T
OGG Theora Vorbis F T T
MPEG-4 H.264 AAC T F 疑问?
除了上面三款浏览器,还有Safaris5+支持MPEG-4,Opera11支持WebM和OGG,通过这组数据,只要备好MP4和OGG格式的即可,但对于新的高清标准WebM,当然是非常必要的,因为WebM不但清晰度高,而且免费,不受限制许可的使用源码和专利权。
目前,Chrome浏览器,为了推广WebM格式的视频,声称未来将放弃H.256编码的视频,所以有可能在以后的版本中无法播放MP4的视频,当然,目前演示的版本还是支持的
二.video视频元素
以往的视频播放,需要借助Flash插件才可以实现,但Flash插件的不稳定性经常让浏览器崩溃,因此有很多浏览器和系统厂商开始抛弃他,而取代他的正是HTML5的video元素
<video>元素的属性
属性名称 说明
src 视频资源的URL
width 视频宽度
height 视频高度
autoplay 设置后,表示立即开始播放视频
preload 设置后,表示预先载入视频
controls 设置后,表示显示播放控件
loop 设置后,表示反复播放视频
muted 设置后,表示视频处于静音状态
poster 指定视频数据载入时显示的图片
1.嵌入一个WebM视频
解释:<video>插入一个视频,主流的视频为:.webm,.mp4,..ogg等,src表示资源URL;width表示宽度,height表示高度
2.附加一些属性
解释:<autoplay>表示自动开始播放,controls表示显示播放控件,loop表示循环比方,muted表示静音
3.预加载设置
解释:preload属性有三个值:none表示播放器什么都不加载,metadata表示播放之前只能加载元数据(宽高,第一帧画面等信息);auto表示请求浏览器尽快下载整个视频
4.使用预览图
解释:poster属性表示在视频的第一帧,做一张预览图。
5.兼容多个浏览器
解释:通过<source>元素引入多种格式的视频,让更多的浏览器保持兼容。
二.audio音频元素
和video元素一样,audio元素用于嵌入音频内容,而音频元素的属性和视频元素类似,音频的支持度和视频类似,使用<source>元素引入多种格式兼容即可,主流的音频格式有:。mp3,.m4a,.ogg,.wav
属性名称:
src:音频资源的URL
autoplay:设置后,表示立刻开始播放视频
preload:设置后,表示预先载入音频
controls:设置后,标识显示播放控件
1.嵌入一个音频
解释:和嵌入视频一个道理
2.兼容多个浏览器
解释:略
更多涉及到API的JavaSript控制,将在以后的基于JAVASCript基础后讲解
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>视频和音频</title>
</head>
<body>
<!--<video src="video.mkv" width="640" height="680" controls="" autoplay="" loop=""muted=""></video>
作者:1240059252@qq.com
时间:2017-10-28
描述:
-->
<!--<video src="video.mkv" width="640" height="680" controls="" poster="1.jpg"></video>
作者:1240059252@qq.com
时间:2017-10-28
描述:
-->
<!--<video src="video.mkv" width="640" height="680" controls="" preload="none"></video>
作者:1240059252@qq.com
时间:2017-10-28
描述:
-->
<!--
<video src="video.mkv" width="640" height="680" controls="" preload="metadata"></video>
-->
<!--<video src="video.mkv" width="640" height="680" controls="" preload="auto"></video>
作者:1240059252@qq.com
时间:2017-10-28
描述:
-->
<!--在遇到浏览器不支持某一视频格式时,可采用以下方法解决:
作者:1240059252@qq.com
时间:2017-10-28
描述:
-->
<video width="640" height="680" controls="" >
<source src="video.mkv"></source>
<source src="video.webm"></source>
<source src="video.mp4"></source>
<source src="video.ogg"></source>
<object>这里引入flash播放器实现IE9以下,但没必要了</object>
</video>
<audio src="test.mp3" controls "></audio>
</body>
</html>