[英]Javascript mute/unmute video using image
由于某种原因,它无法正常工作。我在做什么错? 我希望能够使用图像使视频静音和取消静音,而该图像正在改变是否将视频静音。
function mute() { var video = document.getElementById("bgvid"); if (!video.muted) { document.getElementById('muteicon').src = "Images/muteicon.png"; video.muted; } else { document.getElementById('muteicon').src = "Images/soundicon.png"; video.muted == false; } }
video#bgvid { margin-top: 30px; margin-bottom: 60px; width: 1280px; height: 720px; background-size: cover; } video { display: block; }
<video autoplay loop id="bgvid"> <source src="newyork.mp4" type="video/mp4"> </video> <br><br> <img alt="mute icon" src="Images/soundicon.png" id="muteicon" onclick="mute()"> <script> </script>
您必须使用assign( =
)运算符,而不是equals( ==
)运算符:
function mute() {
var video = document.getElementById("bgvid");
if (!video.muted) {
document.getElementById('muteicon').src = "Images/muteicon.png";
// video.muted <- not assigned to true
video.muted = true;
} else {
document.getElementById('muteicon').src = "Images/soundicon.png";
// video.muted == false <- wrong use of equality operator
video.muted = false;
}
}
而且,不能仅通过按如下方式调用API来告诉API将属性设置为true
:
video.muted
您必须将属性分配给一个值:
video.muted = true
当您尝试使视频静音时,您没有将muted
属性设置为true
。
if (!video.muted) {
document.getElementById('muteicon').src = "Images/muteicon.png";
video.muted = true; // you need to assign this value to true
} else { ... }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.