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'));
});
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")
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'))
});
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 have designed a video question using Html and i have removed controls for video using Jquery, so i need to have onclick functionality like when we click on the video it should be played and if am clicking again it should be paused .
Below your html code
<video id="video" width="1180" height="664" poster="put here your poster url" preload="auto">
<source src="put here your video url" type="video/mp4">
</video>
Below jquery code
var video = document.getElementById("video");
video.addEventListener("click", function(event) {
if (video.paused == true) {
video.play();
}
else{
video.pause();
}
});
You can play or pause a vide like this. This should be able to toggle:
$(document).ready(function(){
$('YOUR_VIDEO_ID_OR_CLASS').click(function(){
$(this).get(0).paused ? $(this).get(0).play() : $(this).get(0).pause();
});
});
An easy way could be like this:
$(function() {
var video = $('video')[0];
$('button').click(function() {
if( video.paused ) {
video.play();
}
else {
video.pause();
}
});
});
Fiddle Example
You can change 'button' to another element as trigger for the play/pause.
You can also change it to the video it self, if you want just to click on the video to play and pause it.
This is what you need:
<script type="text/javascript">
function vidplay() {
var video = document.getElementById("Video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
}
else
{
video.pause();
button.textContent = ">";
}
}
</script>
I have many audio elements on a single page and I want to play just one element at a time. That is if one audio element is playing and I click on play on another element, the previous audio element should pause.
I found a jQuery code from another question to do this but that uses an image as play/pause controls. I'm using the inbuilt controls='controls' attribute for the audio element instead. Is it possible to use jQuery to control the play/pause feature for the audio element in my case?
Here is my HTML code
<div>
<p class="song"><h3><strong>#1 Intro - The Oath</strong></h3><p>
<audio class="playback" src=http://geo-samples.beatport.com/lofi/5005876.LOFI.mp3 controls='controls' preload="none">
<I>Your browser does not support the audio element.</I>
</audio>
</div>
<div>
<p class="song"><h3><strong>#2 A State Of Trance Year Mix 2013</strong></h3></p>
<audio class="playback" src=http://geo-samples.beatport.com/lofi/5005933.LOFI.mp3 controls='controls' preload="none">
<I>Your browser does not support the audio element.</I>
</audio>
</div>
Here is the jQuery code
$(document).ready(function() {
var curPlaying;
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio')[0];
if(song.paused){
song.play();
if(curPlaying) $("audio", "#"+curPlaying)[0].pause();
} else { song.pause(); }
curPlaying = $(this).parent()[0].id;
});
});
});
The jQuery code doesn't seem to be working for me.
$(function(){
$("audio").on("play", function() {
$("audio").not(this).each(function(index, audio) {
audio.pause();
});
});
});
See sample at JSFiddle
Vanilla JS solution
Here's a solution that doesn't require jQuery.
function onlyPlayOneIn(container) {
container.addEventListener("play", function(event) {
audio_elements = container.getElementsByTagName("audio")
for(i=0; i < audio_elements.length; i++) {
audio_element = audio_elements[i];
if (audio_element !== event.target) {
audio_element.pause();
}
}
}, true);
}
document.addEventListener("DOMContentLoaded", function() {
onlyPlayOneIn(document.body);
});
Some things to note:
Because this listens for events on a parent element, not on the audio elements themselves, they can be added or removed after the page is loaded and it will still work.
It watches for the play event in the capture phase because play events don't bubble.
More media events are described here on MDN.
Listening for "DOMContentLoaded" should work for most browers.
Little Modification to LostInComputer's Answer
In Your HTML Write:
<audio controls onplay="pauseOthers(this);" >
<source src="SourcePath">
</audio>
In Js Write:
function pauseOthers(ele) {
$("audio").not(ele).each(function (index, audio) {
audio.pause();
});
}
Assuming that your syntax for stopping and pausing tracks is correct (I don't know anything about the audio element), you should be able to do something like this:
$(".playback").click(function(e) {
// pause all other tracks
$('.audio').each(function () {
var song = this;
if (!song.paused) { song.pause(); }
});
// play the audio associated with this element
this.play();
});
<script>
function controlplay(e) {
document.querySelectorAll('.playback').forEach(item => { if(item.id != e.target.id) item.pause(); });
}
</script>
<script>
document.querySelectorAll('.').forEach(item => { item.addEventListener("play", event => { controlplay(event) })});
</script>
Angular:
<audio (play)="audioPlay($event)" controls preload="none">
<source [src]="url" type="audio/mpeg">
</audio>
audioPlay(e) {
let eAudio = this.domService.getDocument.getElementsByTagName('audio')
if (eAudio && eAudio.length > 0) {
for (var i = 0; i < eAudio.length; i++) {
if(e.target !== eAudio[i]){
eAudio[i].pause();
}
}
}
}
<script>
var nowplaying = null;
// Pause and reset playing audio before starting new selection
function pauseRunningAudio(id) {
if ( nowplaying != null && nowplaying != id) {
var x = document.getElementById(nowplaying);
x.pause();
x.load();
}
nowplaying = id;
}
</script>
<!-- id and function value must be the same -->
<audio controls onplay="pauseRunningAudio('song1')" id="song1">
<source src="Bohemian Rhapsody.mp3" type="audio/mpeg">
</audio>
<audio controls onplay="pauseRunningAudio('song2')" id="song2">
<source src="November Rain.mp3" type="audio/mpeg">
</audio>
<audio controls onplay="pauseRunningAudio('song3')" id="song3">
<source src="Smoke on the Water.mp3" type="audio/mpeg">
</audio>