想要为全屏视频背景上的音频创建自定义静音/取消静音按钮

Posted 2023-02-22

【中文标题】想要为全屏视频背景上的音频创建自定义静音/取消静音按钮

【英文标题】：Wanting to create a custom mute/unmute button for the audio on a full screen video background

【发布时间】：2015-03-15 06:10:21

【问题描述】：

我目前有一个带有音频循环的全屏背景视频，我想制作一个自定义按钮，以便当访问者访问该网站时可以将音频静音/取消静音。

我已尝试使用此代码...

<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>

认为我可能找错树了吗？

任何帮助将非常感谢！

【问题讨论】：

尝试 mutebtn.addEventListener("click",vidmute,false); ... 引用事件，而不是整个事件

@Offbeatmammal 感谢回复，但好像还是不行，真让我费解

【参考方案1】：

看起来需要三个小改动 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>