HTML DOM Video loop Property

HTMLWeb DevelopmentFront End Technology

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="http://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 −

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

raja
Published on 30-Oct-2019 14:10:19
Advertisements