使用 React Player 获取总游戏时间

Question

我正在使用 Django 和 React 开发一个视频订阅网站。由于我们将有多个人想为我们制作内容，我希望能够跟踪用户在任何视频中花费的时间，然后通过在页面离开时添加该时间来更新数据库。这是为了了解每个视频对我们的收入贡献了多少。我目前正在使用 React 播放器播放视频，但我可以轻松过渡到其他类型的播放器。另外，如果有人有更好的方法来跟踪时间而不使用任何播放器，我将不胜感激。

<ReactPlayer
            url={this.state.lectie.link}
            controls
            type="video/mp4"
          />

Answer 1

通过查看react-player 的文档，它有一个名为onProgress 的道具，您可以将回调传递给它，它将为您提供以下格式{ played: 0.12, playedSeconds: 11.3, loaded: 0.34, loadedSeconds: 16.7 }。所以基于此你可以做这样的事情

function PlayerComponent() {
  const [played, setPlayed] = useState(0);

  // ...

  <ReactPlayer
   onProgress={(progress) => {
       setPlayed(progress.playedSeconds);
     }}
   />
}

然后当您的组件卸载时，您可以将played 变量的值发送到您想要的API。