HTML5：音视频相关元素

支持video元素的视频格式

HTML5使用<video>元素用来播放视频，目前<video>元素支持三种视频编码。

• MP4：这是一种具有H.264视频编码和AAC音频编码的格式
• WebM：这是一种具有VP8视频编码和Vorbis音频编码的格式
• Ogg：是一种具有Theora视频编码和Vorbis音频编码的格式。

HTML5视频在浏览器中的支持情况如下图所示：

一般提供ogg和mp4格式，就可以支持所有主流浏览器了。

video元素及其属性

        使用video元素播放视频，也不需要使用任何插件，只需支持 HTML5 的浏览器即可。基本格式如下： <video src="…" controls="controls"></video> 在 <video> 和 </video>之间可以放置文本内容，这些文本信息将会被显示在那些不支持 <video> 标签的浏览器中。 video元素常用的属性如下：

• src：规定要播放的视频文件的地址
• controls：添加该属性，则向用户显示带有播放、暂停和音量调节、全屏的视频控件，不同的浏览器会展示不同样式的控制面板
• autoplay：添加该属性，可在视频加载完成后自动播放
• loop：添加该属性，可使视频连续播放
• preload：用于控制视频的加载方式，该属性有三种取值，当取值为none时,表示不加载；当取值为auto时,表示自动加载，网页加载完就加载整个视频；当取值为metadata时，只载入视频的元数据。
• width：设置视频播放器的宽度
• height：设置视频播放器的高度

source元素及其属性        

    <source> 标签称为媒体元素，可为浏览器提供多种媒体格式的资源，以兼容用户的浏览器。 source元素的常用属性如下：

• src：规定要播放的视频文件的地址
• type:规定媒体资源的MIME类型

用法示例：

1. <video controls="controls" autoplay="autoplay">
2.   <source src="other/Wildlife.ogv" type="video/ogg">
3.   <source src="other/Wildlife.webm" type="video/webm">
4.   <source src="other/Wildlife.mp4" type="video/mp4">
5.   您的浏览器不支持video元素。
6. </video>

支持audio元素的音频格式

HTML5使用<audio>元素用来播放音频，目前<audio>元素支持三种音频编码。

• WAV：为微软公司(Microsoft)开发的一种声音文件格式，采用44.1K的取样频率，16位量化数字，声音文件质量和CD相差无几。
• MP3：是一种音频压缩技术，用来大幅度地降低音频数据量。将音乐以1:10甚至1:12的压缩率压缩。
• Ogg：全称应该是OGGVobis(oggVorbis)是一种新的音频压缩格式，Ogg是完全免费、开放和没有专利限制的，文件扩展名是.OGG。

HTML5音频在浏览器中的支持情况如下图所示：

一般提供ogg和mp3格式，就可以支持所有主流浏览器了。

audio元素及其属性

        使用audio元素播放音频，不需要使用任何插件，只需支持 HTML5 的浏览器即可。基本格式如下： <audio src="…" controls="controls"></audio> 在 <audio> 和 </audio>之间可以放置文本内容，这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。 audio元素常用的属性如下：

• src：规定要播放的音频文件的地址
• controls：添加该属性，则向用户显示带有播放、暂停和音量调节的控件，不同的浏览器会展示不同样式的控制面板
• autoplay：添加该属性，可在音频加载完成后自动播放
• loop：添加该属性，可使音频连续播放
• preload：用于控制音频的加载方式，该属性有三种取值，当取值为none时,表示不加载；当取值为auto时,表示自动加载，网页加载完就加载整个音频；当取值为metadata时，只载入音频的元数据。

source元素及其属性

   <source> 标签称为媒体元素，可为浏览器提供多种媒体格式的资源，以兼容用户的浏览器。 source元素的常用属性如下：

• src：规定要播放的音频文件的地址
• type:规定媒体资源的MIME类型

用法示例：

1. <audio controls="controls">
2.   <source type="audio/mpeg" src="Try Everything.mp3">
3.   <source type="audio/ogg" src="Try Everything.ogg">
4.   您的浏览器不支持 audio 标签。
5. </audio>