JavaScript 检测视频和音频的格式

来源：互联网发布：西安市爱知中学官网编辑：程序博客网时间：2024/05/16 13:56

大家好，我翻译一下子 David Walsh 文章，用JavaScript 检测视频和音频的格式，https://davidwalsh.name/detect-supported-video-formats-javascript， https://davidwalsh.name/detect-supported-audio-formats-javascript，这是两篇文章，我大概翻译并放到了一起。
在过去的几年中我们一直看到新的音频、视频和图像格式挑战过去我们最初使用网络的文件视频格式。这是一个很好的发展,我们有了更多的处理能力和更好的压缩算法被开发出来,从而导致更快的加载时间和文件表现。速度万岁!
问题:与其他特性添加到浏览器,一些浏览器对媒体格式的支持比其他浏览器更快,然而一些浏览器拒绝支持某些格式。简单地说:我们现在需要做媒体支持检测,我们传统上还没有做这些事情。前阵子我发布了文章如何检测浏览器对WEBP支持,现在我想向您展示如何检测支持视频和音频格式——这比你想象的容易多了!

HTMLVideoElement.prototype.canPlayType
canPlayType函数是检测浏览器支持视频格式的秘密。使用这种方法,您必须首先创建一个<video>元素实例:
const video = document.createElement('video');
然后调用 canPlayType 函数,传递所需的MIME类型格式和其他详细信息:
video.canPlayType('video/webm; codecs="vp8, vorbis"'); // "probably"
此函数 canPlayType有三种可能的返回结果:
“probably”:浏览器支持此种视频媒体类型
“maybe”:浏览器不能告诉是否支持此视频媒体类型
“”:不支持此视频媒体类型

我们可以用HTMLAudioElement.prototype.canPlayType 函数来检测浏览器是否支持此音频类型，这个函数与视频检测函数是使用相同的策略。
您必须首先创建一个<audio>元素实例:
const audio = document.createElement('audio');
audio.canPlayType('audio/mpeg'); // "probably"
此函数 canPlayType有三种可能的返回结果:
“probably”:浏览器支持此种音频媒体类型
“maybe”:浏览器不能告诉是否支持此音频媒体类型
“”:不支持此音频媒体类型

以下是一个例子如果使用此两个函数

<!DOCTYPE html>
<html lang = 'en'>
<head>
<meta charset="UTF-8">
<title>Video and audio type</title>

<style type ='text/css'>
</style>
<script type='text/javascript'>
//此函数检测浏览器支持哪种视频格式
function supportsVideoType(type) {
let video;

// Allow user to create shortcuts, i.e. just "webm"
let formats = {
ogg: 'video/ogg; codecs="theora"',
h264: 'video/mp4; codecs="avc1.42E01E"',
webm: 'video/webm; codecs="vp8, vorbis"',
vp9: 'video/webm; codecs="vp9"',
hls: 'application/x-mpegURL; codecs="avc1.42E01E"'
};

if(!video) {
video = document.createElement('video')
}

return video.canPlayType(formats[type] || type);
}

var types = ['ogg', 'webm', 'vp9', 'h264', 'hls'];
for (i =0 ; i < types.length; i++){
var canPlay = supportsVideoType(types[i]);
if (canPlay =='probably') {
console.log('video type '+ types[i]+ ' can play');
} else if (canPlay == 'maybe') {
console.log('video type '+ types[i]+ ' is not sure to play or not');
} else {
console.log('video type ' + types[i]+' can not play');
}
}

//此函数检测浏览器支持哪种声音格式
function supportsAudioType(type) {
let audio;

// Allow user to create shortcuts, i.e. just "mp3"
let formats = {
mp3: 'audio/mpeg',
mp4: 'audio/mp4',
aif: 'audio/x-aiff'
};

if(!audio) {
audio = document.createElement('audio')
}

return audio.canPlayType(formats[type] || type);
}

var audioTypes = ['mp3', 'mp4', 'aif'];
for (i =0 ; i < audioTypes.length; i++){
var canPlay = supportsAudioType(audioTypes[i]);
if (canPlay =='probably') {
console.log('audio type '+ audioTypes[i]+ ' can play');
} else if (canPlay == 'maybe') {
console.log('audio type '+ audioTypes[i]+ ' is not sure to play or not');
} else {
console.log('audio type ' + audioTypes[i]+' can not play');
}
}

</script>

</head>
<body>
<div id='log'>please check console log</div>
</body>
</html>

Firfox 显示结果

Chrome 浏览器显示结果

阅读全文

0 0