Jump to content

Video loop with a timer?


Didjo

Recommended Posts

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

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

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 by Didjo
Link to comment
Share on other sites

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...