Javascript：如何计算用户观看视频的时间？

Question

我正在努力节省用户观看视频所花费的时间。
我偶然发现了played 视频属性：

值得一提的是 play 属性——它告诉我们哪个时间 范围已在媒体中播放。例如：

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

这对于确定媒体的哪些部分很有用 收听或观看最多。

在我的 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 函数会记录如下内容：

???? ~ 文件：VideoItem.js ~ 第 212 行 ~ VideoItem ~ handleStateChange ~ begin_of_play_segment 0

???? ~ 文件：VideoItem.js ~ 第 212 行 ~ VideoItem ~ handleStateChange ~ end_of_play_segment 8

???? ~ 文件：VideoItem.js ~ 第 212 行 ~ VideoItem ~ handleStateChange ~ begin_of_play_segment 347

???? ~ 文件：VideoItem.js ~ 第 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,
      });

    }
  }