Didjo Posted October 8, 2014 Share Posted October 8, 2014 Hi everyone, I tried to make a video which will start at the beginning and star over again <video id="Video1" controls autoplay loop> <source src="VideoXYZ.mp4" type="video/mp4"> <source src="VideoXYZ" type="video/webm"> <source src="VideoXYZ" type="video/ogg"> Your Browser does not support the video tag </video> But I want to loop the video 5 or 7 times then it definitely stops until I refresh the page, and of course I don't have a clue how to make a timer to LOOP. First, is it possible to do this? if yes, how to do it? Thank you Link to comment Share on other sites More sharing options...
niche Posted October 8, 2014 Share Posted October 8, 2014 I think this will get you started: http://www.w3schools.com/js/js_timing.asp Link to comment Share on other sites More sharing options...
Ingolme Posted October 8, 2014 Share Posted October 8, 2014 You can use Javascript to interface with the video object. Here's a list of events available on the <audio> and <video> elements When the "ended" event fires you can add 1 to a counter. If the "loop" property is set to true it will automatically return to the beginning when it finished. When the counter reaches 6 you can set the "loop" property to false and call the video's pause() method. Link to comment Share on other sites More sharing options...
Didjo Posted October 9, 2014 Author Share Posted October 9, 2014 (edited) Hi, Thank you for your answers, I tried this, of course it didn't work: function timer() { var myVideo = document.getElementById('Video1'); var i = 0; while (i < 2) { myVideo.loop = true; i++; } myVideo.loop = false; } Did I forget something or the syntax is completely wrong? Edited October 9, 2014 by Didjo Link to comment Share on other sites More sharing options...
Ingolme Posted October 9, 2014 Share Posted October 9, 2014 I seem to have forgotten to put the link to the list of events in my previous post. Here's a list of event listeners for the player: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events This is a list of properties and methods that the player uses: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement No loops are necessary, the counter is a global variable that updates each time the ended event occurs. Use an if() condition to set the loop property to false and call the pause() method. Link to comment Share on other sites More sharing options...
Didjo Posted October 9, 2014 Author Share Posted October 9, 2014 I tried this: function test() { var i = 0; var bool = boolean; var myVideo = document.getElementById('Video1'); bool = "true"; While i < 7 If myVideo.ended() myVideo.play() i++ } } I may be wrong in my syntax but is correct if i make something like this? And how do i put this function in <video id="Video1" ...> ? Link to comment Share on other sites More sharing options...
Ingolme Posted October 9, 2014 Share Posted October 9, 2014 It seems like you don't have experience with event handlers. Here's a page explaining it: http://www.w3schools.com/js/js_htmldom_eventlistener.asp What you would do is this var counter = 0;var video = document.getElementById("Video1");video.addEventListener("ended", count, false);function count() { counter++; if(counter == 6) { video.loop = false; video.pause(); }} Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now