将字节数组转存本地视频后，如何通过HTML5 video标签在Web应用访问？

浏览器出于安全考虑，绝对禁止Web页面直接访问本地文件系统路径（比如C:/videos/my-video.mp4这类格式），这是同源策略和本地文件访问限制共同作用的结果，目的是防止恶意网站窃取你的本地数据。下面给你几个可行的解决方案：

方案1：搭建本地Web服务器（最适合固定本地视频的场景） #

把你的视频文件放到一个目录里，然后用简单的本地服务器托管这个目录，这样就能通过HTTP协议访问视频了，绕过本地文件访问限制。

举几个常用的快速搭建方法：

• Python 3：打开终端，进入视频所在目录，执行命令：

  python -m http.server 8000
  

  然后在video标签里使用服务器地址：

  <video id="video" src="http://localhost:8000/your-video-file.mp4" controls autoplay></video>
  

• Node.js：先安装http-server（如果没装过，先执行npm install -g http-server），然后进入视频目录执行：

  http-server -p 8000
  

  同样用http://localhost:8000/your-video-file.mp4作为src。

方案2：通过File API让用户选择本地视频（适合用户上传自己视频的场景） #

如果是让用户自己选择本地视频查看，可以用<input type="file">结合File API，把本地文件转换成浏览器能识别的Blob URL：

<input type="file" accept="video/*" id="video-input">
<video id="video" controls autoplay></video>

<script>
  const input = document.getElementById('video-input');
  const video = document.getElementById('video');
  
  input.addEventListener('change', (e) => {
    const file = e.target.files[0];
    if (file) {
      // 创建Blob URL并赋值给video的src
      video.src = URL.createObjectURL(file);
      // 视频加载完成后释放URL资源（可选但推荐）
      video.addEventListener('loadedmetadata', () => {
        URL.revokeObjectURL(video.src);
      });
    }
  });
</script>

方案3：直接在前端处理字节数组（适合你生成视频的场景） #

你提到是把字节数组转换成视频存到本地，其实完全可以跳过“存本地”这一步，直接在前端把字节数组转换成Blob，然后用Blob URL加载到video标签里：

// 假设byteArray是你的视频字节数组
const byteArray = ...; // 你的视频二进制数据
const blob = new Blob([byteArray], { type: 'video/mp4' }); // 根据你的视频格式修改type，比如video/webm
const video = document.getElementById('video');
video.src = URL.createObjectURL(blob);

// 同样记得在合适时机释放资源
video.addEventListener('ended', () => {
  URL.revokeObjectURL(video.src);
});

这样既不用存本地，也能直接在Web应用里播放生成的视频，效率更高。

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