canPlayType() 方法用于检测浏览器是否支持指定的音频或视频格式。它接收一个参数，即媒体文件的 MIME 类型（如 video/mp4 或 audio/ogg），并返回一个字符串，表示浏览器对该格式的支持程度。

该方法返回以下三个值之一：

• ‌probably‌：表示浏览器很可能支持该媒体类型。

• ‌maybe‌：表示浏览器可能支持该媒体类型。

• ‌空字符串（""）‌：表示浏览器不支持该媒体类型。

示例代码：

// 获取 video 元素
var video = document.querySelector('video');
// 检测浏览器是否支持 MP4 格式
var supportMP4 = video.canPlayType('video/mp4');
// 检测浏览器是否支持 OGG 格式
var supportOGG = video.canPlayType('video/ogg');
// 输出检测结果
console.log("MP4 支持情况:", supportMP4); // 可能输出 "probably"、"maybe" 或 ""
console.log("OGG 支持情况:", supportOGG); // 可能输出 "probably"、"maybe" 或 ""

说明：

• 如果返回 "probably"，说明浏览器很可能支持该格式。

• 如果返回 "maybe"，说明浏览器可能支持该格式，但不确定。

• 如果返回空字符串 ""，说明浏览器完全不支持该格式。

这个方法在实际开发中常用于动态判断浏览器对不同媒体格式的支持情况，以便提供兼容性更好的播放方案。

能再举几个使用canPlayType的例子吗？

canPlayType() 方法用于检测浏览器是否支持特定的音频或视频格式。以下是一些具体的使用示例：

基本用法示例

// 创建 video 元素
var video = document.createElement('video');
// 检测 MP4 格式支持情况
var mp4Support = video.canPlayType('video/mp4');
// 返回值可能是 "probably"、"maybe" 或空字符串
// 检测 WebM 格式支持情况
var webmSupport = video.canPlayType('video/webm');
// 同样返回支持程度
// 检测 OGG 格式支持情况
var oggSupport = video.canPlayType('video/ogg');

实际应用示例

// 检测多种音频格式
var audio = document.createElement('audio');
var mp3Support = audio.canPlayType('audio/mpeg');
var oggSupport = audio.canPlayType('audio/ogg');
var wavSupport = audio.canPlayType('audio/wav');
// 根据支持情况选择合适的媒体文件
if (mp3Support === 'probably' || mp3Support === 'maybe') {
    // 使用 MP3 格式
    document.getElementById('audio-player').src = 'audio.mp3';
} else if (oggSupport === 'probably' || oggSupport === 'maybe') {
    // 使用 OGG 格式
    document.getElementById('audio-player').src = 'audio.ogg';
}

动态检测示例

// 检测特定格式是否被支持
function checkFormatSupport(format) {
    var video = document.createElement('video');
    return video.canPlayType(format);
}
// 使用示例
var support = checkFormatSupport('video/mp4');
if (support === 'probably' || support === 'maybe') {
    console.log('浏览器支持该格式');
} else {
    console.log('浏览器不支持该格式');
}

多媒体格式检测完整示例

// 检测常用视频格式
var video = document.createElement('video');
var formats = {
    mp4: video.canPlayType('video/mp4'),
    webm: video.canPlayType('video/webm'),
    ogg: video.canPlayType('video/ogg')
};
// 检测常用音频格式
var audio = document.createElement('audio');
var audioFormats = {
    mp3: audio.canPlayType('audio/mpeg'),
    ogg: audio.canPlayType('audio/ogg'),
    wav: audio.canPlayType('audio/wav')
};

这些示例展示了如何使用 canPlayType() 方法来检测浏览器对不同多媒体格式的支持情况，从而实现更灵活的媒体播放方案。