HTML DOM Video autoplay Property

HTMLWeb DevelopmentFront End Technology

The HTML DOM Video autoplay property returns/sets boolean value corresponding to whether the video will play automatically on page load or not.

Following is the syntax −

Returning boolean value - true/false

mediaObject.autoplay

Setting autoplay to booleanValue

mediaObject.autoplay = booleanValue

Here, “booleanValue” can be the following −

booleanValue
Details
true
It defines that video will automatically play onpage load
false
It defines that video will not automatically playon page load

Let us see an example of Video autoplay property −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video autoplay</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-autoplay</legend>
         <video id="demo" width="320" controls><source                src="http://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4"></video><br>
         <input type="button" onclick="getTrackDetails()" value="Disable Autoplay">
         <div id="divDisplay"></div>
      </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var demo = document.getElementById("demo");
   demo.autoplay = true;
   divDisplay.textContent = 'Autoplay: '+demo.autoplay;
   function getTrackDetails() {
      demo.autoplay = false;
      demo.load();
      divDisplay.textContent = 'Autoplay: '+demo.autoplay;
   }
</script>
</body>
</html>

Output

Before clicking ‘Disable Autoplay’ button −

After clicking ‘Disable Autoplay’ button −

raja
Published on 30-Oct-2019 06:42:01
Advertisements