how to track the status of video watched or not

if I write like this after 60%, I can send an ajax call and update the status to watched 60%

var i=0;
$("#video").bind("timeupdate", function(){
var currentTime = this.currentTime;
if(currentTime > 0.66*(this.duration)) {
    if(i<1) {
        /* Watched 66% ajax call will be here*/
    }
    i=i+1; //Reset for duplicates
}
});

Similarly. if I write like this after 100% I can send an ajax call and update the status to pletely watched 100%

$("#video").bind("ended", function() {
    if(j<1) {
        /* Watched 100% Finished */  
    }
    j=j+1; //Reset for duplicates
});

But when someone forwarded the video to 90% and started playing from there then also 100% ajax call will trigger so what is the logic should I use to update the status to not watched in this case.

how to track the status of video watched or not

if I write like this after 60%, I can send an ajax call and update the status to watched 60%

var i=0;
$("#video").bind("timeupdate", function(){
var currentTime = this.currentTime;
if(currentTime > 0.66*(this.duration)) {
    if(i<1) {
        /* Watched 66% ajax call will be here*/
    }
    i=i+1; //Reset for duplicates
}
});

Similarly. if I write like this after 100% I can send an ajax call and update the status to pletely watched 100%

$("#video").bind("ended", function() {
    if(j<1) {
        /* Watched 100% Finished */  
    }
    j=j+1; //Reset for duplicates
});

But when someone forwarded the video to 90% and started playing from there then also 100% ajax call will trigger so what is the logic should I use to update the status to not watched in this case.

• javascript
• jquery
• ajax
• html
• logic

Share Improve this question Follow edited May 3, 2017 at 11:12 Mr world wide asked May 3, 2017 at 4:36 Mr world wideMr world wide 4,8541010 gold badges4545 silver badges105105 bronze badges 3

• Is there some sort of callback that fires when the video is fast forwarded? There isn't much to go off in the question here :) – Garrett Kadillak Commented May 3, 2017 at 4:45
• @GarrettKadillak if fast forwarded no call back is there. I just want to store whether video is fully watched or not. – Mr world wide Commented May 3, 2017 at 4:48
• Is it possible to recreate the scenario in jsbin? – Garrett Kadillak Commented May 3, 2017 at 4:49

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

How about manipulating the functions like this

var watchPoints = [];

$("#video").bind("timeupdate", function(){
var currentTime = this.currentTime;
var watchPoint = Math.floor((currentTime/this.duration) * 100);
if(watchPoints.indexOf(watchPoint) == -1){
  watchPoints.push(Math.floor(watchPoint))
}
});

/* Assuming that this will be called regardless of whether the user watches till the end point */
$("#video").bind("ended", function() {
   /* use the watchPoints array to do the analysis(ordered array)
   Eg.1 [1,2,3,4,5....100] - length is 100
      2.[90,91..100]  - length is only 10 and the starting point is 90
      3.[1,2,3,4,5,50,51,52,61,62,63,64,65,66,67,68,69,70,98,99,100] - length is 21 and the index of 66 is 13 which clearly tells the user has skipped most of the parts
   */
});

With the research and little hard work i got the solution like this:

my HTML is this:

<div id="videoData">
<video width="75%" style="max-width: 60em;" autoplay="" controls="" class="center-block" id="video">
<source type="video/mp4" src="http://amerytech/lc_production/uploads/course_videos/Time Speed &amp; Distance/Time Speed &amp; Distance.mp4" le="max-width: 60em;" sty="">
</source>
</video>
</div>  
<p id="display">asdddddd</p>

my javascript is this:

$(document).ajaxStop(function() {
        var video = document.querySelector('video'); 
        if (video) {
            video.addEventListener("loadedmetadata", function() { 
                totalTime = this.duration;
            });
            $("#video").bind("timeupdate", function() {
                var currentTime = this.currentTime;
                var totalPlayed = 0;
                var played = video.played;
                for (var i = 0; i < played.length; i++) {
                    totalPlayed += played.end(i) - played.start(i);
                    console.log(totalPlayed);
                    $("#display").html(totalPlayed);
                }
            }); 
            } else { 
            alert("not ing"); 
        } 
    });