JavaScript检测浏览器支持的视频格式以及音频格式

不同的浏览器支持的视频/音频格式有所不同，为了在多个浏览器上兼容视频/音频的播放，需要使用JavaScript检测浏览器所支持的视频/音频格式。

HTMLVideoElement和HTMLAudioElement继承于HTMLMediaElement，HTMLMediaElement的canPlayType()方法可以用来判断浏览器是否支持指定的多媒体格式。

语法

str = audioOrVideo.canPlayType(mediaType);

参数

• mediaType：字符串，多媒体的MIME类型

返回值

返回值为字符串，它有三个可能的值：

• 'probably'： 指定的多媒体类型应该可以播放
• 'maybe'： 不确定指定的多媒体类型是否可以播放
• '' ：空字符串，指定的多媒体类型不能播放

检测视频格式

HTMLVideoElement继承于HTMLMediaElement，可以使用canPlayType()方法来检测浏览是否支持指定的视频格式。

首先，创建<video>的实例对象：

const video = document.createElement('video');

使用canPlayType检测视频格式是否支持：

video.canPlayType('video/webm'); 

常用的视频格式：

• ogg: 'video/ogg'
• mp4: 'video/mp4'
• webm: 'video/webm'
• hls: 'application/x-mpegURL'

检测音频格式

同样，HTMLAudioElement继承于HTMLMediaElement，可以使用canPlayType()方法来检测浏览器是否支持指定的音频格式。

首先，创建<audio>实例对象：

const audio = document.createElement('audio');

使用canPlayType检测音频格式是否支持：

audio.canPlayType('audio/mpeg');

常用音频格式

• mp3: 'audio/mpeg'
• mp4: 'audio/mp4'
• aif: 'audio/x-aiff'