HTML5 Video Embed Return to Poster at End of Play
html, javascript, video
Solution
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>
Problem
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> ```