0

I am using mdbootstrap.com to play video, but in documentation they say I need to add muted in video tag because Google Chrome is blocking autoplay video with sound set https://mdbootstrap.com/plugins/jquery/video/

The question is: How to force audio with auto play enable?

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.5/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.5/js/mdb.min.js"></script>

<video class="video-fluid z-depth-1" autoplay loop  muted>
  <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4" />
</video>
<a class="btn btn-primary"><i class="fa fa-volume-up" aria-hidden="true"></i>&nbsp;&nbsp;unmute sound</a>
Otávio Barreto
  • 1,536
  • 3
  • 16
  • 35

1 Answers1

0

I Solved by my self

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.5/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.5/js/mdb.min.js"></script>



<video id="myVideo" class="video-fluid z-depth-1" autoplay loop  muted>
  <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4" />
</video>



</br>



<button  class="btn btn-primary"onclick="enableMute()" type="button"><i class="fa fa-volume-off" aria-hidden="true"></i>&nbsp;&nbsp;Mute sound</button>
<button class="btn btn-primary" onclick="disableMute()" type="button"><i class="fa fa-volume-up" aria-hidden="true"></i>&nbsp;&nbsp;Enable sound</button>
<button class="btn btn-primary" onclick="checkMute()" type="button">Check muted status</button><br> 
<script>
var vid = document.getElementById("myVideo");

function enableMute() { 
  vid.muted = true;
} 

function disableMute() { 
  vid.muted = false;
} 

function checkMute() { 
  alert(vid.muted);
} 
</script> 
Otávio Barreto
  • 1,536
  • 3
  • 16
  • 35