如何通知用户HTML video标签加载的视频文件不被浏览器支持？

针对你提到的用户上传视频后预览的场景，我们可以通过提前格式检测和错误事件监听两种方式来判断文件是否被支持，并给用户友好的提示，下面是具体的实现方案：

1. 提前预判：使用canPlayType()方法 #

HTML5的<video>元素提供了canPlayType()方法，可以提前检测浏览器是否支持某种视频格式。它接收一个MIME类型字符串（比如video/mp4），返回三个可能的值：

• ""：明确不支持该格式
• "maybe"：可能支持（文件扩展名匹配但不确定编码是否兼容）
• "probably"：大概率支持

这个方法适合在用户上传文件后、加载预览前快速过滤明显不支持的格式，减少后续的错误加载。

2. 兜底处理：监听error事件 #

即使canPlayType()返回"maybe"或"probably"，也可能因为文件编码异常、损坏等原因导致加载失败。这时候需要监听<video>的error事件，通过video.error属性获取具体的错误信息。

video.error.code包含几个关键的错误枚举：

• MEDIA_ERR_SRC_NOT_SUPPORTED：最常见的格式不支持或文件无法识别
• MEDIA_ERR_DECODE：文件格式正确但解码失败（比如编码不兼容）
• MEDIA_ERR_NETWORK：网络加载错误（上传后预览一般不会遇到，但可以作为兜底）
• MEDIA_ERR_ABORTED：加载被用户中断

完整示例代码 #

结合你的场景，这里给出一个从文件上传到预览、错误提示的完整实现：

HTML部分 #

<!-- 文件上传控件 -->
<input type="file" id="videoUpload" accept="video/*">
<!-- 预览视频容器 -->
<video id="previewVideo" controls style="max-width: 100%; margin: 10px 0;"></video>
<!-- 错误提示框 -->
<div id="errorMessage" style="color: #dc3545; display: none; font-size: 14px;"></div>

JavaScript部分 #

const uploadInput = document.getElementById('videoUpload');
const previewVideo = document.getElementById('previewVideo');
const errorMessage = document.getElementById('errorMessage');

uploadInput.addEventListener('change', handleVideoUpload);

function handleVideoUpload(e) {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  // 重置之前的预览和错误状态
  resetPreviewState();

  // 第一步：提前检测格式支持度
  const supportStatus = previewVideo.canPlayType(selectedFile.type);
  if (supportStatus === '') {
    showError(`抱歉，您的浏览器不支持${selectedFile.type}类型的视频文件`);
    return;
  }

  // 第二步：创建预览URL并加载视频
  const videoBlobUrl = URL.createObjectURL(selectedFile);
  previewVideo.src = videoBlobUrl;

  // 监听错误事件
  previewVideo.addEventListener('error', () => {
    const videoError = previewVideo.error;
    let errorText = '视频无法预览，请检查文件是否损坏或格式不被支持';
    
    switch(videoError.code) {
      case videoError.MEDIA_ERR_SRC_NOT_SUPPORTED:
        errorText = '该视频格式不被您的浏览器支持';
        break;
      case videoError.MEDIA_ERR_DECODE:
        errorText = '视频解码失败，可能是编码不兼容或文件损坏';
        break;
      case videoError.MEDIA_ERR_NETWORK:
        errorText = '网络异常，视频无法加载';
        break;
    }

    showError(errorText);
    // 释放Blob URL，避免内存泄漏
    URL.revokeObjectURL(videoBlobUrl);
  });

  // 监听加载成功事件，隐藏错误提示
  previewVideo.addEventListener('loadeddata', () => {
    hideError();
  });
}

// 辅助函数：重置预览状态
function resetPreviewState() {
  previewVideo.src = '';
  hideError();
}

// 辅助函数：显示错误提示
function showError(text) {
  errorMessage.textContent = text;
  errorMessage.style.display = 'block';
}

// 辅助函数：隐藏错误提示
function hideError() {
  errorMessage.style.display = 'none';
}

注意事项 #

• canPlayType()只是预判，不能100%保证播放成功，因为有些文件可能MIME类型正确但内部编码不被浏览器支持，所以error事件的监听是必须的。
• 不同浏览器支持的视频格式略有差异：Chrome、Firefox支持MP4、WebM、Ogg；Safari对MP4的支持最好，WebM需要macOS 11+或iOS 14+版本。
• 处理完预览后记得调用URL.revokeObjectURL()释放Blob URL，避免内存占用过高。

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