Question

漂亮的请...

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

这个例子没有使用iframe，因为我无法弄清楚如何在jsfiddle中使用它，但是按钮可以从 onclick =＆＃34; disableMute（）to 的onclick =＆＃34; 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为目标。

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

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

＆＃13;

less

＆＃13;

xcode-select --install

＆＃13;

上面的代码将用作切换静音。

如果您使用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"; } }：

请考虑以下iframe：

<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中切换视频静音？

1 个答案: