HTML DOM Video autoplay Property


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

Syntax

Following is the syntax −

Returning boolean value - true/false

mediaObject.autoplay

Setting autoplay to booleanValue

mediaObject.autoplay = booleanValue

Here, “boolean value” 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 −

Updated on: 08-Jul-2020

131 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements