播放<video>时,将<audio>元素设置为50%音量

时间:2017-03-17 14:23:47

标签: jquery html audio video volume

嘿大家,我希望你能回答这个问题:)

基本上我的index.html中有几个html 5视频,背景音频自动播放。

我想要发生的是在播放视频标签时将背景音频降低到50%。如果可以使用一个类来定位所有视频元素,那将会很好:)如果用户退出视频,它会将音量调回100%

我目前正在为我的项目使用jQuery,所以jQuery中的解决方案会很棒!

目前我认为这将与此相符......

// to reduce volume to 50%. im not sure what the code would be to reduce volume ? maybe 0.5 or something ?

    $("video").click(function(){
        $(audio).mute();
    });

// turn volume back to 100% once exit button is clicked

    $(".exit").click(function(){

    });

1 个答案:

答案 0 :(得分:0)

我认为audio.volume = 0.5应该提供所需的结果(将音量降低到50%)和audio.volume = 1.0以将音量设置回100%。有关详细信息,请参阅MDN Docs

请参阅下面的代码段(单击按钮并查看音量控制栏):

var $audio = $('#audio-test').get(0);

$('#set-volume-50').click(function(){
  $audio.volume = 0.5;
});

$('#set-volume-100').click(function(){
  $audio.volume = 1.0;
});
button {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="audio-test" controls="controls">
  Your browser does not support the <code>audio</code> element.
  <source src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" type="audio/ogg">
</audio>
  <button id="set-volume-50">Set volume to 50%</button>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <button id="set-volume-100">Set volume to 100%</button>