[英]Video Mute and unmute button
I'm trying to add a mute/unmute button to a fullscreen background video.我正在尝试向全屏背景视频添加静音/取消静音按钮。 I used a piece of javascript which is widely published including on stackoverflow ( HTML Video mute button ).我使用了一块 javascript,它在 stackoverflow 上广泛发布( HTML 视频静音按钮)。 Unfortunately, this defaults to mute.不幸的是,这默认为静音。 No matter what I try I can't get to default to unmute.无论我尝试什么,我都无法默认取消静音。 Clearly I'm a js newbie.显然我是一个 js 新手。
<video class="video" autoplay loop>
<source src="video.mp4" type="video/mp4">
</video>
<button class="mute-video unmute-video"></button>
$("video").prop('muted', true);
$(".mute-video").click(function () {
if ($("video").prop('muted')) {
$("video").prop('muted', false);
$(this).addClass('unmute-video'); // changing icon for button
} else {
$("video").prop('muted', true);
$(this).removeClass('unmute-video'); // changing icon for button
}
console.log($("video").prop('muted'))
});
Maybe you need to wait for the video to be ready in order to access its properties.也许您需要等待视频准备好才能访问其属性。 Try using oncanplay event:尝试使用 oncanplay 事件:
$("video").oncanplay = function() {
$("video").prop('muted', true);
};
$(".mute-video").click(function () {
if ($("video").prop('muted')) {
$("video").prop('muted', false);
$(this).addClass('unmute-video'); // changing icon for button
} else {
$("video").prop('muted', true);
$(this).removeClass('unmute-video'); // changing icon for button
}
console.log($("video").prop('muted'))
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.