MDB Video player принудительно включает звук - PullRequest
Новая
       21

MDB Video player принудительно включает звук

0 голосов
/ 11 июля 2019

Я использую 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>

1 Ответ

1 голос
/ 11 июля 2019

Я Решил сам 

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