首页 > 解决方案 > 跳过视频时出现 Video.js 错误。进度条在结束前停止

问题描述

Video.Js 有一个奇怪的错误当我使用跳过控件跳过视频时,我确实遇到了这样奇怪的错误:

在此处输入图像描述

我的向前跳过看起来像这样: playerRef.current?.currentTime(playerRef.current?.currentTime() + 10);

我的播放器初始化代码的其余部分基于 Video.js 文档

 const videoRef = useRef<HTMLVideoElement | null>(null);
  const playerRef = useRef<VideoJsPlayer | null>(null);
  const [pause, setPause] = useState(playerRef.current?.paused() ?? true);

  useEffect(() => {
    // make sure Video.js player is only initialized once
    if (!playerRef.current) {
      const videoElement = videoRef.current;
      if (!videoElement) return;

      const player = (playerRef.current = videojs(videoElement, options, () => {
        /* video.js pause play control */
        player.on('pause', function () {
          setPause(true);
          playerPause && playerPause(true);
        });
        player.on('play', function () {
          setPause(false);
          playerPause && playerPause(false);
          playerLive && player.liveTracker.seekToLiveEdge();
        });
        player.on('ended', function () {
          setPause(true);
          playerPause && playerPause(true);
        });
      }));
    } else {
    }
  }, [options]);

  // Dispose the Video.js player when the functional component unmounts
  useEffect(() => {
    return () => {
      if (playerRef.current) {
        playerRef.current.dispose();
        playerRef.current = null;
      }
    };
  }, []);

我试图检查剩余的数量,如果它低于 10 秒,则只跳过剩余时间,但这仍然没有帮助

标签: javascriptreactjstypescriptvideo-streaming

解决方案


推荐阅读