javascript - 使用反应钩子跳转到videojs中的特定时间

Question

我正在尝试实现在视频中向前或向后跳跃 15 秒的功能。

我很难设置更新和设置当前时间。

const videoNode = useRef(null);
  const [currentTime, setCurrentTime] = useState(null);

  const handleTimeJump = (type) => {
    const player = videojs(videoNode.current);
    console.log(player)
    if (player) {
      type === 'inc' && setCurrentTime(player.currentTime() + 15);
      player.currentTime() > 15 ? setCurrentTime(player.currentTime() - 15) : setCurrentTime(0)
    }
  };

  useEffect(() => {
    const player = videojs(
      videoNode.current,
      videoJsOptions,
      function onPlayerReady() {
        console.log('onPlayerReady');
        player.on('timeupdate', () => {
          setCurrentTime(player.currentTime());
        });
      },
    );
    if (!videoJsOptions.sources[0].src) {
      console.log('no source found');
    }
    return () => {
      if (player) {
        player.dispose();
      }
    };
  }, []);

  useEffect(() => {
    const player = videojs(videoNode.current)
    player.currentTime(currentTime)
}, [currentTime])

在单击按钮后调用 handleTimeJump。

onClick={() => handleTimeJump('inc')}

标签： javascriptreactjsreact-hooksvideo.jsecmascript-next

Answer 1

看我还没有测试它是否有效，但看起来它应该player.setCurrentTime(currentTime)而不是player.currentTime(currentTime)

如果这可行，那么他们应该在使用参数调用时抛出错误，currentTime因为它不应该接受参数 _{^{（*cough* 或者您可以使用静态类型语言 *cough*）}}

此外，currentTime状态已经在 videojs-land 中，无需在 React-land 中创建另一个并保持同步。您每秒钟发送一次反应更新。这是一个强烈推荐且未经请求的重构（尽可能减少差异）：

const videoNode = useRef(null);
const playerRef = useRef(null);
const player = playerRef.current;

const handleTimeJump = (type) => {
  if (player) {
    type === 'inc' && player.setCurrentTime(player.currentTime() + 15);
    player.currentTime() > 15 ? player.setCurrentTime(player.currentTime() - 15) : player.setCurrentTime(0)
  }
};

useEffect(() => {
  playerRef.current = videojs(
    videoNode.current,
    videoJsOptions
  );
  if (!videoJsOptions.sources[0].src) {
    console.log('no source found');
  }
  return () => {
    if (player) {
      player.dispose();
    }
  };
}, []);