How to trigger a function when 80% of the video has been reached and has been watched?

Question

In short, I am struggling to figure out when the video reaches 80% AND 80% of the movie has been played in order to prevent people from fast forwarding.

I currently manage to fire a method, once the movie ends and the total value of the amount played is equal to or larger than the duration of the video.

var video = document.getElementById("video");

var timeStarted = -1;
var timePlayed = 0;
var duration = 0;
var checkpoint = 0;
var percentage = 0.8;
var percentComplete = 0;

// If video metadata is laoded get duration
if(video.readyState > 0)
  getDuration.call(video);
//If metadata not loaded, use event to get it
else
{
  video.addEventListener('loadedmetadata', getDuration);
}
// remember time user started the video
function videoStartedPlaying() {
  timeStarted = new Date().getTime()/1000;
}
function videoStoppedPlaying(event) {
  // Start time less then zero means stop event was fired vidout start event
  if(timeStarted>0) {
    var playedFor = new Date().getTime()/1000 - timeStarted;
    timeStarted = -1;
    // add the new ammount of seconds played
    timePlayed+=playedFor;
  }
  document.getElementById("played").innerHTML = Math.round(timePlayed)+"";
  // Count as complete only if end of video was reached
  if(timePlayed>=duration && event.type=="ended") {
    document.getElementById("status").className="complete";
  }
}

function videoIsPlaying(event) {
  if(timeStarted>0) {
    var playedFor = new Date().getTime()/1000 - timeStarted;
    timeStarted = -1;
    // add the new ammount of seconds played
    timePlayed+=playedFor;
  }
  
  checkpoint = playedFor / duration;
  percentComplete = video.currentTime / video.duration;
  
  console.log('timePlayed is '+timePlayed);
  console.log('percentComplete is '+percentComplete);
  console.log('checkpoint is '+checkpoint);
  console.log('duration is '+duration);
  console.log('playedFor is '+playedFor);
  
  if (percentComplete >= percentage && checkpoint >= percentage) {
   
  }
}

function getDuration() {
  duration = video.duration;
  document.getElementById("duration").appendChild(new Text(Math.round(duration)+""));
  console.log("Duration: ", duration);
}

video.addEventListener("play", videoStartedPlaying);
video.addEventListener("playing", videoStartedPlaying);

video.addEventListener("timeupdate", videoIsPlaying);

video.addEventListener("ended", videoStoppedPlaying);
video.addEventListener("pause", videoStoppedPlaying);

#status span.status {
  display: none;
  font-weight: bold;
}
span.status.complete {
  color: green;
}
span.status.incomplete {
  color: red;
}
#status.complete span.status.complete {
  display: inline;
}
#status.incomplete span.status.incomplete {
  display: inline;
}

<video width="400" height="300" controls="true" poster="" id="video">
    <source type="video/mp4" src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_2mb.mp4"></source>
</video>

<div id="status" class="incomplete">
<span>Play status: </span>
<span class="status complete">COMPLETE</span>
<span class="status incomplete">INCOMPLETE</span>
<br />
</div>
<div>
<span id="played">0</span> seconds out of 
<span id="duration"></span> seconds. (only updates when the video pauses)
</div>
<br><br>

I would appreciate any hints and snippets into the right direction!

Answer 1

Create an Array and a Set object. At loadedmetadata event set value which is measurement of .8 of .duration Math.ceil(video.duration * percent), where percent is a decimal less than 1. Use for loop to fill Array instance with values from 1 to N, where N is eighty-percent of .duration +1 as an integer. Call .add() on Set instance with Math.ceil(video.currentTime) as parameter at timeupdate event. At timeupdate event iterate Array using .every() to check if each element of Set .has() element of Array, including Math.ceil(video.duration * percent), which will be eighty-percent or greater of .duration; if true is returned from .every() call function.

const video = document.getElementById("video");
const res = new Set();
const arr = Array();
const percent = .8;
let toWatch = 0;

function mediaWatched (curr) {
  alert(`${curr}% of media watched`)
}

function handleMetadata(e) {
  toWatch = Math.ceil(video.duration * percent);
  for (let i = 1; i <= toWatch + 1; i++) {
    arr.push(i);
  }
}

function handleTimeupdate (e) {
  res.add(Math.ceil(video.currentTime));
  if (arr.every(function(n) {return res.has(n)})) {
    console.log(video.currentTime, video.duration);
    video.removeEventListener("timeupdate", handleTimeupdate);
    mediaWatched(Math.ceil((video.currentTime / video.duration) * 100));
  }
}

video.addEventListener("loadedmetadata", handleMetadata);

video.addEventListener("timeupdate", handleTimeupdate);

<video width="400" height="300" controls="true" poster="" id="video">
    <source type="video/mp4" src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_2mb.mp4" />
</video>

Answer 2

MDNs Cross-browser audio basics

timeupdate

The timeupdate event is fired every time the currentTime property changes. In practice this occurs every 250 milliseconds. This event can be used to trigger the displaying of playback progress.

myAudio.addEventListener("timeupdate", function() {
  //update something related to playback progress
});