How to verify that the user has watched the full video in the html5 video player

Question

Does anyone know how I can check if a video has been fully watched or not? I am using html5 video players:

<video width="480" height="400" controls="true" poster=""> <source type="video/mp4" src="video.mp4"></source> </video> 

Answer 1

The basic check is simple, wait for the ended event. It is so simple that you can just download it.

Now, to verify that the user has played the full video , an extensive analysis is required to check whether he will play every second. However, this is not necessary, this user should be enough:

• played as many seconds as video for a long time
• plays until the end of the video

This fragment demonstrates just that. A video will not be marked as fully played if you just skip it to the end. Playing the beginning again and again does not mean that it is fully reproducing:

 var video = document.getElementById("video"); var timeStarted = -1; var timePlayed = 0; var duration = 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 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("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="200" controls="true" poster="" id="video"> <source type="video/mp4" src="http://www.w3schools.com/html/mov_bbb.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> 

Also om jsFiddle: https://jsfiddle.net/p56a1r45/2/

You can then connect this to google analytics to see how many video games have been played. Simple code from the Google Analytics website :

 ga('send', 'event', 'Videos', 'play', 'Video name'); 

Answer 2

Adding id attribute:

 <video id="video" width="480" height="400" controls="true" poster=""> <source type="video/mp4" src="video.mp4"></source> </video> 

You can attach the ended event to your video:

With simple javascript:

 document.getElementById('video').addEventListener('ended', function(e) { // Your code goes here }); 

Using jQuery:

 $('#video').bind('ended', function() { // Your code goes here }); 

Answer 3

 var vid = document.getElementById("myVid"); vid.onended = function() {alert("The video has ended");};