JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset='utf-8'>
  <title>HTML5 Video</title>
  <script src="script.js">
  </script>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <h1>HTML5 Video Events and API</h1>


  <p>This page demonstrates the new <a
  href='http://www.w3.org/TR/html5/video.html#video'>HTML5 video
  element</a>, its <a
  href='http://www.w3.org/TR/html5/video.html#htmlmediaelement'>media API</a>, and the <a
  href='http://www.w3.org/TR/html5/video.html#mediaevents'>media events</a>. Play, pause, and seek in the entire
  video, change the volume, mute, change the playback rate (including
  going into negative values). See the effect on the video and on the
  underlying events and properties.</p>


  <div>
    <video id='video'
      controls preload='none' 
      poster="http://media.w3.org/2010/05/sintel/poster.png">
      <source id='mp4'
        src="http://media.w3.org/2010/05/sintel/trailer.mp4"
        type='video/mp4'>
      <source id='webm'
        src="http://media.w3.org/2010/05/sintel/trailer.webm"
        type='video/webm'>
      <source id='ogv'
        src="http://media.w3.org/2010/05/sintel/trailer.ogv"
        type='video/ogg'>
      <p>Your user agent does not support the HTML5 Video element.</p>
            </video>
    </div>

    <div>
        <h2>isFullyWatched Output...</h2>
         <textarea id="output" style="width:100%; height:300px;"></textarea>
        <br />
        <button type="button" onclick="isFullyWatched(document.getElementById('video'));">
            check if fully watched
        </button>
        
    </div>
            
            
            
<p>
Many, many thanks to the <a href='http://www.blender.org/blenderorg/blender-foundation/'>Blender
Foundation</a> and the community around the <a href='http://www.blender.org/'>blender project</a>.
</p>


     </body>
</html>

JavaScript

var addOutput = function(msg) {
    var o = document.getElementById('output');
    if(typeof msg == "string")
        o.value = msg + "\n" + o.value;
    else
        o.value = JSON.stringify(msg) + "\n" +  o.value;
}

//Assuming the HTML5 video element's .played attribute is NOT normalized as according to:
//http://www.w3.org/TR/html5/media-elements.html#normalized-timeranges-object
isFullyWatched = function (videoElement) {
    var V = videoElement;
    var vid_seconds = [];
    var totalSeconds = Math.floor(V.duration);
    //Build array of all whole seconds of video, filled with Zeros (0)
    for(var i=0,j=totalSeconds;i<j;i++) {
        vid_seconds.push(0);
    }
    
    //Foreach TimeRange of video played, mark seconds played with Ones (1)
    for(var i=0,j=V.played.length;i<j;i++) {
        var s = Math.floor(V.played.start(i));
        var e = Math.floor(V.played.end(i));
        addOutput(s+"-->"+e);
        //Mark all seconds in range with a 1.
        for(var a=s;a<e;a++) {
            vid_seconds[a] = 1;
        }
    }
    addOutput(vid_seconds);
    //If vid_seconds no longer contains zeros, video fully watched.
    return vid_seconds.indexOf(0) == -1;

}

isFullyWatched(document._video);