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 Video Player强制取消静音

1 个答案: