Я делаю вступительное видео для этой игры, в которую я играю, и у меня есть музыка, играющая в видео, и я хочу, чтобы люди могли отключать/включать звук при нажатии пробела; Не знаю, правильно ли я поступаю, я, по сути, достиг этой точки, объединив различные другие фрагменты кода из других мест. Никак не получается, помогите.
Обратите внимание: это не весь 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>
myVideo.muted = true();
неверно, должно быть myVideo.muted = true;
@AnuragSrivastava Я изменил это, но это все еще не работает :/
Вы просто пропустите одну часть, свяжите свою функцию 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
Как сказано в предыдущем комментарии, возможно, у вас есть другая ошибка javascript в вашем коде.
Советы по отладке, используйте devtools, вы можете щелкнуть правой кнопкой мыши на странице и проверить или F12, а затем перейти на вкладку «консоль», которая отобразит ваши ошибки.
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>
Это отлично работает для локального файла mp4, но у меня возникают проблемы с загрузкой этого mp4 в клиент, который я использую. Можно ли как-нибудь адаптировать это для вставки на YouTube, используя идентификатор iframe вместо видео?
<iframe class = "myVideo" id = "myVideo" type = "text/html" width = "100%" height = "100%" src = "https://www.youtube.com/embed/2x18zIJb-YY?autoplay=1&mute=1&%3Fvq=hd1080&;controls=0;&showinfo=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>
извините, не знаю, как работает форматирование
Youtube управляется другим API. Пожалуйста, обратитесь к официальные документы. Как только ваше видео заработает и вы не знаете, как связать события и/или управлять player
, вы можете задать другой вопрос, и сообщество попытается вам помочь.
Только что понял, что вы даже не можете посмотреть видео, потому что это локальный источник, это мое видео здесь, если вы можете сделать его с помощью вставки «youtube iframe», я более чем доволен этим. Пока я все еще могу установить события-указатели: нет. Источник на YouTube: youtube.com/watch?v=2x18zIJb-YY