5.1　　使用audio和video元素

　　　　　　HTML5新增了<audio>和<video>两个元素，开发者可以通过这两个元素在HTML页面上

　　　　　　播放音频、视频。无须在浏览器上安装任何插件，只要浏览器本身支持HTML5规范即可。

　　　　　　不仅如此，开发者使用这两个元素来播放音频、是视频也十分简单。

　　　　　　音频播放代码示范：

　　　　　　　　<h2>音频播放</h2>

　　　　　　　　<audio src="http://www.mamicode.com/demo.ogg" controls>

　　　　　　　　您的浏览器不支持audio元素

　　　　　　　　</audio>

　　　　　　视频播放代码示范：

　　　　　　　　<<h2>视频播放</h2>

　　　　　　　　<videosrc="http://www.mamicode.com/movie.webm" controls>

　　　　　　　　您的浏览器不支持video元素

　　　　　　　　</video>

　　　　　　以上代码可以看到，HTML新增的两个元素实现音频和视频的播放是如此的简单。在元素的开始

　　　　　　标签和结束标签之间放置文本内容，当浏览器不支持以上标签时，就会显示这段文本。

　　　　　　<audio>、<video>支持的属性

　　　　　　　　src：指定播放音频、视频的URL地址。

　　　　　　　　autoplay：该属性值要么是autoplay，要么完全省略属性值。如果指定了该属性，那么当音频、视频

　　　　　　　　　　　　　　装载完后会自动播放。

　　　　　　　　controls：该属性值要么是controls，要么完全省略属性值。如果指定了该属性，播放音频、视频时则显示播放控制条。

　　　　　　　　loop：该属性值要么是loop，要么完全省略属性值。如果指定了该属性，音频、视频播放完成后则会再次重复播放。

　　　　　　　　perload：该属性指定是否预加载音频、视频。

　　　　　　　　该属性支持如下几个属性值：

　　　　　　　　　　auto：预加载音频、视频。

　　　　　　　　　　metadata：只预加载音频、视频的元数据，如媒体字节数、第一帧、播放列表、持续时间等。

　　　　　　　　　　none：不执行预加载。

　　　　　　　　　　如果指定了autoplay属性，该属性将会被忽略。

　　　　　　　　poster：该属性只对<video>元素有效，该属性指定一张图片的URL。当视频下载完成、开始播放之前，该元素将会

　　　　　　　　　　　　 显示该属性所指定的图片。

　　　　　　　　width：该属性只对<video>元素有效，指定视频播放器的宽度。

　　　　　　　　height：该属性只对<video>元素有效，指定视频播放器的高度。

　　　　　　各浏览器的音频支持情况：

　　　　　　　　音频格式　　　　　　　　Internet Explorer9　　　　Firefox　　　　Opera　　　　Chrome

　　　　　　　　WAV格式(*.wav)　　　　支持　　　　　　　　　　　　支持　　　　　支持　　　　　  支持

　　　　　　　　MP3　　　　　　　　　　支持　　　　　　　　　　　　不支持　　　　不支持　　　　　支持

　　　　　　　　OGG Vobis　　　　　　 不支持　　　　　　　　　　　  支持　　　　　支持　　　　　  支持

　　　　　　各浏览器的视频支持情况：

　　　　　　　　视频格式　　　　　　　　Internet Explorer9　　　　Firefox　　　　Opera　　　　Chrome

　　　　　　　　OGG Theora　　　　　　　 不支持　　　　　　　　　支持　　　　　  支持　　　　　  支持

　　　　　　　　H.264　　　　　　　　　　  支持　　　　　　　　　 不支持　　　　  不支持　　　　　支持

　　　　　　　　VP8　　　　　　　　　　     支持　　　　　　　　　  支持　　　　　  支持　　　　　  支持

　　　　　　考虑到各浏览器对音频、视频的支持互不相同，开发者可能希望为<audio>元素、<video>元素指定多个媒体源，

　　　　　　此时就可以借助于<source>子元素来实现。

　　　　　　<source>元素可指定如下两个重要属性。

　　　　　　　　src：该属性指定音频、视频文件的URL。

　　　　　　　　type：该属性指定音频、视频文件的类型，该属性的值既可以是简单的MIME字符串，例如audio/ogg、

　　　　　　　　　　　　audio/mpeg等，也可以使MIME字符串并带codecs属性，codecs属性用于指定该视频文件的

　　　　　　　　　　　　编码格式。例如，可以指定为audio/ogg;codecs="vobis"。通常来说，指定codecs属性可以

　　　　　　　　　　　　提供更多信息，更便于浏览器判断是否能播放此种类型的音频、视频。

　　　　　　代码示范：

　　　　　　　　<h2>音频播放</h2>

　　　　　　　　<audio controls>

　　　　　　　　　　<!--让浏览器依次选择适合自己播放的音频文件-->

　　　　　　　　　　<source src="http://www.mamicode.com/demo.ogg" type="audio/ogg" media="aaa"/>

　　　　　　　　　　<source src="http://www.mamicode.com/demo.mp3" type="audio/mpeg"/>

　　　　　　　　　　<source src="http://www.mamicode.com/demo.wav" type="audio/x-wav"/>

　　　　　　　　</audio>

　　　　　　对于上面代码来说，只要该浏览器支持<audio>元素，无论该浏览器是支持OGG Vobis压缩格式，

　　　　　　还是支持MP3压缩格式，或是只支持WAV格式，该浏览器总可以找到适合自己的音频文件，因此

　　　　　　总可以正常播放，视频播放也是如此。