Unable to Mute HTML5 video using jQuery attr

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?

See the Attributes vs. Properties section in [jQuery's documentation for `attr()`](https://api.jquery.com/attr/). — Heretic Monkey, Mar 17 '20 at 13:31
Does this answer your question? [.prop() vs .attr()](https://stackoverflow.com/questions/5874652/prop-vs-attr) — Heretic Monkey, Mar 17 '20 at 13:32
The answers to that question explain, in detail, the differences between `prop()` and `attr()` and how they work. Your question is how `prop()` and `attr()` work I'm not sure how it couldn't answer your question. — Heretic Monkey, Mar 17 '20 at 13:56

score 0 · Answer 1 · answered Mar 17 '20 at 13:26

0

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>

answered Mar 17 '20 at 13:26

Rory McCrossan

331,213
40
305
339

OP want to have explanation about why `.props()` works and `.attr()` don't – ROOT Mar 17 '20 at 13:29
https://stackoverflow.com/q/258469/519413 & https://lucybain.com/blog/2014/attribute-vs-property/ – Rory McCrossan Mar 17 '20 at 13:30

Unable to Mute HTML5 video using jQuery attr

1 Answers1