I'm trying to add a mute/unmute button to a fullscreen background video. I used a piece of javascript which is widely published including on stackoverflow (HTML Video mute button). Unfortunately, this defaults to mute. No matter what I try I can't get to default to unmute. Clearly I'm a js newbie.
<video class="video" autoplay loop>
<source src="video.mp4" type="video/mp4">
</video>
<button class="mute-video unmute-video"></button>
$("video").prop('muted', true);
$(".mute-video").click(function () {
if ($("video").prop('muted')) {
$("video").prop('muted', false);
$(this).addClass('unmute-video'); // changing icon for button
} else {
$("video").prop('muted', true);
$(this).removeClass('unmute-video'); // changing icon for button
}
console.log($("video").prop('muted'))
});
Maybe you need to wait for the video to be ready in order to access its properties. Try using oncanplay event:
$("video").oncanplay = function() {
$("video").prop('muted', true);
};
$(".mute-video").click(function () {
if ($("video").prop('muted')) {
$("video").prop('muted', false);
$(this).addClass('unmute-video'); // changing icon for button
} else {
$("video").prop('muted', true);
$(this).removeClass('unmute-video'); // changing icon for button
}
console.log($("video").prop('muted'))
});
Related
OBJECTIVE: Trying to autoplay when mouse is over the video itself.
HTML:
<video id = "litVideo" src="lt.mp4" onmouseover="over(this)" onmouseout="out(this)" controls>
JAVASCRIPT:
function over(element) {
alert("mouseover");
element.append(autoplay)
**also tried element.add(autoplay)**
}
function out(element) {
alert("mouseout");
element.remove(autoplay);
}
Problem: Mouseover is alerting. However, autoplay is not working. Please help.
use play() and pause() function
const video = document.getElementById("video")
video.onmouseover = function(){
video.play()
}
video.onmouseout = function(){
video.pause()
}
<video src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" controls id="video"></video>
However if you want to use your approach then use
element.setAttribute("autoplay")
How can I change a property of a source element / video object.
In my case I want to change the property autostart from false to true;
html:
<video id="modul_1_video" controls preload="none">
<source id="modul_1_source" src="../video.mp4" type="video/mp4" autostart="false">
</video>
js: (I do not want to use jquery)
modul_1.onclick = function() {
console.log("click works");
document.querySelector("#modul_1_video > source").autostart = true;
}
but it does not seem to work.
why don't you just use the play function?
modul_1.onclick = function() {
console.log("click works");
var video = document.getElementById("#modul_1_video");
video.play();
}
set "autostart" attribute to true on click
document.getElementById('modul_1_source').setAttribute('autostart','true');
modul_1.onclick = function() {
console.log("click works");
document.getElementById("#modul_1_video").setAttribute("autostart","true");
}
I am trying to toggle an html video fullscreen from a mobile app.
Basically, when I press a button, it should send data to the database via web service. Depending on the data given, the video should toggle between fullscreen and not fullscreen.
Now my problem is that, html video doesn't allow this one because for security reason as it says in the error. I have tried simulating a button click using trigger() but it still says the same error wherein it is not allowed because of security reasons.
$("button").click(function () {
launchFullScreen(document.getElementsByTagName('video')[0]);
})
var count = 0;
setInterval(function(){
count++;
console.log(count);
if(count == 5) {
$("button").click();
}
}, 1000);
// Find the right method, call on correct element
function launchFullScreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
<input type="text" id="test">
<button>Fullscreen</button>
I'am trying to mute the audio of a video on click, but for some reason it won't mute..
html:
<video src="background/background1.mp4" autoplay="autoplay" loop="loop" id="background"> </video>
<img src="button/audio_on.png" id="audio"/>
jquery/javascript solutions I have tried:
$('#audio').click(function() {
if( $("#background").prop('muted', true) ) {
$("#background").prop('muted', false);
alert('music paused');
} else {
$("#background").prop('muted', true);
alert('music playing');
}
});
Note: It does alert 'music paused' but never alerts 'music playing'
second method I've tried (note: it does change the img source):
//change music icon
$("#audio").on('dblclick', function(){
$("#audio").attr("src","button/audio_on");
document.getElementById("#background").volume = 1;
});
$("#audio").on('click', function(){
$("#audio").attr("src","button/audio_off");
document.getElementById("#background").volume = 0;
});
Does anyone know why it won't mute the audio of my video?
Try using the following code to toggle the audio of your video:
$("#audio").click( function (){
$("#background").prop('muted', !$("#background").prop('muted'));
});
When I add onclick="playPause()" to just one video it works great. I click the video and it'll play or pause just like I want it to. If I have more than one video, even if the videos have different IDs (for example: video id="v1" and video id="v2") whenever I click on one video it'll always play one specific video. Using this script on multiple videos seems to only allow play/pause toggling on one video. Here's the html and script I'm using:
<video id="v1" width="480px" height="267px" controls onclick="playPause()">
<source src="S12E13%203%20Acts%20of%20God.mp4" type="video/mp4">
</video>
<script>
var myVideo = document.getElementById("v1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause(); }
</script>
<video id="v2" width="480px" height="267px" controls onclick="playPause()">
<source src="S12E13%203%20Acts%20of%20God.mp4" type="video/mp4">
</video>
<script>
var myVideo = document.getElementById("v2");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause(); }
</script>
<video id="v3" width="480px" height="267px" controls onclick="playPause()">
<source src="S12E13%203%20Acts%20of%20God.mp4" type="video/mp4">
</video>
<script>
var myVideo = document.getElementById("v3");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause(); }
</script>
BTW: not a big deal, but I've noticed the original Play button doesn't work anymore when I use this script. Is there a way to fix that?
You can pass the clicked element as an argument to the function like onclick="playPause(this)", then you just have a single definition:
function playPause (video) {
if (video.paused)
video.play();
else
video.pause();
}
Or alternatively you can find all videos and bind event listeners to them iteratively using document.getElementsByTagName() or document.querySelectorAll():
document.querySelectorAll('video').forEach((video) => {
video.addEventListener('click', function (event) {
if (this.paused)
this.play();
else
this.pause();
});
});