无法使用 jQuery attr 静音 HTML5 视频

Question

Trying to mute video using attr but it doesn't work.

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)
}

However, when I try prop() instead of attr() it works. Can someone explain in detail the reason behind it?

Answer 1

You need to toggle the muted property of the video element, not the attribute . Try this:

 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>