HTML视频静音按钮

时间:2014-10-21 02:39:11

标签: javascript jquery html html5-video

我尝试在javascript中创建一个函数来静音html视频,并将下面的图标更改为我已下载的静音图标。需要帮忙。 javascript必须能够与jquery一起工作

2 个答案:

答案 0 :(得分:4)

演示 - http://jsfiddle.net/victor_007/6cc9mhbb/

点击按钮图标将会改变

$("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'))
});

答案 1 :(得分:2)

问题相当含糊,所以我猜这会回答你的问题。 如果您在HTML中使用视频标签

<video width="320" height="240" controls muted>
  <source src="x" type="video/x">
  <source src="x" type="x">
</video>

对于Java脚本

<video id="myVideo" width="x" height="x" controls>
....
</video>
<button onclick="enableMute()" type="button">Mute sound</button>
<script>
var vid = document.getElementById("myVideo");

function enableMute() { 
    vid.muted = true;
}
</script>

关于你的第二个问题,我不太明白,请详细说明。