How to Unmute Html5 Video With a Muted Prop

HTML & JavaScript - can't unmute html5 video

Most browsers block any audio that is played by a web page and is not related to user interaction (see https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide). Maybe that's your problem?

Video Mute and unmute button

Maybe you need to wait for the video to be ready in order to access its properties. Try using oncanplay event:

$("video").oncanplay = function() {
    $("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'))
});

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/

Javascript mute/unmute video using image

You are not setting the muted property to true when you are trying to mute the video.

if (!video.muted) {
    document.getElementById('muteicon').src = "Images/muteicon.png";
    video.muted = true; // you need to assign this value to true
} else { ... }

---

Related Topics