HTML DOM Video muted Property

HTMLWeb DevelopmentFront End Technology

The HTML DOM Video muted property returns/sets boolean value corresponding to whether the video’s audio will be on mute or not.

syntax

Following is the syntax −

Returning boolean value - true/false

mediaObject.muted

Setting muted to booleanValue

mediaObject.muted = booleanValue

Here, “booleanValue” can be the following −

booleanValue
Details
true
It defines that video willhave its audio on mute
false
It defines that video willnot have its audio on mute

Let us see an example of Video muted property −

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video muted</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-muted</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(1)" value="Day Time">
         <input type="button" onclick="getTrackDetails(2)" value="Night Time">
         <div id="divDisplay">
         </div>
      </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var demo = document.getElementById("demo");
   function getTrackDetails(val) {
      if(val === 1){
         demo.muted = false;
         divDisplay.textContent = 'Its Day Time, so anyone will not get disturbed';
      }
      else{
         demo.muted = true;
         divDisplay.textContent = 'Its Night Time, so video will be on mute by default';
      }
   }
</script>
</body>
</html>

Output

Clicking ‘Night Time’ button −

Clicking ‘Day Time’ button −

raja
Published on 30-Oct-2019 14:13:53
Advertisements