Menu
I was using Video.JS but ultimately had to scrap it and go with plain HTML video embed tag. Can someone help me with the JavaScript that will return the to start poster when the video stops playing. I had it working in Video.JS but can't find the right code for standard HTML.
Here's the current code and I cleared out the JavaScript since it wasn't working anyway.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="testimonials" width="448" height="336" controls preload="auto" poster="https://dl.dropboxusercontent.com/u/236154657/video-splash-image4.png"
data-setup='{"example_option":true}'>
<source src="https://dl.dropboxusercontent.com/u/236154657/WK%20Life%20Coaching%20Video%2012.13.mp4" type='video/mp4'>
</video>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
</body>
</html>
331
A f'up to my above comment: The onended event fires only after the video player has expended its content, and gone to black. So between the end of video and the poster, we see a black flicker.
To prevent the flicker, I simply ran the video to near its end, then called .load() to park the player back onto the poster:
<video ontimeupdate="video_time_update(this)"
poster="/ourMovie.png">
<source src="/ourMovie.mp4" type="video/mp4">
</video>
...
function video_time_update(video) {
if (video.currentTime > 3.3) {
video.load(); /* parks the video back to its poster */
}
}
Note that we know our video is 3.4 seconds long, AND we don't mind missing the last few frames. video_time_update() is lazy, and does not call for every tick.
And note that those of you serving videos of unknown duration might need this.duration instead of 3.3, there.
27
The easiest way I have been able to find is to reset the source of the video on the ended event so that it returns to the beginning. The other way to handle it would be to have a div with the poster image in that you swap out for the video, but this is simpler...
<script>
var vid=document.getElementById('testimonials');
vid.addEventListener("ended", resetVideo, false);
function resetVideo() {
// resets the video element by resetting the source
this.src = this.src
}
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
