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

时间:2021-09-20 17:45:36

不同的浏览器支持的视频/音频格式有所不同,为了在多个浏览器上兼容视频/音频的播放,需要使用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'