html5篇——音频/视频

这一篇介绍html5中音频和视频媒体播放元素。
以前我们要在网页上显示音频和视频，都是借助的插件（比如flash），现在html5推出了<audio>和<video>标签来添加音频和视频。

音频

音频在html5用<audio>元素来添加，使用方法如下：

<audio src="song.mp3" autoplay controls loop preload>你的浏览器不支持audio元素</audio>

在<audio></audio>之间你可以插入浏览器不支持<audio>元素的提示文本。比如我这里的“你的浏览器不支持audio元素”。

音频属性介绍

src：要播放的音频的url地址。

autoplay：音频在就绪后马上播放。

controls：向用户显示控件，就是上面图片里的控件。

loop：则音频循环播放，即播放完后再从头开始播放，直到按下控件上的暂停按钮，或者脚本调用pause方法。

muted: 设置或返回音频是否应该被静音(关闭声音)。

preload：音频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。取值：

“none”:不缓冲文件。

"auto":缓冲视频文件。

"metadata":仅仅缓冲文件的元数据。

<audio>元素支持的音频格式

当前<audio>元素支持的格式有三种ogg，MP3，wav.

ogg：全称是oggvorbis，简称ogg，扩展名是.ogg，是一种类似于MP3的音频压缩格式，ogg是完全免费、开放和没有专利限制的。ogg文件格式可以不断地进行大小和音质的改良，而不影响旧有的编码器活播放器。

MP3：全称是动态影像专家压缩标准音频层面3，简称mp3，扩展名.MP3，MP3是一种比较常见的音频压缩格式，它对音质会有一点损坏，但是对大多数用户来说压缩后的音质与未压缩的音质不会感觉到明显的下降。

wav：wav是微软公司开发的一种声音文件格式，它符合RIFF文件规范，用于保存windows平台的音频信息资源，标准格式化的wav文件和cd格式一样，也是44.1k的取样频率，16位量化数字，因此声音文件质量和cd相差无几。wav是最接近无损的音乐格式，所以文件相对也比较大（不推荐）。

音频格式的MIME类型

mp3:

MIME-type:audio/mpeg

ogg:

MIME-type:audio/ogg

wav:

MIME-type:audio/wav

音频格式浏览器支持情况

mp3: IE9及以上/chrome/safari

ogg: firefox/opera/chrome

wav: firefox/opera/safari

多个音频处理

因为各个浏览器对音频格式的支持状况不一样，为了能在各个浏览器上都正常显示，我们可以写多个音频格式。

<audio autoplay="autoplay" controls>
        <source src="song.mp3" type="audio/mpeg">
        <source src="song.ogg" type="audio/ogg">
        你的浏览器不支持audio元素
      </audio>

第一种格式如果不支持，则会执行第二种

视频

视频和音频的情况差不多，视频使用<video>元素来添加，使用方法如下（我这没有视频，就看个大致效果）：

<video src="vedio.mp4" controls loop autoplay preload poster="show.png" width="400px" heigt="400px">你的浏览器不支持vedio元素</video>

视频属性介绍

src: 指向视频文件的URL地址。

controls: 显示内置的播放空间，通常包括播放、暂停、定位以及音量。

poster: 规定视频下载时，或者在用户点击播放按钮钱以及视频不可用时显示的图像。如果设置该属性，则使用视频的第一帧来代替。

loop:  重复播放视频，直到按下控件上的暂停按钮或者从脚本调用pause方法。

muted: 设置或返回视频是否应该被静音(关闭声音)。

autoplay: 设置播放器缓冲足够多的内容之后是否开始自动播放视频。

preload: 定义需要多少缓冲，与音频一样.

height: 设置视频播放器的高度(以像素为单位)。

width: 设置视频播放器的宽度(以像素为单位)。

<video>元素支持的视频格式

当前<video>元素支持的视频格式有三种MP4,WebM,ogg。

mp4: 带有H.264视频编码和AAC音频编码的MPEG4文件。

WebM: 带有VP8视频编码和Vorbis音频编码的WenM文件。

ogg: 带有Theora视频编码和Vorbis音频编码的Ogg文件。

视频格式的MIME类型

MP4:

MIME-type: video/mp4

WebM:

MIME-type: video/webm

ogg:

MIME-type:video/ogg

视频格式浏览器支持情况

MP4: IE9及以上/chrome/firefox/safari/opera

WebM: chrome/firefox/opera

ogg: chrome/firefox/opera

多个视频处理

同音频一样，各个浏览器对视频格式的支持也不一样，所以我们需要写多个格式的视频文件，以便兼容，如下：

<video width="450" height="300" controls>
        <source src="video.mp4" type="video/mp4">
        <source src="video.ogg" type="video/ogg">
         你的浏览器不支持Video元素。
    </video>