如果视频冻结,请执行操作

问题描述

我正在构建一个使用用户上传自定义视频的网页。

我使用 isLoading 状态来确定文件是否已加载。

当视频很小(最大 20mb)时,视频从一开始就被完全缓冲,我播放它没有任何问题,但是,如果视频很大,比如说 60mb,网络请求只会缓冲一个视频的一小部分,并会在播放时开始为视频的其余部分充电。

大视频的问题,一旦开始播放-因此缓冲-,网络无法跟上播放速度与下载速度,导致卡顿。可能是我的服务器太慢了。

我想知道是否有办法检查视频是否冻结,如果冻结,则执行某些操作,例如停止视频并显示互联网速度缓慢的警报。

  useEffect(() => {
    if (/* video freezes */) {
      /* perform something
      like pause and alert
      user */
    }
  });

尝试过这样的事情:

if (vidRef.current) {
  // vidRef.current.addEventListener('waiting',(e) => {
  //   console.log('video is waiting!!');
  //   setVidDelay(true);
  // });
  vidRef.current.onwaiting = (e) => (console.log('video is waiting!!'));
}

但没有完成这项工作,它会在播放视频时触发。

也尝试使用 vidRef.current.currentTime,但即使视频处于冻结状态,currentTime 也会继续计数,因此它不起作用。

这是我的视频嵌入

  <video
    preload='auto'
    ref={vidRef}
    id='video'
    style={{ zIndex: '-1' }}
    onLoadedData={() => setLoading(false)}
    muted
  > 

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)