HTML5实战与剖析之媒体元素(4、检测编解码器的支持和Audio构造函数)

骑猪看日落 2022-09-20 06:11 162阅读 0赞

# 　　HTML5媒体元素检测编解码器的支持情况 #

虽然媒体元素可以实现音频和视频功能，但是并不是所有浏览器都支持video标签和audio标签的所有编解码器，这意味着开发人员必须提供很多歌媒体来源。在JavaScript API中能够检测浏览器是否支持某种格式和编解码器。这两个媒体元素都有一个canPlayType()方法，该方法接收一种格式/编解码器字符串，返回”probably”、”maybe”或者””(空字符串)。空字符串是假值，而”probably”和”maybe”都是真值，所以if条件测试中可以转成true,所以在if中可以作为条件进行判断。检测格式/编解码器的方法如下

***JavaScript代码***

if(audio.canPlayType("audio/mpeg")){
    	//进一步编写
    }

如果给canPlayType()传入了一种MIME类型，则返回值很可能是”maybe”或者空字符串。这是因为媒体文件本身只不过是音频或者视频的一个容器，真正决定文件能否播放的还是编码格式。在同时传入MIME类型和编码器的情况下，可能性就会增加，返回的字符串会变成”probably”。小例子如下

***HTML代码***

***JavaScript代码***

var audio = document.getElementById("myAudio");
    
    //很可能"maybe"
    if(audio.canPlayType("audio/mpeg")){
    	//进一步编写
    }
    
    //可能是"probably"
    if(audio.canPlayType("audio/ogg; codecs=\"vorbis\"")){
    	//进一步编写
    }

编解码器必须用引号引起来才行。下面就为大家介绍一下已经得到支持的音频格式和编解码器。

AAC格式：字符串audio/mp4，codecs=”mp4a.40.2”;支持的浏览器：IE9+、Safari 4+和iOS版Safari

MP3格式：字符串audio/mpeg;支持的浏览器：IE9+、Chrome

Vorbis格式：字符串audio/ogg，codecs=”vorbis”;支持的浏览器：Firefox 3.5+、Chrome、Opera 10.5+

WAV格式：字符串audio/wav，codecs=”1”;支持的浏览器：Firefox 3.5+、Opera 10.5+、Chrome

下面是用canPlayType()来检测视频格式编解码器。

H.264格式：字符串video/mp4，codecs=”avc1.42E01E，mp4a.40.2”;支持的浏览器：IE9+、Safari 4+、iOS版Safari、Android版Webkit

Theora：字符串video/ogg，codecs=”theora”;支持的浏览器：Firefox 3.5+、Opera 10.5+、Chrome

WebM：video/webm，codecs=”vp8，vorbis”;支持的浏览器：Firefox 4+、Opera 10.6+、Chrome

# 　　HTML5媒体元素之Audio构造函数 #

在原生的JavaScript中，有一个构造函数Audio，可以在任何时候播放音频。从都是DOM元素的角度出发，Audio对象和Image对象很类似，但是Audio对象不用像Image对象那样必须插入到文档中。只要创建一个新实例，传入音频源文件即可。小例子如下

***JavaScript代码***