无法为 MP4 文件使用 <video> 搜索或跳转到时间

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 设置，因此它不起作用。如果你升级到 React 18，最简单的但不理想的解决方案是禁用 React.StrictMode。

如果您的播放器正在加载，则说明您使用的是 React 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;