能否在JS&HTML中直接通过二进制缓冲区显示视频（无需转Base64）？

完全可以在网页中直接通过二进制缓冲区显示视频，不需要先转换为Base64字符串——Base64编码反而会让数据体积增加约33%，降低性能。在JS&HTML环境下，我们可以利用Blob对象和URL.createObjectURL() API，或者针对流式场景使用MediaSource API来实现，以下是具体方案：

核心原理 #

浏览器支持将二进制数据包装为Blob对象，通过URL.createObjectURL()生成一个临时的本地URL，这个URL可以直接被<video>标签的src属性识别，从而实现视频播放。如果是实时流式视频，则可以用MediaSource API逐段加载二进制数据块，实现边加载边播放。

常见场景实现示例 #

1. 从远程获取二进制视频数据并显示 #

直接通过fetch请求获取视频的二进制响应，转为Blob后生成播放URL：

async function loadRemoteVideo() {
  try {
    const response = await fetch('your-video.mp4');
    if (!response.ok) throw new Error('请求失败');
    
    const blob = await response.blob();
    const videoUrl = URL.createObjectURL(blob);
    
    const video = document.createElement('video');
    video.src = videoUrl;
    video.controls = true;
    video.style.maxWidth = '100%';
    document.body.appendChild(video);
    
    // 视频加载完成后释放URL资源，避免内存泄漏
    video.addEventListener('loadeddata', () => {
      URL.revokeObjectURL(videoUrl);
    });
  } catch (err) {
    console.error('加载视频出错:', err);
  }
}
loadRemoteVideo();

2. 读取本地上传的视频文件（二进制缓冲区） #

用户上传的File对象本身就是Blob的子类，可直接生成播放URL：

<input type="file" id="videoUpload" accept="video/*">
<video id="player" controls style="max-width:100%;margin-top:10px;"></video>

<script>
document.getElementById('videoUpload').addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) return;
  
  const player = document.getElementById('player');
  const videoUrl = URL.createObjectURL(file);
  
  player.src = videoUrl;
  
  player.addEventListener('loadeddata', () => {
    URL.revokeObjectURL(videoUrl);
  });
});
</script>

3. 从自定义ArrayBuffer显示视频 #

如果是从WebSocket、IndexedDB或其他来源获取的ArrayBuffer，可以包装为Blob后播放：

// 假设已有视频的ArrayBuffer数据
async function playFromArrayBuffer(buffer) {
  const blob = new Blob([buffer], { type: 'video/mp4' }); // 必须指定正确的MIME类型
  const videoUrl = URL.createObjectURL(blob);
  
  const player = document.querySelector('#customVideo');
  player.src = videoUrl;
  
  player.addEventListener('loadeddata', () => {
    URL.revokeObjectURL(videoUrl);
  });
}

// 示例调用：假设getVideoBuffer()返回ArrayBuffer
getVideoBuffer().then(buffer => playFromArrayBuffer(buffer));

4. 实时流式视频播放（边加载边播） #

针对实时视频流或大文件分段加载场景，使用MediaSource API逐段添加数据：

function setupStreamingPlayer() {
  const video = document.createElement('video');
  video.controls = true;
  video.style.maxWidth = '100%';
  document.body.appendChild(video);
  
  const mediaSource = new MediaSource();
  video.src = URL.createObjectURL(mediaSource);
  
  mediaSource.addEventListener('sourceopen', async () => {
    // 根据视频编码指定正确的MIME类型（需与视频编码匹配）
    const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
    
    // 模拟从流源逐段获取数据
    async function fetchChunks() {
      while (true) {
        const chunk = await getNextVideoChunk(); // 自定义函数：获取下一段二进制数据
        if (!chunk) break;
        
        // 等待缓冲区可接受新数据
        while (sourceBuffer.updating) {
          await new Promise(resolve => sourceBuffer.addEventListener('updateend', resolve, { once: true }));
        }
        
        sourceBuffer.appendBuffer(chunk);
      }
      
      // 数据加载完毕，结束流
      mediaSource.endOfStream();
    }
    
    fetchChunks();
  });
  
  video.addEventListener('error', (err) => {
    console.error('流式播放出错:', err);
    URL.revokeObjectURL(video.src);
  });
}
setupStreamingPlayer();

注意事项 #

• 必须指定正确的视频MIME类型（如video/mp4、video/webm），若涉及编码，需在MIME类型中补充codecs参数（如流式场景）。
• 使用URL.createObjectURL()后，务必在视频加载完成或不再使用时调用URL.revokeObjectURL()释放资源，避免内存泄漏。
• 流式场景下，MediaSource对视频编码有要求，需确保视频采用浏览器支持的编码格式（如H.264、VP9）。

内容的提问来源于stack exchange，提问作者Rashad AL-Maqtary