无法使用jQuery属性将HTML5视频静音

Question

尝试使用attr将视频静音，但不起作用。

HTML

<video autoplay muted class='preview-video'>
<source src='file.mp4' type='video/mp4'>
</video>

jQuery

function volumeToggle(button) {
var muted = $(".preview-video").attr("muted");
$(".preview-video").attr("muted", !muted)
}

然而，当我尝试prop()而不是attr()时，它是有效的。有人能详细解释一下背后的原因吗？

Answer 1

您需要切换video元素的muted属性，而不是特性。试试这个：

let $vid = $('.preview-video');
$('button').on('click', function() {
$vid.prop('muted', (i, m) => !m);
});

video {
width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Toggle Mute</button>
<video autoplay muted class='preview-video'>
<source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>