使用 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。

使用 React Player 获取总播放时间

Get total played time with React Player

javascript

django

reactjs

react-player