嘿，这个场景我太熟悉了！用户上传的视频格式/编码五花八门，浏览器支持又参差不齐，确实得做个兜底检测。下面给你两种靠谱的实现思路，结合起来用效果最好：

1. 监听视频的error事件（兜底方案） #

当浏览器尝试加载或播放视频失败时，<video>元素会触发error事件。我们可以通过这个事件捕获错误原因，然后给用户显示友好提示。

实现步骤： #

• 首先在HTML里准备好视频元素和错误提示容器：

<video id="userVideo" src="/video-123" controls>
  <!-- 这里是不支持video标签的 fallback，但我们要处理的是支持标签但不支持编码的情况 -->
</video>
<div id="videoErrorMsg" style="display:none; color:red; margin-top:10px;">
  抱歉，你的浏览器无法播放该视频，请尝试更换浏览器或下载视频查看。
</div>

• 然后用JavaScript监听error事件：

const video = document.getElementById('userVideo');
const errorMsg = document.getElementById('videoErrorMsg');

video.addEventListener('error', (e) => {
  const error = e.target.error;
  // 可以根据错误类型做更精准的提示
  switch(error.code) {
    case error.MEDIA_ERR_DECODE:
      // 解码错误，大概率是编码不支持
      errorMsg.textContent = "抱歉，你的浏览器不支持该视频的编码格式，请尝试使用新版Chrome、Firefox或Safari浏览器。";
      break;
    case error.MEDIA_ERR_SRC_NOT_SUPPORTED:
      errorMsg.textContent = "抱歉，该视频格式不受支持，请联系管理员处理。";
      break;
    default:
      errorMsg.textContent = "视频播放失败，请稍后重试。";
  }
  errorMsg.style.display = 'block';
});

常见的错误码含义：

• MEDIA_ERR_DECODE：视频能加载，但无法解码（核心就是编码不支持，比如H.265在旧浏览器里的情况）
• MEDIA_ERR_SRC_NOT_SUPPORTED：视频格式完全不被浏览器识别

2. 用canPlayType预检测编码支持（提前规避） #

在视频开始加载前，我们可以用video.canPlayType()方法判断浏览器是否支持目标视频的编码，提前给出提示，避免用户看到加载失败的状态。

实现示例： #

比如你知道用户上传的视频是MP4格式，可能是H.264或H.265，就可以这样检测：

const video = document.createElement('video'); // 不需要插入DOM，只是用来检测

// 检测H.264编码的MP4
const isH264Supported = video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
// 检测H.265编码的MP4
const isH265Supported = video.canPlayType('video/mp4; codecs="hvc1.1.6.L153.B0, mp4a.40.2"');

// 结合实际场景，比如你拿到了用户上传视频的编码信息，就可以针对性判断
// 如果是未知编码，也可以先尝试检测常见格式
if (isH264Supported === "" && isH265Supported === "") {
  alert("你的浏览器不支持常见的MP4视频编码，请升级浏览器后重试。");
}

注意：canPlayType的返回值有三种：

• ""：完全不支持
• "maybe"：可能支持（浏览器无法100%确定）
• "probably"：大概率支持

所以实际判断时，一般只要不是""就可以认为有机会播放，但还是要结合error事件兜底，因为这个方法不是绝对准确的。

完整结合方案 #

把预检测和错误监听结合起来，既提前提示，又处理意外情况：

<video id="userVideo" src="/video-123" controls style="display:none;"></video>
<div id="videoErrorMsg" style="display:none; color:red; margin-top:10px;"></div>

<script>
const video = document.getElementById('userVideo');
const errorMsg = document.getElementById('videoErrorMsg');

// 预检测
const checkSupport = () => {
  const h264Support = video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
  const h265Support = video.canPlayType('video/mp4; codecs="hvc1.1.6.L153.B0, mp4a.40.2"');
  const movSupport = video.canPlayType('video/quicktime');

  // 如果常见格式都不支持，直接提示
  if (h264Support === "" && h265Support === "" && movSupport === "") {
    errorMsg.textContent = "你的浏览器不支持该视频格式，请升级至新版浏览器后重试。";
    errorMsg.style.display = 'block';
    return false;
  }
  return true;
};

if (checkSupport()) {
  video.style.display = 'block';
  // 监听错误事件兜底
  video.addEventListener('error', (e) => {
    const error = e.target.error;
    if (error.code === error.MEDIA_ERR_DECODE) {
      errorMsg.textContent = "抱歉，你的浏览器不支持该视频的编码格式，请尝试使用新版Safari（支持H.265）或Chrome/Firefox浏览器。";
    } else {
      errorMsg.textContent = "视频播放失败，请稍后重试或联系管理员。";
    }
    errorMsg.style.display = 'block';
    video.style.display = 'none';
  });
}
</script>

这样一来，大部分不支持的情况都能覆盖到，用户体验会好很多！

内容的提问来源于stack exchange，提问作者code đờ