我目前有一个全屏背景视频,其中有音频循环,我想制作一个自定义按钮,以便访问者访问该网站时可以将音频静音/取消静音。
我尝试过使用此代码...
<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>
和 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>
你认为我可能找错了树吗?
任何帮助将非常感谢!
最佳答案
看起来需要进行三个小更改
1/仅在 click
周围加引号,而不是整个 addEventListener 参数
2/调用初始化
3/从 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>
关于javascript - 想要为全屏视频背景上的音频创建自定义静音/取消静音按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27987336/