Jump to content

Video loop with a timer?


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 post
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 post
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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...