13

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!

UID
  • 4,434
  • 11
  • 45
  • 75
  • 1
    One way to do it would be to use a [listener](http://www.steveworkman.com/html5-2/javascript/2012/interacting-with-html5-video-players/) combined with a [JS timeout](http://www.w3schools.com/js/js_timing.asp) to tell it to replay the video after **x** amount of seconds once the video finishes playing(instead of using the loop attribute). – APAD1 Aug 17 '15 at 20:23
  • Can you please explain using the link I provided by showing what you mean?? would be a great help!!! Thanks – UID Aug 17 '15 at 20:25
  • Hey APAD1: Just to update, my video tag donot have controls showing.. just updated my question too! – UID Aug 17 '15 at 20:29
  • 1
    No problem, removing controls will not affect my solution. – APAD1 Aug 17 '15 at 20:33

1 Answers1

18

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);
}

Updated Fiddle

APAD1
  • 13,509
  • 8
  • 43
  • 72
  • Thanks APAD1! I like your solution.. it works well in fiddle, but not sure whats the issue I'm getting error when I add the same code in my page... – UID Aug 17 '15 at 20:59
  • "SCRIPT5007: Unable to get property 'addEventListener' of undefined or null reference" – UID Aug 17 '15 at 20:59
  • Any idea what must be the issue? – UID Aug 17 '15 at 21:00
  • Move the script to the bottom of the page, right before the closing `

    ` tag. That error means that it is looking for an element that doesn't exist yet because the Javascript is being fired before the element is placed in the DOM.

    – APAD1 Aug 17 '15 at 21:00
  • 1
    Oops.. that's silly me.. Thanks Buddy your solutions rocks!!! It works well now!! – UID Aug 17 '15 at 21:03
  • No problem at all, happy it helped! – APAD1 Aug 17 '15 at 21:03
  • Make sure the attribute `loop` is not present in your html `video` tag :) – Harry Riley Jan 25 '23 at 20:57