Javascript DOM HTML Video loop Property set

Introduction

Set the video to loop: 

document.getElementById("myVideo").loop = true;

View in separate window 

<!DOCTYPE html>
<html>
<body>

<video id="myVideo" width="100" height="100" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video><br>
<p id="demo"></p>
<button onclick="enableLoop()" type="button">Enable loop</button>
<button onclick="disableLoop()" type="button">Disable loop</button>
<button onclick="checkLoop()" type="button">Check loop status</button>

<script>
var x = document.getElementById("myVideo");

function enableLoop() {/* w ww. ja va 2s. com*/
  x.loop = true;
  x.load();
}

function disableLoop() {
  x.loop = false;
  x.load();
}

function checkLoop() {
  document.getElementById("demo").innerHTML = x.loop;
}
</script>

</body>
</html>

The loop property sets or gets whether a video should start playing again when it is finished.

This property mirrors the <video> loop attribute.

Property Values

Value Description
true the video should start playing again when it is finished
false Default. the video should NOT start playing again when it is finished

The loop property returns true if the video starts playing over again, every time it is finished.




PreviousNext

Related