Menu
I have limited knowledge on JS/JQuery but I am wondering if you can detect the end of a HTML5 video and then Play the video in reverse and then play it from the start so basically an endless loop playing forwards and then backwards?
Using JQuery/Javascript
307
Without even going into HTML5 or Javascript, many video formats are streaming formats that are designed to be played forward. Playing it backwards would require decoding the whole stream, storing each raw frame on the disk to avoid clobbering memory, then rendering the frames backwards.
To use JavaScript to dynamically change a video's source, we can set the src property of the source element to the URL of the video. to add the video element with the source element's src attribute set to a video path. to select the source element in the video element with document.
The loop attribute is a boolean attribute. When present, it specifies that the video will start over again, every time it is finished.
Simply call jQuery and add your code before the closing tag and then add the class '. noloop' to the parent of the video element. It simply removes the attribute 'loop' from the video HTML and that allows the video to run to the end and stop without looping.
Streaming video codecs are optimised to be played forward so, while there is a playbackRate property of HTML5 video which you might be able to use to reverse the playback of your video (try setting it to -1), the result is probably not going to be particularly satisfactory.
A better approach would be to create an additional video at the encoding stage which runs in reverse. You could then use the video's ended event to toggle the source back and forward between the forward and reversed videos.
Or as Ken, has helpfully suggested in the comments, create a single video in which the sequence is played forward and then in reverse. You can then set the video to loop and you've got what you're after.
Just for your reference, the w3 have quite a handy example which allows you to explore in real time the various methods, properties and events available in HTML5 video.
137
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
