javascript - 需要视频在按键时静音/取消静音(无按钮)

Question

我正在为我玩的这个游戏制作一个介绍视频，我在视频中播放音乐，我希望人们在按下空格键时能够静音/取消静音；不知道我是否做对了，我基本上是通过从其他地方提取各种其他代码来达到这一点的。它根本不起作用，请帮忙。

请注意:这不是完整的 HTML 文件，如有需要我可以提供。它只有进度条和内容。

到目前为止，这是我的代码:

<video class="introVideo" id="introVideo" width="1920" height="1080" autoplay muted>
			<source src="video.mp4" type="video/mp4">
			</video>
			<script>
    			var myVideo = document.getElementById("introVideo");

    		function onKeyDown(event) {
            	switch (event.keyCode) {
                	case 32: //SpaceBar                    
                    	if (muted) {
                        	myVideo.muted = true();
                        	muted = false;
                    	} else {
                        	myVideo.muted = false();
                        	muted = true;
                    	}
                    	break;
            	}
      	return false;
    }
			</script>

Answer 1

• 似乎变量muted 没有被初始化。
• 不存在true() 和false()
• 您的函数未绑定(bind)到某些事件。因此，您应该将它绑定(bind)到某个元素(使用 addEventListener)，或者使用使用 ELEMENT.onXXX
的旧方法进行绑定(bind)
• 为了使 document.getElementById 始终有效，您最好等待 document ready 事件(最好与 jQuery 一起使用)或稍后，window.onload 事件。

所以上面的修改加上更简单的逻辑可以写成:

<video class="introVideo" id="introVideo" width="1920" height="1080" autoplay muted>
  <source src="video.mp4" type="video/mp4">
</video>
<script>
window.onload = function(){
  var myVideo = document.getElementById("introVideo");

  document.onkeydown = function(event) {
    switch (event.keyCode) {
      case 32: //SpaceBar
        myVideo.muted = !myVideo.muted;
      break;
    }
    return false;
  }
}
</script>