无法seekTo或跳过使用<video>处理MP4文件的时间

Question

我似乎无法使用ReactPlayer跳到特定的时间。

这是我的密码。

import React, { useRef } from "react";
import ReactPlayer from "react-player";

function VideoPlayer(props) {
  const { video, setCurrTime, setAddComment } = props;

  const playerRef = useRef();

  const writeComments = () => {
    if (playerRef.current) {
      setCurrTime(playerRef.current.getCurrentTime());
      setAddComment(true);
    }
  };

  return (
    <div className="player-wrapper">
      <ReactPlayer
        ref={playerRef}
        className="react-player"
        width="100%"
        height="100%"
        url={`http://127.0.0.1:8000${video.video}`}
        controls
        onPause={writeComments}
      />
    </div>
  );
}

export default VideoPlayer;

我怀疑这可能是文件格式，MP4。

Answer 1

不幸的是，playerRef没有被设置为您可以使用的值。

第一个注意事项：https://github.com/cookpete/react-player/issues/1508 --这是一个尚未解决的问题，React的StrictMode经常启用于React 18的新项目中，它破坏了在播放器上设置src，因此无法工作。如果升级到响应18，最简单但不理想的解决方案是禁用React.StrictMode。

如果您的球员是加载，您是在反应17或您没有使用StrictMode。

因此，如果您的视频正在加载，使用ReactPlayer的onReady设置您的playerRef。传递到您的player处理程序中的onReady是ReactPlayer的实际实例，它具有您正在寻找的方法。

import React, { useRef } from "react";
import ReactPlayer from "react-player";

function VideoPlayer(props) {
  const { video, setCurrTime, setAddComment } = props;

  const playerRef = useRef();

  const writeComments = () => {
    if (playerRef.current) {
      setCurrTime(playerRef.current.getCurrentTime());
      setAddComment(true);
    }
  };

  return (
    <div className="player-wrapper">
      <ReactPlayer
        className="react-player"
        width="100%"
        height="100%"
        url={`http://127.0.0.1:8000${video.video}`}
        controls
        onPause={writeComments}
        onReady={(player) => playerRef.current = player}
      />
    </div>
  );
}

export default VideoPlayer;

​

​