[HTML5]-6-视频与音频
引言
这篇文章介绍HTML5中的video标签以及audio标签。
文章目录
0×1.使用video标签嵌入视频
video标签是HTML5中定义的新标签，在HTML4以前的版本中并没有这个标签，请看下面的实例，在HTML文档中插入视频播放窗口：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>video标签实例</title> </head> <body> <!--src属性中指定要播放的视频文件的相对路径或绝对路径，也可以是url；width是视频播放窗口的宽度，height是视频播放窗户的高度，poster属性指定视频第一帧显示的图片，即未播放前，我们看到的视频窗口中显示的图片；controls属性告诉浏览器，显示播放窗口的控制面板，即我们看到的播放按钮，静音按钮以及"进度条"--> <video src="test.mp4" width="352" height="238" poster="images/HTML5-video.jpg" controls></video> </body> </html>
显示效果：
本例中因为test.mp4这个文件并不存在，所以播放按钮不可点，大家可以找个视频在本地用相对路径测试一下，除了上面介绍的常用属性外，还有下面这几个常用属性，这些属性的使用方法同controls属性，直接写在video标签括号中即可，与其他属性用空格隔开：
autoplay：页面加载后自动播放，默认video需要我们手动点击播放按钮来播放视频，设置了此属性后，页面加载完成将会自动播放视频；
preload：页面加载后是否自动缓存视频，这个属性和其他属性设置有所不同，它有三个值，默认为perload="none"，即不自动缓存视频，如果设置成perload="auto"，当页面加载时将会自动缓存视频，如果设置成perload="metadata"，则只自动加载第一帧以及视频宽高等元数据；
loop：视频播放完成后，自动循环播放，默认为不循环；
muted：设置视频默认为静音状态，设置后需要手动点击喇叭按钮开启声音，默认为不静音；
并不是所有浏览器都支持所有格式的视频，为了兼容不同的浏览器，最好的方法是将同一个视频保存未不同的视频后缀，然后使用下面的方法兼容不同浏览器：
<!--在video标签对中，添加source标签，并在其src属性中添加同一个文件的不同后缀的版本，这样如果浏览器不支持mp4格式，则会尝试播放flv格式的文件，并逐个往下尝试--> <video width="640" height="480" controls> <source src="test.mp4"> <source src="test.flv"> <source src="test.webm"> </video>
0×2.使用audio标签播放音频
audio标签的属性和video的效果差不多，除了全局属性和事件属性外，audio只有下面这四个属性：
src：指定音频文件位置，可以是相对或绝对路径，也可以是url；
autoplay：自动播放，同video；
preload：是否自动缓存，同video；
controls：是否显示控制面板，同video；
请看下面的实例：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>audio标签实例</title> </head> <body> <!--因为test.mp3文件并不存在，所以下面显示的audio播放按钮不可点--> <audio src="test.mp3" controls></audio> </body> </html>
显示效果：
与video相同，audio也支持兼容不同浏览器的冗余，将同一个音频文件转换成不同的格式，确保不同浏览器都能播放这个音频文件：
<!--浏览器首先会尝试播放mp3文件，如果不支持，则会尝试播放m4a文件，直到找到一个自己支持的播放格式，虽然有三条source，浏览器只会播放这个音频文件一次--> <audio controls> <source src="test.mp3"> <source src="test.m4a"> <source src="test.wav"> </audio>