HTML DOM Video loop Property

The HTML DOM Video loop property returns/sets boolean value corresponding to whether the video will play again automatically on end or not.

Syntax

Following is the syntax −

Returning boolean value - true/false

mediaObject.loop

Setting loop to booleanValue

mediaObject.loop = booleanValue

Here, “booleanValue” can be the following −

booleanValue	Details
true	It defines that video willautomatically play again on end
false	It defines that video won’tautomatically play again on end

Let us see an example of Video loop property −

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video loop</title>
<style>
   * {
      padding: 2px;
      margin:5px;
   }
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
   <form>
      <fieldset>
         <legend>HTML-DOM-Video-loop</legend>
         <video id="demo" width="320" controls><source    src="https://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4" type="video/mp4"></video><br>
         <input type="button" onclick="getTrackDetails()" value="Loop Video Tutorial">
         <div id="divDisplay"></div>
      </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var demo = document.getElementById("demo");
   divDisplay.textContent = 'Video loop: '+demo.loop;
   function getTrackDetails() {
      demo.loop = true;
      demo.load();
      divDisplay.textContent = 'Video loop: '+demo.loop;
   }
</script>
</body>
</html>

Output

Before clicking ‘Loop Video Tutorial’ button −

HTML DOM Video loop Property

After clicking ‘Loop Video Tutorial’ button, the video will reach the beginning −

HTML DOM Video loop Property