如何通过JavaScript检测浏览器是否支持HEVC视频流

开发者阿泽

2026-6-23

检测浏览器HEVC支持并切换视频流方案

一、原生浏览器API检测方法

直接借助HTML5的媒体API做检测，canPlayType可做快速判断，但结合MediaSource的检测更严谨，适配DASH/HLS等流式播放场景：

async function isHEVCSupported() {
  // 快速初判
  const video = document.createElement('video');
  const basicCheck = video.canPlayType('video/mp4; codecs="hev1.1.6.L120.90"') !== '';
  if (!basicCheck) return false;

  // 严谨检测MediaSource兼容性
  try {
    const mediaSource = new MediaSource();
    const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="hev1.1.6.L120.90"');
    sourceBuffer.abort();
    return true;
  } catch (e) {
    return false;
  }
}

注：不同容器的MIME类型需对应调整，比如HEVC在MP4中用hev1或hvc1作为编码标识，检测时要匹配实际流的编码参数。

二、Shaka Player内置检测方法

Shaka Player自带媒体能力检测工具，更贴合自身播放逻辑，推荐优先使用：

async function checkShakaHEVCSupport() {
  const supportResult = await shaka.media.MediaCapabilitiesInfo.supported('video/mp4; codecs="hev1.1.6.L120.90"');
  return supportResult.supported;
}

三、检测后切换流的实现逻辑

拿到支持状态后，即可在初始化播放器时选择对应流地址：

async function loadTargetVideo(videoElement) {
  const player = new shaka.Player(videoElement);
  
  try {
    const isHEVCAvailable = await checkShakaHEVCSupport();
    const targetManifest = isHEVCAvailable ? '你的HEVC流地址.mpd' : '你的H.264流地址.mpd';
    
    await player.load(targetManifest);
    console.log(isHEVCAvailable ? '已加载HEVC流' : '已切换为H.264流');
  } catch (error) {
    console.error('视频加载失败:', error);
  }
}