MDB 视频播放器强制取消静音

Question

我正在使用 mdbootstrap.com 播放视频，但在文档中他们说我需要在视频标签中添加静音，因为 Google Chrome 正在阻止带有声音集的自动播放视频 https://mdbootstrap.com/plugins/jquery/video/

问题是：如何强制启用自动播放音频？

<!-- 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>

Answer 1

我自己解决的

<!-- 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>

MDB 视频播放器强制取消静音

MDB Video player force unmute audio

javascript

html

audio

html5-video

mdbootstrap