使用 HTML 中的 "onkeypress" 触发视频，但只有脚本中的最后一段代码会触发视频，不确定原因

Question

我正在使用 "onkeypress" 功能触发视频，将视频分配给运行良好的键，但我只能触发脚本中的最后一个代码！

我对编程还很陌生，很难弄清楚为什么它不起作用。脚本中的两个代码单独工作都很好，但是当放在一起时，只有最后一个可以工作。

我正在尝试做这样的事情：http://patatap.com/

代码如下：

var video1 = document.getElementById("clap-test");
document.onkeypress = function(e) {
  if ((e || window.event).keyCode == "83") {
    video1.currentTime = 0, video1.play();
  }
};

var video2 = document.getElementById("chord-1");
document.onkeypress = function(e) {
  if ((e || window.event).keyCode == "65") {
    video2.currentTime = 0, video2.play();
  }
};

#backplate {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  min-width: 100%;
  z-index: -4;
}

#twinkle {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  min-width: 100%;
  z-index: -3;
  mix-blend-mode: screen
}

#skel-walk {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  min-width: 100%;
  z-index: -1;
  mix-blend-mode: screen;
}

#clap-test {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  min-width: 100%;
  z-index: 0;
  mix-blend-mode: screen;
}

#chord-1 {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  min-width: 100%;
  z-index: -2;
  mix-blend-mode: screen;
}

<!--BACKPLATE-->
<img id="backplate" src="Music_Animation/Test_Files/Back_Plate00000.png">

<!--SKEL-WALK-->
<video id="skel-walk" preload="auto" autoplay="true" loop="loop">
  <source src="Music_Animation/Test_Files/Lighting_Skeleton_Walk_TTP.mp4" type="video/mp4"> Video not supported
</video>

<!--CLAP-TEST-->
<video id="clap-test" preload="auto">
  <source src="Music_Animation/Test_Files/Lighting_FX_Clap.mp4" type="video/mp4"> Video not supported
</video>

<!--CHORD-2-->
<video id="chord-1" preload="auto">
  <source src="Music_Animation/Test_Files/Lighting_FX_Chord_2.mp4" type="video/mp4"> Video not supported
</video>

<!--TWINKLE-->
<video id="twinkle" preload="auto" autoplay="true" loop="loop">
  <source src="Music_Animation/Test_Files/Lighting_FX_Twinkle.mp4" type="video/mp4"> Video not supported
</video>

Answer 1

问题在于，在 video2 声明下方的行中，您覆盖 document.onkeypress 的行为。第二次写入 document.onkeypress = function(e) {} 会覆盖您为其编写的第一个函数。

你只需要使用 one document.onkeypress 函数，并且运行 both 里面的条件功能（如下）：

var video1 = document.getElementById("clap-test");
var video2 = document.getElementById("chord-1");
document.onkeypress = function(e) {
  if ((e || window.event).keyCode == "83") {
    video1.currentTime = 0, video1.play();
  }
  if ((e || window.event).keyCode == "65") {
    video2.currentTime = 0, video2.play();
  }
};

#backplate {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  min-width: 100%;
  z-index: -4;
}

#twinkle {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  min-width: 100%;
  z-index: -3;
  mix-blend-mode: screen
}

#skel-walk {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  min-width: 100%;
  z-index: -1;
  mix-blend-mode: screen;
}

#clap-test {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  min-width: 100%;
  z-index: 0;
  mix-blend-mode: screen;
}

#chord-1 {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  min-width: 100%;
  z-index: -2;
  mix-blend-mode: screen;
}

<!--BACKPLATE-->
<img id="backplate" src="Music_Animation/Test_Files/Back_Plate00000.png">

<!--SKEL-WALK-->
<video id="skel-walk" preload="auto" autoplay="true" loop="loop">
  <source src="Music_Animation/Test_Files/Lighting_Skeleton_Walk_TTP.mp4" type="video/mp4"> Video not supported
</video>

<!--CLAP-TEST-->
<video id="clap-test" preload="auto">
  <source src="Music_Animation/Test_Files/Lighting_FX_Clap.mp4" type="video/mp4"> Video not supported
</video>

<!--CHORD-2-->
<video id="chord-1" preload="auto">
  <source src="Music_Animation/Test_Files/Lighting_FX_Chord_2.mp4" type="video/mp4"> Video not supported
</video>

<!--TWINKLE-->
<video id="twinkle" preload="auto" autoplay="true" loop="loop">
  <source src="Music_Animation/Test_Files/Lighting_FX_Twinkle.mp4" type="video/mp4"> Video not supported
</video>

希望对您有所帮助！ :)

使用 HTML 中的 "onkeypress" 触发视频，但只有脚本中的最后一段代码会触发视频，不确定原因

Triggering videos using "onkeypress" in HTML however only last code within the script will trigger a video and unsure why

html

javascript

video

keypress