How to repeat video/audio once and play twice total?

[Winston]

I fast-forward to the end, and it appears to repeat more than once. Help? I was trying to make a video play twice, or repeat once. This didn't work: 

function XXX() {
  x.loop = 2;
}

I looked it up and only found how to play once or repeat infinity times. I was trying to press text to do this:

<a onclick="XXX()"><u>Repeat Once (Play Twice)</u></a><br>

I added this to the script command:

var x = document.getElementById("VideoExample");

and the video file:

<video id="VideoExample">
  <source src="video/video.mp4" type="video/mp4">
</video> 

When I tested and jumped to the end a few times, it appears to play infinitely, not twice. Help?

 

[Ingolme]

The loop property is a boolean, true to loop infinitely or false to never loop.

If you want it to loop a specific number of times then you have to have Javascript tell it to play again each time it ends until a certain count has been reached.

Here's an example:

<video id="VideoExample">
  <source src="video/video.mp4" type="video/mp4">
</video> 
<a class="repeatbutton" data-times="1" data-video="VideoExample">Repeat Once (Play Twice)</a>
<a class="repeatbutton" data-times="2" data-video="VideoExample">Repeat Twice (Play Three Times)</a>

<script>
  
// Set up the event listener on the video element
var video = document.getElementById("VideoExample");
video.loop = false; // It shouldn't automatically loop, we have to make it loop ourselves.
video.addEventListener("ended", repeatVideo); // Each time the video ends, run this code.

// Listen for button clicks
var buttons = document.getElementsByClassName("repeatbutton");
for(let i= 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", beginLooping);
}

// Function definitions
function beginLooping(e) {
  let button = e.currentTarget;

  let videoId = button.getAttribute("data-video");
  let loopCount = button.getAttribute("data-times");

  let video = document.getElementById(videoId);
  video.setAttribute("data-loopcount", loopCount);
  video.play();
}

function repeatVideo(e) {
  let video = e.currentTarget;
  let count = Number(video.getAttribute("data-loopcount"));
                     
  // Keep the video repeating as long as the loop count is greater than zero
  if(count > 0) {
    count--;
    video.setAttribute("data-loopcount", String(count));
    video.play();
  }
}
</script>

 

[Winston]

I don't see onClick. I already used Class for the pointer, could you try Id instead? Could you try to simplify or decrease amount of code? I click the picture in <a>, but nothing happened. Also, I was trying to modify it to work for my settings (like Id instead of Class), could you use Class twice, or put both in one Class?

[Winston]

I got it to work, but can you give me a "cancel" command?

[Winston]

I was wondering if I could also have a Cancel command that changes it to 0 (play once) if I have it on 1 or more (play twice or more). I tried adding this...

<a data-times="0" data-video="myVideo">Cancel</a>

But it still plays twice.

[Winston]

Never-mind, I discovered I needed the "class".
 

[Ingolme]

Using the addEventListener() function to listen for events is a better way to check for clicks than an "onclick" attribute because it has access to a lot more useful information and it keeps the HTML clean.

When you want Javascript to affect multiple elements in the same way, class is better than id. I added a class to the links because there are two links that do the same thing, but if you only need one link you can use an id attribute instead.

You can have more than one class on an element, you just need to separate the class names with spaces like this:

<!--
  This link has these classes: repeatbutton, changepointer and align-right
-->
<a class="repeatbutton changepointer align-right">

To cancel the the looping, you just need to set the video's data-loopcount attribute to 0. If you also want the video to stop when the cancel link is pressed, you can call video.stop().

<a id="cancelbutton" data-video="myVideo">Cancel</a>
<script>
let link = document.getElementById("cancelbutton");
link.addEventListener("click", cancelLoop);

function cancelLoop(e) {
  let videoId = e.currentTarget.getAttribute("data-video");
  let video = document.getElementById(videoId);
  video.setAttribute("data-loopcount", "0");
  
  // Optionally you can stop the video by adding this line
  video.stop();
}
</script>