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

您只需要错过一部分，就可以将keyDown函数链接到用户操作。您可以这样做：

myVideo.addEventListener('keydown', onKeyDown);

您可以在“ ”标签关闭之前添加此代码。这是addEventListener => https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

的文档

编辑：默认情况下，您可能还需要关注视频标签，否则它将无法正常工作。但是，如果您希望整个页面互动以静音/取消静音

document.body.addEventListener('keydown', onKeyDown);

Answer 2

似乎变量muted尚未初始化。
没有true()和false()
您的功能未绑定到某些事件。因此，您应该将其绑定到某个元素（使用addEventListener）或使用旧的使用方法ELEMENT.onXXX
为了使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>

需要视频使按键静音/取消静音（无按钮）

2 个答案: