如何检测不兼容浏览器播放HEVC(H265)编码MP4视频时仅输出音频的问题

方案1：预检测浏览器HEVC编码支持能力 #

直接用原生HTMLMediaElement.canPlayType() API提前检测，无需加载视频资源：

function checkHEVCSupport() {
  const video = document.createElement('video');
  // HEVC编码有两种常见的codec标识，都需要检测
  const hevcSupport1 = video.canPlayType('video/mp4; codecs="hev1.1.6.L93.B0"');
  const hevcSupport2 = video.canPlayType('video/mp4; codecs="hvc1.1.6.L93.B0"');
  // 返回值为空字符串代表完全不支持，"maybe"/"probably"代表可支持
  return !!(hevcSupport1 || hevcSupport2);
}

// 调用示例
if (!checkHEVCSupport()) {
  alert('您的浏览器不支持当前视频的HEVC/H265编码，无法正常播放视频画面');
}

方案2：加载后检测视频轨道存在性 #

如果预检测存在误差，可在视频元数据加载完成后判断视频轨道参数：
当浏览器仅能识别音频轨道时，videoWidth和videoHeight属性会返回0，以此为判断依据：

const videoEle = document.querySelector('video');
videoEle.addEventListener('loadedmetadata', () => {
  // 等待元数据加载完成后检查视频宽高
  if (videoEle.videoWidth === 0 && videoEle.videoHeight === 0) {
    // 无有效视频轨道，仅能播放音频
    alert('您的浏览器无法解码当前视频的画面内容，仅可播放音频');
  }
});

// 加兜底检测，避免部分浏览器元数据加载延迟
videoEle.addEventListener('play', () => {
  setTimeout(() => {
    if (videoEle.videoWidth === 0 && videoEle.videoHeight === 0 && !videoEle.paused) {
      alert('您的浏览器无法解码当前视频的画面内容，仅可播放音频');
    }
  }, 3000);
});

兜底方案：帧渲染校验 #

对准确率要求极高的场景，可通过canvas绘制视频帧校验是否有有效画面输出：

function checkVideoFrame(videoEle) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = videoEle.videoWidth || 1;
  canvas.height = videoEle.videoHeight || 1;
  try {
    ctx.drawImage(videoEle, 0, 0);
    // 读取第一帧像素数据，全黑则代表无有效画面
    const pixelData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
    const isAllBlack = pixelData.every(val => val === 0);
    return !isAllBlack;
  } catch (e) {
    return false;
  }
}
// 在视频播放5秒后调用校验
setTimeout(() => {
  if (!checkVideoFrame(videoEle)) {
    alert('您的浏览器无法正常渲染当前视频画面');
  }
}, 5000);

内容的提问来源于stack exchange，提问作者bertrandg