HTML5 Video go back to first frame when it ends?
-
Hey! I'm trying to get my videos to go back to their first frame when they reach the end. After searching on multiple forums on the internet, the solution seems to be a jQuery code with a custom tag in the HTML. But how can I add the code in the video tag with laytheme? Is there a solution?
Here's the link to the forum with the solution: https://stackoverflow.com/questions/8132890/make-html5-video-go-to-first-frame-when-it-ends
-
Dear @baferti
I assume this is not for a Looping effect? The following solution worked for me:
https://stackoverflow.com/questions/8132890/make-html5-video-go-to-first-frame-when-it-ends
The <video> element must be targeted in the code below. Here
getElementById
looks for the element with the id "video" (i have added it myself for testing)var video = document.getElementById('video') // When the 'ended' event fires video.addEventListener('ended', function(){ // Reset the video to 0 video.currentTime = 0; // And pause ready for video.pause(); });
Video is set back to 0:00 timing. Getting it to work with your particular design will be up to you, but i hope this helps!
Best wishes & have a wonderful day 🏖
Richard
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it