如何在 iframe 中切换视频静音？

Question

拜托了……

我有一个正在运行的脚本可以使针对 iframe 的视频静音，但它使用两个按钮，我想使用一个切换按钮。我想要的是一个按钮，它可以切换针对 iframe 的静音状态。

这个例子没有使用 iframe，因为我不知道如何在 jsfiddle 中使用它，但是按钮可以从 onclick="disableMute() 到 onclick="glu.disableMute() 让它工作

Example 1 Demo

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 为目标。

Example 2 Demo

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 事情苦苦挣扎，所以请耐心等待。我在这里尝试了其他类似的问题，但我无法让它们工作，或者不是我所需要的。提前致谢。

Answer 1

在第一个示例中，您可以通过以下代码使用相同的按钮静音/取消静音：

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;">

以上代码将用作静音开关。

如果您使用的是<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();
    }
}