在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) {}會覆蓋您爲其編寫的第一個函數。

您只需要使用一個document.onkeypress功能，並運行一個功能的內部都條件語句（如下）：

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>

希望這有助於！ :)