Video-Mute

by anil001ry

HTML

<video id='vid' width="320" height="240" autoplay controls muted>
  <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<div>

  <img class="mimg" src="https://icon-library.net/images/mute-unmute-icon/mute-unmute-icon-18.jpg" id="sound" onclick="toggleMute();" />
  <!-- <img id="mute" class="mimg" src="https://icon-library.net/images/mute-unmute-icon/mute-unmute-icon-18.jpg">
<img id="unmute" class="mimg" src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Mute_Icon.svg"> -->

</div>

CSS

.mimg {
  width: 30px;
  height: 30px;
}

JavaScript

function toggleMute() {
  var video = document.getElementById("vid")
  var mute = "https://icon-library.net/images/mute-unmute-icon/mute-unmute-icon-18.jpg",
    unmute = "https://upload.wikimedia.org/wikipedia/commons/3/3f/Mute_Icon.svg";
  var imgElement = document.getElementById('sound');
  imgElement.src = (imgElement.src === mute) ? unmute : mute;
  if (video.muted) {
    video.muted = false;
    console.log("Un-Mute");

  } else {
    video.muted = true;
    console.log("Mute");
  }
}