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

Я делаю вступительное видео для этой игры, в которую я играю, и у меня есть музыка, играющая в видео, и я хочу, чтобы люди могли отключать/включать звук при нажатии пробела; Не знаю, правильно ли я поступаю, я, по сути, достиг этой точки, объединив различные другие фрагменты кода из других мест. Никак не получается, помогите.

Обратите внимание: это не весь 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>

Только что понял, что вы даже не можете посмотреть видео, потому что это локальный источник, это мое видео здесь, если вы можете сделать его с помощью вставки «youtube iframe», я более чем доволен этим. Пока я все еще могу установить события-указатели: нет. Источник на YouTube: youtube.com/watch?v=2x18zIJb-YY

Infamoose 22.05.2019 09:41
myVideo.muted = true(); неверно, должно быть myVideo.muted = true;
Anurag Srivastava 22.05.2019 09:49

@AnuragSrivastava Я изменил это, но это все еще не работает :/

Infamoose 22.05.2019 10:11
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
791
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

myVideo.addEventListener('keydown', onKeyDown);

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

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

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

Хм, я думал, что уже попробовал это. Поэтому я удалил конечные скобки из «myVideo.muted = true() и myVideo.muted = false()», как предложил человек выше, и добавил «document.body.addEventListener('keydown', onKeyDown); " прямо перед </script>, но он все еще не работает: S

Infamoose 22.05.2019 10:10

Как сказано в предыдущем комментарии, возможно, у вас есть другая ошибка javascript в вашем коде.

Rumesh 22.05.2019 10:32

Советы по отладке, используйте devtools, вы можете щелкнуть правой кнопкой мыши на странице и проверить или F12, а затем перейти на вкладку «консоль», которая отобразит ваши ошибки.

Rumesh 22.05.2019 10:33
Ответ принят как подходящий
  • Кажется, что переменная muted не инициализирована.
  • Нет такого понятия, как true() и false()
  • Ваша функция не привязана к какому-то событию. Таким образом, вы должны либо привязать его к какому-то элементу (с помощью addEventListener), либо связать со старым подходом с использованием ELEMENT.onXXX
  • Чтобы document.getElementById работало всегда, вам лучше дождаться события documentready (лучше использовать с 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>

Это отлично работает для локального файла mp4, но у меня возникают проблемы с загрузкой этого mp4 в клиент, который я использую. Можно ли как-нибудь адаптировать это для вставки на YouTube, используя идентификатор iframe вместо видео?

Infamoose 22.05.2019 14:46
<iframe class = "myVideo" id = "myVideo" type = "text/html" width = "100%" height = "100%" src = "https://www.youtube.com/embed/2x18zIJb-YY?autoplay=1&mu‌​te=1&%3Fvq=hd1080&;c‌​ontrols=0;&amp;showi‌​nfo=0" frameborder = "0" allow = "autoplay" allowfullscreen = "";></iframe> </video> <script> window.onload = function(){ var myVideo = document.getElementById("myVideo"); document.onkeydown = function(event) { switch (event.keyCode) { case 32: //SpaceBar myVideo.muted = !myVideo.muted; break; } return false; } } </script> извините, не знаю, как работает форматирование
Infamoose 22.05.2019 14:46

Youtube управляется другим API. Пожалуйста, обратитесь к официальные документы. Как только ваше видео заработает и вы не знаете, как связать события и/или управлять player, вы можете задать другой вопрос, и сообщество попытается вам помочь.

JohnnyJS 23.05.2019 11:58

Другие вопросы по теме