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

【问题标题】：MDB Video player force unmute audioMDB 视频播放器强制取消静音
【发布时间】：2019-07-11 15:09:03
【问题描述】：

我正在使用 mdbootstrap.com 播放视频，但在文档中他们说我需要在视频标签中添加静音，因为谷歌浏览器正在阻止带有声音集 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>

【问题讨论】：

标签： javascript html audio html5-video mdbootstrap

【解决方案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>

【讨论】：