jquery - 播放<视频>时将<音频>元素设置为50％的音量

Question

大家好，我希望您能回答这个问题:)

基本上，我的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(){

    });

Answer 1

我认为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>