Geek Answers Handbook

HTML5 Video Paste Back to the poster at the end of the game

I used Video.JS, but ended up having to abandon it and go with the usual HTML video embed tag. Can someone help me with JavaScript that will bring the poster back when the video stops playing. I worked in Video.JS but could not find the correct code for standard HTML.

Here's the current code, and I cleared JavaScript as it still didn't work.

<!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>
+7
javascript html html5 video
source share
4 answers

The easiest way I could find is to reset the video source in the ended event so that it returns to the beginning. Another way to handle this would be to have a poster div in what you are changing for the video, but it's easier ...

 <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>
+4
source share

A f'up for my comment above: The onended event fires only after the video player has spent its contents and went black. So, between the end of the video and the poster, we see a black flicker.

To prevent flickering, I just ran the video near its end and then called .load() to put the player on 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 */ } }

Please note that we know that our video lasts 3.4 seconds, and we are not averse to skipping the last few frames. video_time_update() is lazy and does not require for each tick.

And note that those of you who serve videos of unknown duration may need this.duration instead of 3.3, there.

+2
source share

Please follow the link below using real information: Redirect html5 video after the game

 <script src="text/javascript"> // Do not name the function "play()" function playVideo(){ var video = document.getElementById('video'); video.play(); video.addEventListener('ended',function(){ window.location = 'http://www.google.com'; }); } </script> <video controls id="video" width="770" height="882" onclick="playVideo()"> <source src="video/Motion.mp4" type="video/mp4" /> </video>

Hope this helps.

0
source share

Below it is 100%

 <script type="text/javascript"> function skip(value) { var video = document.getElementById("Video1"); video.addEventListener("ended", resetVideo, false); video.currentTime = 0; video.currentTime += value; video.play(); function resetVideo() { video.load(); } } </script>
0
source share

More articles:


All Articles