Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
610 views
in Technique[技术] by (71.8m points)

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

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!

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...