React.js中高效加载大体积视频文件及解决Media Source API报错问题咨询

我现在遇到一个棘手的问题：想要在HTML的<video>标签里加载一个约300MB的大体积视频文件。直接用URL作为source的话，在Chrome浏览器里会频繁卡顿，还引发了不少性能问题。于是我尝试在React应用里使用Media Source API来优化加载，但一直报错，想请教各位有没有什么可靠的方法能在React.js里流畅加载这类大视频？

下面是我写的用来实现Media Source API的组件代码：

import React, { useEffect, useRef } from 'react';

const VideoStream = (props) => {

const videoRef = useRef(null);

useEffect(() => {

const video = videoRef.current;

if (window.MediaSource) {

const mediaSource = new MediaSource();

video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', handleSourceOpen);

} else {

console.error('MediaSource API is not supported.');

}

}, []);

const handleSourceOpen = async (event) => {

const mediaSource = event.target;

console.log(videoRef.current)

const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

// Fetch and append media segments progressively

const segmentUrl = props.src;

const response = await fetch(segmentUrl);

const segmentData = await response.arrayBuffer();

console.log(segmentData)

sourceBuffer.appendBuffer(segmentData);

sourceBuffer.addEventListener('updateend', () => {

if (!sourceBuffer.updating && mediaSource.readyState === 'open') {

mediaSource.endOfStream();

}

});

videoRef.current.play();

};

return <video ref={videoRef} controls />;

};

export default VideoStream;

我遇到的具体报错信息是：

GET blob:http://localhost:3000/b54e8a3a-769e-40a8-8cd3-3a49cf14946a net::ERR_FILE_NOT_FOUND

备注：内容来源于stack exchange，提问作者Gaurav Kaushal