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'

版权声明:著作权归作者所有。

相关推荐

设置Log4j显示的日期格式

一个简单的log4j配置如下:log4j.rootLogger=DEBUG, console log4j.appender.console=org.apache.log4j.ConsoleAppender log4j.appender.console.Target=System.out log4j.appender.console.layout=org.apache.log4j.Patt

Angular CLI:集成Autoprefixer兼容多浏览器以及浏览器版本

Angular CLI使用Autoprefixer来兼容不同的浏览器以及多个浏览器版本,我们不需要做额外的工作来集成Autoprefixer。Autoprefixer内部依赖于Browserslist,根据Browserslist的配置决定兼容哪些浏览器或浏览器版本。如果我们对浏览器的兼容范围有自己的需求,可以设置Browserslist的配置。集成Browserslist配置到Angu

页面调试禁用Chrome浏览器的缓存

在前端开发过程中,页面调试时常常需要清理浏览器的缓存,下面介绍两种禁用Chrome缓存的方法。方法一:1、F12打开开发这工具2、选中开发者工具的Network标签3、把Disable cache勾选上,如图注意:禁用Chrome的缓存只有在开发者工具打开时才起作用。方法二安装清理缓存的Chrome插件。可以试一下Cache Killer。