在播放 <video> 时将 <audio> 元素设置为 50% 音量
Setting <audio> element to 50% volume when <video> is playing
大家好我希望你能回答这个问题:)
基本上我的 index.html 中有几个 html 5 个视频自动播放背景音频。
我想要的是在播放视频标签时将背景音频降低到 50%。如果我可以使用 class 来定位所有视频元素,那就太好了 :) 如果用户退出视频,它会将音量调回 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(){
});
我认为 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>
大家好我希望你能回答这个问题:)
基本上我的 index.html 中有几个 html 5 个视频自动播放背景音频。
我想要的是在播放视频标签时将背景音频降低到 50%。如果我可以使用 class 来定位所有视频元素,那就太好了 :) 如果用户退出视频,它会将音量调回 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(){
});
我认为 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>