[英]Javascript: How to count how much time a user spent watching a video?
I am trying to save how much time a user spent watching video.我试图节省用户观看视频的时间。
I stumbled upon the played video attribute:我偶然发现了播放的视频属性:
It's worth mentioning the played property — this tells us which time ranges have been played within the media.值得一提的是played 属性——它告诉我们在媒体中播放了哪些时间范围。 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.这对于建立媒体中最受聆听或观看的部分可能很有用。
In my React app, I tried using that like this:在我的 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
is used to subscribe to the video player state change: handleStateChanged
用于订阅视频播放器 state 更改:
componentDidUpdate(prevProps, prevState) {
if (this.state.player && !this.state.hasSubscribedToPlayerState) {
this.state.player.subscribeToStateChange(
this.handleStateChange.bind(this)
);
this.setState({
hasSubscribedToPlayerState: true,
});
}
}
If I play the video between [0..8] and [347..357] secnds, the function handleStateChange
logs something like this:如果我在 [0..8] 和 [347..357] 秒之间播放视频,function handleStateChange
记录如下内容:
~ file: VideoItem.js ~ line 212 ~ VideoItem ~ handleStateChange ~ beginning_of_play_segment 0 ~ 文件:VideoItem.js ~ 第 212 行 ~ VideoItem ~ handleStateChange ~ begin_of_play_segment 0
~ file: VideoItem.js ~ line 212 ~ VideoItem ~ handleStateChange ~ end_of_play_segment 8 ~ 文件:VideoItem.js ~ 第 212 行 ~ VideoItem ~ handleStateChange ~ end_of_play_segment 8
~ file: VideoItem.js ~ line 212 ~ VideoItem ~ handleStateChange ~ beginning_of_play_segment 347 ~ 文件:VideoItem.js ~ 第 212 行 ~ VideoItem ~ handleStateChange ~ begin_of_play_segment 347
~ file: VideoItem.js ~ line 212 ~ VideoItem ~ handleStateChange ~ end_of_play_segment 357 ~ 文件:VideoItem.js ~ 第 212 行 ~ VideoItem ~ handleStateChange ~ end_of_play_segment 357
And then I thought I could just calculate the difference between all the beginning_of_played_segment
and end_of_played_segment
values.然后我想我可以计算所有beginning_of_played_segment
和end_of_played_segment
值之间的差异。
The problem with this approach is that if I replay the video in a previously played segment, for example if I restart the video in the segment [0..8] in second 4, played
will not create a new segment, and it will continue counting in that same segement.这种方法的问题是,如果我在之前播放的片段中重播视频,例如,如果我在第 4 秒重新播放片段 [0..8] 中的视频, played
将不会创建新片段,它会继续计数在同一段。
For example, if I restart in 4, and continue playing until 13, the segment [0..8] will become [0..13].例如,如果我在 4 点重新开始,并继续播放到 13 点,则段 [0..8] 将变为 [0..13]。
This makes sense given that the played
property tells us which time ranges have been played within the media.这是有道理的,因为played
属性告诉我们在媒体中播放了哪些时间范围。
However, I would like to know if there's a property that would allow me to achieve my goal, of creating a new segment, everytime the user plays the video anywhere so that I can record how much time exactly he spent watching the video.但是,我想知道是否有一个属性可以让我实现我的目标,即每次用户在任何地方播放视频时创建一个新片段,以便我可以准确记录他观看视频所花费的时间。
I have managed to implement a workaround.我设法实施了一种解决方法。 However, I am not sure this is the best approach.但是,我不确定这是最好的方法。 But, it works:但是,它有效:
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,
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.