How to Mute Video With JavaScript or Jquery

How to Mute Video with JavaScript or jQuery?

try this Yearmaz

As Enavar's answer says just put

$("#dbx").prop('muted', true);

line in $(document).ready(function(){});

.advertisement {    position: absolute;    z-index: 99;    height: 100%;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>  window.setTimeout("document.getElementById('closead').style.display='none';", 6000);</script><div class="advertisement" id="closead">  <a target="_blank" rel="nofollow" href="http://www.sitename.com">    <video id="dbx" style="object-fit: fill;" autoplay="" width="100%" height="100%">      <source src="w3schools.com/tags/mov_bbb.mp4" type="video/mp4">    </video>  </a>  <button onfocus="this.blur();" class="closecss" style="position:absolute;bottom: 2px;right: 0px;z-index: 999;background: #32b02b;color: #fff;padding: 13px;border-radius: 4px;font-weight: bold;cursor: pointer;border: 1px solid #2b9825;box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), 0 1px 0 0 #299023, 0 2px 3px 0 rgba(0, 0, 0, 0.25);" onclick="document.getElementById('closead').style.display='none';MuteVideo()">SKIP AD</button></div>
<script> function MuteVideo(){ $("#dbx").prop('muted', true); }</script>

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 toggle video mute for single video

You have to find the relevant video element against the mute button.
You can use .next on the currentTarget.
Also, id of DOM elements should be unique, so I have changed the mute-video button id to class -

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

$(".mute-video").click((e) => {
const video = $(e.currentTarget).next('.my_video');
const muted = video.prop('muted');
video.prop('muted', !muted);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
<button class="mute-video">Toggle Mute</button>

<video controls class="my_video">
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
</video>
</div>
<div class="wrapper">
<button class="mute-video">Toggle Mute</button>

<video controls class="my_video">
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
</video>
</div>
<div class="wrapper">
<button class="mute-video">Toggle Mute</button>

<video controls class="my_video">
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
</video>
</div>

JS/jQuery: Detect when a video's muted property is changed

You can use volumechange event and check prop.

const video = $('video');

video.on('volumechange', (e) => {
// check video.prop('muted');
});

How do I toggle video mute in an iframe ( youtube ) with a button?

It's work for me, Thanks!

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;

function onYouTubeIframeAPIReady() {
player = new YT.Player('wp-custom-header-video', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}

function onPlayerReady() {
console.log("hey Im ready");
//do whatever you want here. Like, player.playVideo();
}

function onPlayerStateChange() {
console.log("my state changed");
}

document.getElementById("mute").addEventListener('click', function(event) {
console.log(player);

if (player.isMuted()) {
player.unMute();
} else {
player.mute();
}
});
#mute {
cursor:pointer;
padding: 10px 20px;
background:#000;
color: #fff;
border-radius: 4px;
display: inline-block;
}
<p>
<button id="mute">Mute/UnMute</button>
</p>
<iframe id="wp-custom-header-video" name="video-wp" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="600" height="400" src="https://www.youtube.com/embed/4vGzJ3nTzp4?autoplay=1&controls=0&disablekb=1&fs=0&iv_load_policy=3&loop=1&modestbranding=1&playsinline=1&rel=0&showinfo=0&enablejsapi=1&widgetid=1;origin=https%3A%2F%2Fepistolariodelamemoria.cl&" data-gtm-yt-inspected-1_19="true" data-initial-width="2000" data-initial-height="1200"></iframe>

Need video to mute/unmute on keypress (No Button)

  • It seems that the variable muted is not initialised.
  • There is no such thing as true() and false()
  • Your function does not bound to some event. So you should either bind it to some element (with addEventListener) or to bind with the old approach of using ELEMENT.onXXX
  • In order for document.getElementById to always work, you better wait for the document ready event (better to use with jQuery) or the bit later, window.onload event.

So the modifications above, plus a bit simpler logic can be written as:

<video class="introVideo" id="introVideo" width="1920" height="1080" autoplay muted>
<source src="video.mp4" type="video/mp4">
</video>
<script>
window.onload = function(){
var myVideo = document.getElementById("introVideo");

document.onkeydown = function(event) {
switch (event.keyCode) {
case 32: //SpaceBar
myVideo.muted = !myVideo.muted;
break;
}
return false;
}
}
</script>


Related Topics



Leave a reply



Submit