漂亮请...
我有一个正在运行的脚本可以使针对 iframe 的视频静音,但它使用两个按钮,我想使用一个切换按钮。我想要的是一个按钮,用于切换针对 iframe 的静音状态。
这个例子没有使用 iframe,因为我不知道如何在 jsfiddle 中使用它,但是按钮可以从 onclick="disableMute() 到 onclick="glu.disableMute() 让它工作
Javascript
var vid = document.getElementById("myVideo");
function enableMute() {
vid.muted = true;
}
function disableMute() {
vid.muted = false;
}
html
<input type="image" src="http://kar2nz.weebly.com/uploads/8/9/2/8/89280494/volumeoff_orig.png" onclick="enableMute()" style="padding-top: 3px;">
<input type="image" src="http://kar2nz.weebly.com/uploads/8/9/2/8/89280494/volumeon_orig.png" onclick="disableMute()" style="padding-top: 3px;">
下一个示例使用 JQuery 来通过一个按钮切换静音,但我不知道如何让它定位到 iframe。
Javascript
//<![CDATA[
$(window).load(function(){
$("video").prop('muted', true);
$(".mute-video").click(function () {
if ($("video").prop('muted')) {
$("video").prop('muted', false);
$(this).addClass('unmute-video');
} else {
$("video").prop('muted', true);
$(this).removeClass('unmute-video');
}
console.log($("video").prop('muted'))
});
});//]]>
CSS
body {
background-color:#000000
}
.mute-video {
background:url(http://kar2nz.weebly.com/uploads/8/9/2/8/89280494/volumeon_orig.png) no-repeat center;
border:0;
width:50px;
height:50px;
}
.unmute-video {
background:url(http://kar2nz.weebly.com/uploads/8/9/2/8/89280494/volumeoff_orig.png) no-repeat center;
}
html
<video autoplay controls height="352" width="640">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video><br>
<button class="mute-video"></button>
我希望这一切都有意义。我正在为这个 javascript 问题苦苦挣扎,所以请耐心等待。我在这里尝试过其他类似的问题,但我无法让它们工作,或者不完全是我需要的。提前致谢。
最佳答案
在第一个示例中,您可以通过以下代码使用相同的按钮静音/取消静音:
var vid = document.getElementById("myVideo");
function muteUnmute() {
vid.muted = !vid.muted;
if(!vid.muted){ document.getElementById("muteBtn").src="http://kar2nz.weebly.com/uploads/8/9/2/8/89280494/volumeon_orig.png";
}else{
document.getElementById("muteBtn").src="http://kar2nz.weebly.com/uploads/8/9/2/8/89280494/volumeoff_orig.png";
}
}
<video id="myVideo" autoplay controls height="352" width="640">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"></video>
<br>
<input type="image" id="muteBtn" src="http://kar2nz.weebly.com/uploads/8/9/2/8/89280494/volumeon_orig.png" onclick="muteUnmute()" style="padding-top: 3px;">
以上代码将用作静音开关。
If you are using
<iframe>
:
例如考虑下面的 iframe :
<iframe id="myVideo" src="your video url" width="560" height="315" frameborder="0" allowfullscreen></iframe>
您可以在单击按钮时使用以下功能在静音/取消静音之间切换视频音量:
function muteUnmute(){
var myVideo = iframe.getElementById('myVideo');
if(myVideo.isMuted()){
myVideo.unMute();
}else{
myVideo.mute();
}
}
关于javascript - 如何在 iframe 中切换视频静音?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39475096/