Updated Fiddle

Question

143

HTML5 < Video> Loop with a gap or delay of few seconds

rated 0 times [ 145] [ 2] / answers: 1 / hits: 16110 / 9 Years ago, mon, august 17, 2015, 12:00:00

I am using the HTML 5 Video tag to show the video on my page with the Loop feature or attribute.

Is there any way we can add a delay or gap between video using the Loop attribute??

<video id=myVideo autoplay loop src=http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4>

Please refer the link to see the Video tag code > http://jsfiddle.net/nrf5fbh8/1/

Please suggest!

Updated my code, my video tag DO NOT have controls.

Thanks!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

louiemarvinm

Add To Favorites

Follow

Total Points: 473

Total Questions: 103

Total Answers: 94

Location: Samoa

Member since Mon, Nov 8, 2021

3 Years ago

answered 9 Years ago bradleymoisesy · Accepted Answer

Expanding on my comment above, basically instead of using the loop attribute you can set up a listener and place a function within the listener to replay the video after a specified amount of time(in milliseconds) once the video has ended. The JS would look like this:

document.getElementById('myVideo').addEventListener('ended',myHandler,false);

function myHandler(e) {

    console.log('ended');

    setTimeout(function(){

        document.getElementById('myVideo').play();

    }, 5000);

}