前端多媒体兼容

多媒体

在前端我们进行多媒体操作，会用到下面两个标签：
audio标签和video标签

<audio src="music.mp3"></audio>
<video src="movie.mov" width=320 height=240></video>

由于视频会占据一定的空间，所以多出了width和height属性。

的兼容用法

由于W3C没有定义浏览器的音频格式，所以我们要进行兼容。

<audio>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.mp3" type="audio/x-wav">
    <source src="music.mp3" type"audio/ogg">
</audio>

其中type属性是可选属性，可以帮助浏览器更快的进行解码。

的兼容用法

以上是一些主流的浏览器兼容格式，还有其他的格式
音频
视频

用JS判断浏览器对音频格式的兼容可以用下面的方法

var a = new Audio();
a.canPlayType('audio/nav');

canPlayType的参数是待检查的格式，如果兼容，返回”Maybe”或”probably”；如果不支持，则返回空字符串。

由于还没有实现video的构造函数，我们必须创建一个video标签，然后获取DOM对象，才可以调用canPlayType方法。