Detect When an Html5 Video Finishes

Detect when an HTML5 video finishes

You can add an event listener with 'ended' as first param

Like this :

<video src="video.ogv" id="myVideo">
  video not supported
</video>

<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        // What you want to do after the event
    }
</script>

Event listener don't detect the finish of a video

It works fine on the JavaScript part, but if you prefer to use jQuery, you should dereference any jQuery objects you intend to use with JavaScript API for video methods and properties. Details are commented in Snippet.

BTW, .bind() jQuery method is deprecated, the .on() method is it's replacement.

SNIPPET

/*~~~~~~~~~~~~~~~~~ || Plain JavaScript */// Creating <video>var vid1 = document.createElement("video");
/* Assigning:|| #id|| src|| controls*/vid1.id = 'vid1';vid1.src = 'http://media6000.dropshots.com/photos/1381926/20170326/023642.mp4';vid1.controls = true;
// Add node to DOMdocument.body.appendChild(vid1);
// Register #vid1 to ended event to call videoFinish()vid1.addEventListener('ended', videoFinish, false);
/*~~~~~~~|| jQuery*/// Append this jQuery object to the DOM$('<video id="vid2" src="http://media6000.dropshots.com/photos/1381926/20170326/023642.mp4" controls></video>').appendTo('body');
/* Dereference a jQuery object in order to use a || method from a JavaScript API like HTML5 Video by|| using bracket notation.*/var vid2 = $('#vid2')[0];
/* Now vid2 is a plain JavaScript object like vid1|| Now it can easily use video methods and properties*/vid2.addEventListener('ended', videoFinish, false);
function videoFinish(e) {  alert(e.target.id + ' has ended!');}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to know which Html video has ended?

To get the value from DOM element in javascript:

document.getElementById('textbox_id').value

you can get the element by className or by tagName(input) or by Name

You have to addEventListener to each video

so..

    var videos= document.getElementsByTagName("videos");
     for (var i = 0; i < videos.length; i++) {
       videos[i].addEventListener("ended", function(event) {
          var target = event.target;
          var parent = target.parentElement; // here you sepose to get the element above the video (the input)
       });
     }

Here is explain for finding element:https://www.w3schools.com/js/js_htmldom_elements.asp

Detect in Javascript when HTML5 video loop restarts?

I think the most reliable way is to loop it yourself. Remove the loop attribute and do this:

document.querySelector('video').addEventListener('ended', function () {  console.count('loop restart');  this.play();})

<video autoplay muted src="https://rawgit.com/bower-media-samples/big-buck-bunny-480p-5s/master/video.mp4"></video>

How to detect when HTML5 video is played the first frame?

There is another way to do this using currentTime and defining a function for everytime the time for the video changes. Set a div on top of HTML5 video element and modify that element when currentTime is between 3 and 4 seconds.

Sample code would look like this:

HTML:

<div id="wrap_video">

<div id="video_box">
    <div id="video_overlays"></div>
    <div>
        <video id="myVideo" width="320" height="176" controls autoplay>
  <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">

  Your browser does not support HTML5 video.
       </video>
    </div>
</div>

</div>

CSS:

#video_box{
    position:relative;
}
#video_overlays {
    position:absolute;
    width:160px;
    min-height:100px;
    background:transparent;
    z-index:300000;
    bottom:50px;
    left:10px;
    text-align:center;
}

JavaScript:

var vid = document.getElementById("myVideo");

// Assign an ontimeupdate event to the video element, and execute a function if the current playback position has changed
vid.ontimeupdate = function() {myFunction()};

function myFunction() {
    //if currentTime is greater than 3 but less than 4, as in second 3+, go into if statement, otherwise go to else statement
    if (vid.currentTime > 3 && vid.currentTime < 4) {
        document.getElementById("video_overlays").innerHTML = '<p>Image Here</p>';
    }
    else {
        document.getElementById("video_overlays").innerHTML = '';
    }
}

You can inside the first if statement pause the video and then show an image and then make the video start again after a certain timeout, if that was your intention but this code is essentially the skeleton to do something like that.

Working sample: http://jsfiddle.net/l33tstealth/wgcbcf1t/10/

HTML5 Video - File Loading Complete Event?

You can bind the "buffered" event, but (in Chrome at least) this works fine except that it doesn't call the last "buffered" event (i.e. it will detect 90%...94%...98%... but won't call on 100%).

Note: recent versions of jQuery should use .prop() instead of .attr()

To get around this I've used setInterval() to check the buffer every 500ms (where $html5Video is your <video> element:

var videoDuration = $html5Video.attr('duration');

var updateProgressBar = function(){
    if ($html5Video.attr('readyState')) {
        var buffered = $html5Video.attr("buffered").end(0);
        var percent = 100 * buffered / videoDuration;

        //Your code here

        //If finished buffering buffering quit calling it
        if (buffered >= videoDuration) {
                clearInterval(this.watchBuffer);
        }
    }
};
var watchBuffer = setInterval(updateProgressBar, 500);

How to detect when a HTML5 video is played for the first time?

$('video').one('play', function () {
   //whatever you want to do
});

jQuery detect if HTML5 autoplay video plays already?

As @Bilel pointed out, there are diffent ways to do this. I've chosen the way of an "on-play-function".

which leaves me with this:

var videocontainer = '#bgvid';
 
jQuery(videocontainer).on('play', function() {
    jQuery('.video-overlay').fadeOut(400);
});

This works fine for me, because it fades away my overlay on play and is not needed later, because the video autoplays, loops and the controls are hidden.

Detect When an Html5 Video Finishes