1

我试图节省用户观看视频的时间。
我偶然发现了播放的视频属性：

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

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属性告诉我们在媒体中播放了哪些时间范围。

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

4

1 回答 1

0

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

  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,
      });

    }
  }
于 2021-05-31T11:41:08.607 回答