Jump to content
Sign in to follow this  
Didjo

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

Share this post


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.

Share this post


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

Share this post


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.

Share this post


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" ...> ?

Share this post


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

Share this post


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...
Sign in to follow this  

×
×
  • Create New...