No video sound if removing attribute muted on html element video

Question

I use the HTML video element. As source I use a .mp4 video with sound. On my video element there are a few attributes. Default I use the attribute muted so there is no sound. With some JavaScript I add or remove the attribute muted by clicking on a button. So this works, when I inspect my markup and click the button I can see how the attribute muted will be added or removed (check out my snippet below).

My problem is, that when removing it, there is no sound. If I start the video file in an video player on my laptop or open it directly in the browser, I can hear the sound. Due to many posts, it should be possible to toggle the sound with this solution. I don't know why it doesn't have sound only when I use it in my video element with adding/removing the attribute muted. Any ideas?

const $ctx = $('.video');
const $video = $ctx.find('.video__video');
const $toggleSound = $ctx.find('.video__toggle-sound');

$toggleSound.click(this.handleVideoSound.bind(this));

function handleVideoSound() {
  const attr = $video.attr('muted');

  if (typeof attr !== typeof undefined && attr !== false) {
    $video.removeAttr('muted');
  } else {
    $video.attr('muted', '');
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video">
  <video class="video__video" autoplay loop muted playsinline poster="/assets/img/video-poster.png">
    <source src="/assets/video/video.mp4" type="video/mp4">
  </video>
  <button class="video__toggle-sound">Toggle video sound</button>
</div>

you have `mutet` not `muted` in the video attributes? Just a typo problem I would guess :-) — GrahamTheDev, Sep 10 '19 at 11:06
@GrahamRitchie it was the typo just in the snippet, in my code it was `muted`. But the answer below worked! — webta.st.ic, Sep 10 '19 at 13:38

Prabhat Kumar · Accepted Answer · 2019-09-10T11:41:49.997

Replace your handleVideoSound method with the below code

function handleVideoSound() {
   const attr = $video.prop("muted");
   $video.prop("muted", !attr);
}

Hope it will help you. Below is the working code snippet.

const $ctx = $(".video");
const $video = $ctx.find(".video__video");
const $toggleSound = $ctx.find(".video__toggle-sound");
$toggleSound.click(this.handleVideoSound.bind(this));

function handleVideoSound() {
    const attr = $video.prop("muted");
    $video.prop("muted", !attr);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video">
<video class="video__video" autoplay loop muted playsinline poster="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", type="video/mp4" />
</video>
<button class="video__toggle-sound">Toggle video sound</button>
</div>

I know that prop is the newer way of attr but at the and this code made the same a guess, it removed and added my attribute `muted`. But why I have sound now when using prop is unclear for me so far. — webta.st.ic, Sep 10 '19 at 13:49
Welcome !! You can go through with this [link](https://stackoverflow.com/questions/258469/what-is-the-difference-between-attribute-and-property) to understand difference between property and attribute — Prabhat Kumar, Sep 11 '19 at 06:11

No video sound if removing attribute muted on html element video

1 Answers1