I currently have a full screen background video which I have looping with audio, I want to make a custom button so when visitors visit the site can mute/unmute the audio.
I have tried using this code...
<video id="bg" loop autoplay preload="auto" poster="../img/still.jpg">
<source src="vid/vidbg2.mp4" type="video/mp4" />
<source src="vid/vidbg.webm" type="video/webm" />
<source src="vid/vidbg.ogv" type="video/ogg" />
Your browser does not support this video
</video>
<div id="video_controls">
<button id="mutebtn">mute</button>
</div>
And the JavaScript
<script>
var mutebtn;
function intitializePlayer(){
//set object references
vid = document.getElementById("bg");
mutebtn = document.getElementById("mutebtn");
//add event listener
mutebtn.addEventListener("click,vidmute,false");
}
function.vidmute(){
if(vid.muted){
vid.muted = false;
mutebtn.innerHTML = "mute";
} else {
vid.muted = true;
mutebtn.innerHTML = "Unmute";
}
}
</script>
Think I might be barking up the wrong tree?
Any help would be great thanks!
looks like three small changes where needed 1/ quotes only around the click
not the whole of the addEventListener parameters 2/ call the initialize 3/ remove extra period from function.vidmute
<script>
var mutebtn;
intitializePlayer() // **don't forget to call the initialize**
function intitializePlayer(){
//set object references
vid = document.getElementById("bg");
mutebtn = document.getElementById("mutebtn");
//add event listener
mutebtn.addEventListener("click",vidmute,false); // **quotes only around the event**
}
function vidmute(){ // **there was an extra '.' between function and vidmute**
if(vid.muted){
vid.muted = false;
mutebtn.innerHTML = "mute";
} else {
vid.muted = true;
mutebtn.innerHTML = "Unmute";
}
}
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.