如何动态加载用户本地选中视频至video组件并解决fakepath问题

你拿到的c:/fakepath/file.mp4是浏览器出于本地文件安全策略返回的虚假占位路径，所有现代浏览器都会主动隐藏用户本地文件的真实磁盘路径，不存在任何可以拿到真实本地磁盘路径的前端方法，不要在这个方向上浪费时间。

完全不需要获取真实磁盘路径，用浏览器原生提供的Blob URL方案即可实现动态加载用户选中的本地视频，全程不需要配置任何静态路径：

• 新增文件选择控件，限制可选文件类型为视频
• 监听文件选择控件的change事件，获取用户选中的File实例
• 调用URL.createObjectURL()方法，传入选中的File实例，生成当前页面会话内可访问的临时Blob地址
• 将这个临时地址赋值给video组件的src属性，加载后即可正常播放
• 视频使用完毕、页面卸载前调用URL.revokeObjectURL()释放临时地址占用的内存，避免内存泄漏

代码示例 #

<!-- 基础页面结构 -->
<input type="file" id="videoSelect" accept="video/*" />
<video id="videoPlayer" controls width="720"></video>

<script>
const videoSelect = document.getElementById('videoSelect')
const videoPlayer = document.getElementById('videoPlayer')
let currentVideoUrl = null

videoSelect.addEventListener('change', (e) => {
  // 释放上一个视频的临时地址
  if (currentVideoUrl) URL.revokeObjectURL(currentVideoUrl)

  const targetFile = e.target.files[0]
  if (!targetFile) return

  // 生成可播放的临时地址
  currentVideoUrl = URL.createObjectURL(targetFile)
  // 绑定到播放器
  videoPlayer.src = currentVideoUrl
  videoPlayer.load()
  // 尝试自动播放，被拦截时不做强制处理，用户可手动点击播放
  videoPlayer.play().catch(() => {})
})

// 页面关闭时释放内存
window.addEventListener('beforeunload', () => {
  if (currentVideoUrl) URL.revokeObjectURL(currentVideoUrl)
})
</script>

• 如果你使用Vue、React等前端框架，逻辑完全一致，只需要把生成的Blob地址通过框架的绑定语法赋值给video标签的src属性即可
• 生成的Blob地址仅在当前页面打开期间有效，页面关闭后会自动失效，不存在本地文件泄露风险
• 不要尝试通过字符串拼接、正则替换等方式修改fakepath得到真实路径，这类操作在现代浏览器下完全无效

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