Javascript timeupdate事件-在addEventListener中获取POST数据

我试图跟踪用户在我的应用程序中观看视频的时间

因为他们很可能不会看整部电影，所以我只保存了四分之一、一半和四分之三的视频

我的想法是，当progress变量达到25、50和75时，我会向数据库发出一个fetchpost请求。将此记录到控制台时，我有多个timeupdate事件，这将导致在if语句触发时获取多次。有谁有更好的解决方案可以分享吗

-对于那些想看一看的人

录像部分：

<video src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_10mb.mp4" controls>
</video>

---

找到了一些代码来帮助您。归功于

这解决了我的问题

HTML

const video = document.querySelector('video')

let duration
let progress

video.onloadedmetadata = function() {
  duration = video.duration
}

video.addEventListener('timeupdate', (e) => {
  progress = Math.floor(video.currentTime / duration * 100)
  console.log(progress)
  if(progress == 25) {
  console.log('Seen 25%')
  }
  if(progress == 50) {
  console.log('Seen 25%')
  }
  if(progress == 75) {
  console.log('Seen 25%')
  }
})

video.onended = function() {
console.log(duration)
console.log(progress)

}

<video src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4" controls></video>

const video = document.querySelector('video')

let not_watched_25 = true;
let not_watched_50 = true;
let not_watched_75 = true;

video.addEventListener('timeupdate', () => {

    let currentTime = video.currentTime
  let duration = video.duration
  //double percentages will occur because of calculations. ie. 25.1 % watched and 25.2%watched. 
  //when fixed to decimal places 25 occurs and then 25 occurs again. 
  //boolean value used to call pixel only once.
  let percentage_watched = (currentTime / duration) * 100;

  if ((percentage_watched.toFixed() == 25) && (not_watched_25 == true)) {
    console.log("watched 25%")
    //utag.link({'event_type' : 'video', 'event_action': '25% watched', 'video_milestone': '25%'});
    not_watched_25 = false;
  } else if ((percentage_watched.toFixed() == 50) && (not_watched_50 == true)) {
    console.log("watched 50%")
    //utag.link({'event_type' : 'video', 'event_action': '50% watched', 'video_milestone': '50%'});
    not_watched_50 = false;
  } else if ((percentage_watched.toFixed() == 75) && (not_watched_75 == true)) {
    console.log("watched 75%")
    //utag.link({'event_type' : 'video', 'event_action': '75% watched', 'video_milestone': '75%'});
    not_watched_75 = false;
  }

})