HTML5 video how do I show last video frame when seeking to end?

user_1205871 0
Viewed 292

When I manually call:

player.currentTime = player.duration

(1) The video currentTime jumps to the end (desired and expected)

(2) The video starts playback from the start when I click play (desired and expected)

(3) The video does not update to show the last frame (undesired and unexpected)

Currently, I am having to do this:

player.currentTime = player.duration - 0.0001
player.play()

Which causes the video to jump close to the end and then resumes playback and then almost immediately stops when it hits the end, which fixes my problem in that the video now shows the last frame.

However, this feels somewhat hacky and cannot be as fast as simply just setting the current time. Is there a better fix? thanks

NOTE: the seek to end operation must support code programmatic code execution (e.g. code execution in response to a button click). I am NOT using the players built in seek/scrub bar (which works fine).

html5-video video javascript
1 Answers

I think I found answer, in firefox setting player.currentTime = player.duration triggers "ended" event, thus video ends (no gap at end of seek bar).

But in chrome is this different, in chrome setting player.currentTime = player.duration won't trigger "ended" event and there is slight gap end of seek bar (i think this is what you were referring). Link to my test jsfiddle.

TL:DR The good old vendor issue

Also setting player.currentTime = player.duration + 99999 in chrome doesn't trigger "ended" event and seek bar still has gap at end.

So current work around for this bug is

stopButton.addEventListener('click', () => {
  player.currentTime = player.duration
  player.play() // trick for chrome
})

// to verify
player.addEventListener('ended', (e) => console.log(e.target.ended ? "ended" : "not ended"))

This code works on both firefox and chrome and results are exact same.

user_141129470
Related