Требуется видео для отключения / включения звука при нажатии клавиш (без кнопки)

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()
• Ваша функция не связана с каким-либо событием. Поэтому вам следует либо связать его с каким-либо элементом (с 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>

Answer 2

Вы просто пропускаете одну часть, связываете свою функцию keyDown с действием пользователя. Вы можете сделать это так:

myVideo.addEventListener('keydown', onKeyDown);

Вы можете добавить этот код непосредственно перед закрытием тега "". Вот документация для addEventListener => https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Редактировать: Возможно, вам также понадобится сфокусировать тег видео по умолчанию, иначе он не будет работать. Но если вы хотите, чтобы вся ваша страница взаимодействовала, чтобы отключить / включить звук, сделайте

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