如何将缓冲区时间范围数据从 HTML5 视频播放器引用映射到进度条？

Question

我基本上只是尝试从默认的 HTML5 视频播放器或类似的 YouTube 上模拟缓冲栏。

我正在制作一个自定义 JSX HTML5 视频播放器控制栏，但由于我不确定如何从 videoRef 获取/使用缓冲区进度数据对象而陷入困境。看来我应该使用视频参考中的 buffers end() 函数和 TimeRanges 对象，但我还没有看到任何关于如何使用它的示例或文档可用于计算缓冲栏。

问题：如何使用视频播放器中 videoRef 中的缓冲区对象并将数据映射到自定义视频控制栏的缓冲区进度栏？

我是否以某种方式检测流缓冲区的进度，是否有某种事件？

示例代码：

export default function App() {
  const videoRef = React.useRef();
  const [videoProgress, setVideoProgress] = useState(0);
  const [videoBufferProgress, setVideoBufferProgress] = useState(0);
  const [videoTime, setVideoTime] = useState(0);

  //updates the video progress bar 1-100%, works fine
  function updateTime() {
    setVideoProgress(
      (videoRef.current.currentTime / videoRef.current.duration) * 100
    );
    setVideoTime(videoRef.current.currentTime);
  }

  //get buffer information so that I can use it to fill the buffer progress bar, it doesnt work rn
  function updateBuffer() {
    //setVideoBufferProgress()
    console.log(videoRef.current.buffered.end(0));
  }

  useEffect(() => {
    videoRef.current.addEventListener("loadeddata", () => updateBuffer());
    videoRef.current.addEventListener("timeupdate", () => updateTime());

    return () => {
      videoRef.current.removeEventListener("loadeddata", () => updateBuffer());
      videoRef.current.removeEventListener("timeupdate", () => updateTime());
    };
  }, []);

  return (
    <div>
      <video ref={videoRef}>
        <source src={`/api/video/stream/480/624593ba5a88168159a56169`} type="video/mp4"/>
      </video>
      <div>
        //video timeline bar, this works fine
        <ProgressBar
          now={videoProgress}
        />
        //video buffer bar, this doesnt work
        <ProgressBar
          now={videoBufferProgress}
        />
      </div>
    </div>
  );
}

Answer 1

我发现了。您只需收听progress事件即可。

function updateBuffer() {
    setVideoBufferProgress((videoRef.current.buffered.end(0) / videoRef.current.duration) * 100); //provides the last second of the video that has been loaded/buffered
}

//use the progress event to update the buffer for when new data is loaded
useEffect(() => {
  videoRef.current &&
    videoRef.current.addEventListener("loadeddata", () => updateBuffer());
  videoRef.current &&
    videoRef.current.addEventListener("progress", () => updateBuffer());
  videoRef.current &&
    videoRef.current.addEventListener("timeupdate", () => updateTime());
}, [videoRef.current]);