Search code examples
htmlgoogle-chromevideo

HTML5 Video muted but still playing


Title pretty much says it all. I have a video which automatically starts playing when arriving on the page.

In the HTML code I have put muted="muted". And here comes the weird part. When looking at the controls it clearly is muted, but the music is still playing and can be heard. Even when I looked at the HTML5 Video example on W3Schools it plays the music while muted.

Is there any way, trough jQuery for example to bypass this? I have a jQuery line in it which stick the muted to the video but that has no effect.

Here is the HTML code is use:

<video id="video" width="640px" height="350px" autoplay="autoplay" loop="loop" controls="controls" muted="muted">
            <source src="intouchables.f4v" type="video/mp4">
            Your browser does not support the video tag.
        </video>

Hope you can help me out. The jQuery line is as following:

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


Solution

  • I'm not entirely sure as to why the muted attribute is malfunctioning when defined within the video tag. However, this is what you can do :

    Firstly, remove the muted="muted" attribute from the video tag. Keep it simply as :

    <video id="video" width="640px" height="350px" autoplay="autoplay" loop="loop" controls="controls">
        <source src="intouchables.f4v" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    

    Now, define a function that on loading of the page, mutes the video.

    window.onload = function () {
        var element = document.getElementById('video');
        element.muted = "muted";
    }
    

    I have verified this, and it works.