How to Mute an HTML5 Video Player Using Jquery

How to mute an html5 video player using jQuery

$("video").prop('muted', true); //mute

AND

$("video").prop('muted', false); //unmute

See all events here

(side note: use attr if in jQuery < 1.6)

jQuery - unmute and set volume video

There's two issues in your code.

Firstly, the played event should be play and secondly, the mute property should be muted. With those corrected it works:

$('.recommendationVideo').on('play', function() {
  $(this).prop('muted', false)
});

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

Mute htlm5 video player with jQuery after seconds

As written in the comment - one way would be setting the video to mute via a timeout after n seconds. I would prefer something like this:

// use all videos with a loop attribute
// remove the attribute and replay on end event
$('video[loop]').bind('ended', function(){
  // prop or attr depends on your jquery version
  $(this).attr('muted', true);
  this.play();
}).removeAttr('loop');

How can an html5 video be muted?

There is no API in HTML 5 to force the sound to stay off.

You can get rid of the volume controls only by removing the native controls entirely and building your own replacements.

However, that will still let people access the video object through the browser console and use the HTML 5 API to unmute it.

The only way to stop them getting the sound track would be to take it out of the media file before delivering it to the browser.

jQuery unmute HTML5 video when in viewport

There is something wrong with another part of your code, perhaps you didn't set the viewport correctly?

I tried this with the autoplay property and your posted code worked fine:

HTML:

<video autoplay loop muted height="900">
     <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
</video>

<video autoplay loop muted>
     <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
</video>

<video autoplay loop muted>
     <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
</video>

JS:

$('video:in-viewport').prop('autoplay', false);

Fiddle where you can see it working

http://jsfiddle.net/uruddhun/

Video mute/unmute with jQuery

When you're doing if( $("video").prop('muted', true) ) you're both setting the property to true and then ask if it's true.

Changing the condition to if( $("video").prop('muted') ) solves the problem - Here's an example.

Also note this will work on all videos on a page so if you have more than one player it might get confusing.

Html5 video player customize to only show play and mute

This was the correct answer if anyone else has this problem:

function(element) {
    jQuery(document).on('click', '.mute-video', function (){
        if (jQuery("video").prop('muted')) {
            jQuery("video").prop('muted', false);
            jQuery(this).addClass('unmute-video');

        } else {
            jQuery("video").prop('muted', true);
            jQuery(this).removeClass('unmute-video');
        }
    });
}

HTML5 Video Toggle Mute On Click?

You should be able to solve your problem with a simple boolean toggle.

$("video").click(function () {
    $(this).prop("muted", !$(this).prop("muted"));
});

---

Related Topics