想要为全屏视频背景上的音频创建自定义静音/取消静音按钮 [英] Wanting to create a custom mute/unmute button for the audio on a full screen video background

问题描述

我目前有一个全屏背景视频，并且已与音频循环播放，我想创建一个自定义按钮，以便当访问者访问该网站时可以将音频静音/取消静音.

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> 

还有JavaScript

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?

任何帮助将非常感谢！

推荐答案

在需要的地方看起来像三个小更改 1/仅在click周围加上引号，而不是整个addEventListener参数 2/调用初始化 3/从function.vidmute

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>

这篇关于想要为全屏视频背景上的音频创建自定义静音/取消静音按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！