Javascript: 如何统计用户观看视频的时长？

Question

我正在尝试节省用户观看视频的时间。
我偶然发现了 played 视频属性：

It’s worth mentioning the played property — this tells us which time ranges have been played within the media. For example:

var played = audio.played; // returns a TimeRanges object

This could be useful for establishing the parts of your media that are most listened to or watched.

在我的 React 应用程序中，我尝试像这样使用它：

  handleStateChange(state, prevState) {
    const { played } = state;
    for (let index = 0; index < played.length; index++) {
      const beginning_of_played_segment = Math.trunc(played.start(index));
      const end_of_played_segment = Math.trunc(played.end(index));
    }
  }

handleStateChanged用于订阅视频播放状态变化：

  componentDidUpdate(prevProps, prevState) {
    if (this.state.player && !this.state.hasSubscribedToPlayerState) {
      this.state.player.subscribeToStateChange(
        this.handleStateChange.bind(this)
      );
      this.setState({
        hasSubscribedToPlayerState: true,
      });
    }
  }

如果我在 [0..8] 和 [347..357] 秒之间播放视频，函数 handleStateChange 会记录如下内容：

~ file: VideoItem.js ~ line 212 ~ VideoItem ~ handleStateChange ~ beginning_of_play_segment 0

~ file: VideoItem.js ~ line 212 ~ VideoItem ~ handleStateChange ~ end_of_play_segment 8

~ file: VideoItem.js ~ line 212 ~ VideoItem ~ handleStateChange ~ beginning_of_play_segment 347

~ file: VideoItem.js ~ line 212 ~ VideoItem ~ handleStateChange ~ end_of_play_segment 357

然后我想我可以计算所有 beginning_of_played_segment 和 end_of_played_segment 值之间的差异。

这种方法的问题在于，如果我在之前播放过的片段中重播视频，例如，如果我在第 4 秒重新播放片段 [0..8] 中的视频，played 将不会创建一个新段，它将继续在同一个段中计数。

比如我在4点重新开始，一直玩到13点，那么段[0..8]就会变成[0..13].

这是有道理的，因为 played 属性 告诉我们在媒体中播放了哪些时间范围。

但是，我想知道是否有一个属性可以让我实现我的目标，即每次用户在任何地方播放视频时创建一个新片段，以便我可以记录多少时间他到底花了多少时间看视频。

Answer 1

我已经设法实施了解决方法。但是，我不确定这是最好的方法。但是，它有效：

  constructor() {
    super();
    this.state = {
      start_of_current_segment: 0,
      current_segment_duration: 0,
      segments: [],
      total_segments_duration: 0,
    };
   
  }

  handlePlayerStateChange(state, prevState) {
    const userHasJustPlayedVideo = prevState.paused && !state.paused;
    const userHasJustPausedVideo = !prevState.paused && state.paused;

    const { currentTime, seeking, hasStarted } = state;
    const has_user_moved_video_to_a_new_position = seeking;
    let { start_of_current_segment, segments } = this.state;
    if (userHasJustPlayedVideo) {
      segments = [...segments, 0];
      this.setState({
        start_of_current_segment: Math.trunc(currentTime),
        segments: segments,
      });
    } else if (userHasJustPausedVideo) {
    } else if (has_user_moved_video_to_a_new_position) {
      segments = [...segments, 0];
      this.setState({
        start_of_current_segment: Math.trunc(currentTime),
        segments: segments,
      });
    } else if (hasStarted) {
      const current_segment_duration =
        Math.trunc(currentTime) - start_of_current_segment;
      const segment_index = segments.length - 1;
      segments[segment_index] = current_segment_duration;

      let total_segments_duration = 0;
      for (
        let segment_index = 0;
        segment_index < segments.length;
        segment_index++
      ) {
        total_segments_duration += segments[segment_index];
      }

      this.setState({
        current_segment_duration: current_segment_duration,
        segments: segments,
        total_segments_duration: total_segments_duration,
      });

    }
  }

Javascript: 如何统计用户观看视频的时长？

Javascript: How to count how much time a user spent watching a video?

html

javascript

iframe

reactjs

video-reactjs