Onkeypress - как использовать разные номера для запуска определенных видео - PullRequest
Новая
       41

Onkeypress - как использовать разные номера для запуска определенных видео

0 голосов
/ 10 декабря 2018

Создание интерактивной веб-страницы, на которой я хочу воспроизводить видео, когда пользователь нажимает цифровые клавиши.Каждый раз, когда пользователь нажимает клавишу «1», воспроизводится определенное видео, а при нажатии клавиши «2» воспроизводится другое видео.

В настоящее время я могу одновременно запускать только одно видео в javascript, моя клавиша «1» включает первое видео, но когда я добавляю второе видео с помощью javascript, используя клавишу «2»нажатием «2» работает только второе видео, «1» больше не активирует первое видео.

вот мой HTML и Java 

HTML
<!DOCTYPE html>
<html>
<body>
    <video id="vid" src="video/IMG_8873.mp4" type="video/mp4">
  </video>

  <video id="ocean" src="video/OCEAN_8873.mp4" type="video/mp4">
  </video>
</body>
  <script type="text/javascript" src="index.js"></script>
</html>


JAVASCRIPT

var video = document.getElementById('vid');

document.onkeypress = function(e) {
  console.log(e)
  if (e.key === "1" ) {
   { video.paused ? video.play() : video.pause(); }
  }
};



var video = document.getElementById('ocean');

document.onkeypress = function(f) {
  console.log(f)
  if (f.key === "2" ) {
   { video.paused ? video.play() : video.pause(); }
  }
};

1 Ответ

0 голосов
/ 10 декабря 2018

Вы переопределяете свой обработчик событий вторым обратным вызовом.

Измените свой код следующим образом: 

document.onkeypress = function(e) {
  console.log(e)
  if (e.key === "1" ) {
   var video = document.getElementById('vid');
   video.paused ? video.play() : video.pause();
  } else if (e.key === "2" ) {
   var video = document.getElementById('ocean');
   video.paused ? video.play() : video.pause(); 
  }
};
...