使用 React Player 获取总播放时间

问题描述

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

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

解决方法

通过查看 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。