Asked  6 Months ago    Answers:  5   Viewed   30 times

How do you detect when a HTML5 <video> element has finished playing?

 Answers

21

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>
Tuesday, June 1, 2021
 
Deyson
answered 6 Months ago
21

The trouble here is that many issues can't be fixed by switching to Flash. In fact, the only time you're really benefited by switching to Flash is in IE, FF, and Opera when you've got an MP4 to play, and in all browsers when you've got an FLV. (This is obviously subject to change based on native Flash support for webm / Theora.)

For this reason, we've done the following for the JW Player for HTML5:

  • Ask the browser if it can play the file.
  • If the browser can't play the file, check the list of supported file types for Flash based on the file's extension.
  • If Flash can't play the file, offer a download link.

This solution isn't foolproof, but it gets you 90%+ of the way there.

Best,

Zach

Developer, LongTail Video

Wednesday, August 18, 2021
 
Cheers and hth. - Alf
answered 4 Months ago
18

The easiest way I have found is modifying the prototype for the class as such.

Insert

<script>
    _V_.ControlBar.prototype.options.components = {'playToggle':{}}
</script>

right after

<script src="http://vjs.zencdn.net/c/video.js"></script>

This will remove every control ( including the duration, time remaining and seek bar ) besides the play toggle button

If you would like other things, you may pick and choose from the defaults (a few of these are set to hidden on the default skin)

options: {
    components: {
        "playToggle": {},
        "fullscreenToggle": {},
        "currentTimeDisplay": {},
        "timeDivider": {},
        "durationDisplay": {},
        "remainingTimeDisplay": {},
        "progressControl": {},
        "volumeControl": {},
        "muteToggle": {}
    }
}

Or dig through the controls.js file on git hub https://github.com/zencoder/video-js/blob/master/src/controls.js

Monday, September 13, 2021
 
The_Perfect_Username
answered 3 Months ago
72

Pasting from another StackOverflow answer: https://stackoverflow.com/a/4129189/1353189

<video id="foo" src="foo.mp4"></video>

var vid = document.getElementById("foo");
vid.videoHeight; // returns the intrinsic height of the video
vid.videoWidth; // returns the intrinsic width of the video

Source (HTML5 spec): http://www.w3.org/TR/html5/video.html#video

You can then calculate the aspect ratio by dividing the width by the height.

Thursday, November 4, 2021
 
dnoeth
answered 4 Weeks ago
86

What you should do is implement your own controls (or use an existing set such as videojs)
You can read my answer to this question: Html5 video overlay architecture

Wednesday, November 10, 2021
 
Assassin
answered 3 Weeks ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share