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()
andfalse()
- 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 usingELEMENT.onXXX
- In order for
document.getElementById
to always work, you better wait for thedocument
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
React Component Not Re-Rendering When State Changes
How to Save an Image to Localstorage and Display It on the Next Page
Button Enabled and Disabled Based on Checkbox Is Checked or Not
Angular: Toggle Active Class on Only Button the Current Clicked Button (Not Using *Ngfor)
Charts.Js Graph Not Scaling to Canvas Size
Eslint: Disable Warning - 'Defined But Never Used' for Specific Function
How to Add Scroll Event in React Component
Node.Js Check If User Already Exists
Expected Corresponding Jsx Closing Tag for Input Reactjs
How to Remove HTML Element from Dom With React
How to Get the Index from a Json Object With Value
Download Image as File in Typescript
Destroy Chart.Js Bar Graph to Redraw Other Graph in Same <Canvas>
How to Clear Location.State in React-Router on Page Reload
How to Remove Time from Datetime in SQL
Nodejs MySQL Get Correct Timestamp Format
Prevent Html5 Videos from Downloading the Files on Mobile - Videojs
Uncaught (In Promise) Typeerror: Failed to Fetch and Cors Error