Onkeypress - 如何使用不同的数字来触发特定视频-Java 学习之路

创建一个交互式网页，我希望在用户按下数字键时播放视频 . 每当用户按下键“1”时，将播放某个视频，当他们按下键“2”时播放不同的视频 .

现在我只能在javascript中一次触发一个视频，我的“1”键打开第一个视频，但是当我使用“2”键添加javascript的第二个视频时，只有第二个视频有效通过按“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 回答

您将使用第二个回调覆盖事件处理程序 .

将您的代码更改为：

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(); 
  }
};

回复于 2024-05-03T07:39:22+08:00

Onkeypress - 如何使用不同的数字来触发特定视频

1 回答

相关问题