如何通过字节数据播放下载视频？解决超5MB文件失效问题

直接使用base64格式的data URL加载大视频（超过5MB）会触发浏览器的固有限制，同时base64编码会让文件体积额外增加30%，导致内存占用过高、播放器解析效率低下，最终加载失败。

1. 改用Blob URL替代Data URL #

将base64编码的视频数据转换为Blob对象，再生成浏览器原生的Blob URL，这种方式没有data URL的大小限制，且加载效率更高。

实现代码： #

首先添加base64转Blob的工具函数：

function base64ToBlob(base64Str, mimeType) {
  const byteChars = atob(base64Str);
  const byteArrays = [];
  
  for (let i = 0; i < byteChars.length; i += 512) {
    const slice = byteChars.slice(i, i + 512);
    const byteNumbers = Array.from(slice, char => char.charCodeAt(0));
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }
  
  return new Blob(byteArrays, { type: mimeType });
}

然后在React组件中处理Blob URL的生成与释放：

import { useState, useEffect } from 'react';
import ReactPlayer from 'react-player';

function VideoPreview({ preview, mimetype }) {
  const [videoBlobUrl, setVideoBlobUrl] = useState(null);

  useEffect(() => {
    if (!preview || !mimetype) return;

    // 转换base64为Blob并生成URL
    const videoBlob = base64ToBlob(preview, mimetype);
    const blobUrl = URL.createObjectURL(videoBlob);
    setVideoBlobUrl(blobUrl);

    // 组件卸载时释放Blob URL，避免内存泄漏
    return () => {
      URL.revokeObjectURL(blobUrl);
      setVideoBlobUrl(null);
    };
  }, [preview, mimetype]);

  return (
    videoBlobUrl && (
      <ReactPlayer
        url={videoBlobUrl}
        controls
        width="100%"
        height="100%"
      />
    )
  );
}

2. 优先使用后端直链（推荐） #

如果业务允许，将base64视频数据上传到后端服务器，保存为文件后返回直接的文件访问URL，前端直接用该URL加载视频。这种方式性能最优，且完全避免前端处理大文件的内存问题。

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