HTML5选择视频文件播放报错：URL.createObjectURL重载解析失败

问题根源拆解 #

1. URL.createObjectURL参数类型错误：你要么传了空的MediaStream，要么传了文件名字符串，这个方法只认File、Blob这类二进制对象，传字符串直接触发重载失败报错。
2. DOM元素引用混乱：代码里没定义source变量就直接用，而且把<source>的id设成vplayer，变量名也叫vplayer，逻辑完全乱了。
3. 冗余的空媒体流：本地文件播放根本不需要创建空MediaStream，直接用选中的文件生成播放URL就行。

修复后完整代码 #

<script>
function newVideo() {
  const source = document.getElementById('videoSource');
  const fileInput = document.getElementById('videoFile');
  
  // 清理旧URL，避免内存浪费
  if (source.src) {
    URL.revokeObjectURL(source.src);
  }
  
  // 确认有选中文件再处理
  if (fileInput.files.length > 0) {
    const selectedFile = fileInput.files[0];
    // 用选中的File对象生成可播放URL
    source.src = URL.createObjectURL(selectedFile);
    // 触发video元素加载新资源
    source.parentElement.load();
  }
}
</script>

<video width="400" controls>
  <source src="" id="videoSource">
  Your browser does not support HTML5 video.
</video>

<input type="file" name="file[]" id="videoFile"
       class="file_multi_video"
       onchange='newVideo();'
       accept="video/*">

核心修改说明 #

• 给<source>设置明确的idvideoSource，避免和video元素混淆
• 直接用选中的File对象（fileInput.files[0]）生成播放URL，不再用无效的文件名或空流
• 增加旧URL回收逻辑，防止浏览器内存泄漏
• 调用video元素的load()方法，确保新资源能正常加载播放

错误原因直白解释 #

你碰到的Overload resolution failed，就是URL.createObjectURL接收到了不兼容的参数——它不认字符串或空媒体流，必须传File/Blob这种二进制对象才行。

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