当用户按下键盘上的特定按键时，如何触发视频播放 - 使用HTML可能会查看onkeypress

我对编程非常陌生（这是我的第一次尝试），我希望创建一个网站，您可以使用键盘触发视频（每个键将分配给不同的视频）。我希望能做出这样的事情 - http://patatap.com/当用户按下键盘上的特定按键时，如何触发视频播放 - 使用HTML可能会查看onkeypress

我已经设法分层我的视频和他们顶部播放和循环时打开页面但是我找不到一种方法让一个视频播放时，一个关键是按下！这样做的最好和最简单的方法是什么 - 我看过“onkeypress”，但我不知道如何使用它！

我会在下面发布我的代码！

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 

     <style type="text/css"> 

      #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; 
      } 
     </style> 


     <script> 

     </script> 

    </head> 
    <body> 


     <!--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" autoplay="true" loop="loop"> 
      <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" autoplay="true" loop="loop"> 
      <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> 



    </body> 
</html>

来源

2017-08-07 ThomTTP

https://stackoverflow.com/q/12201488/901048 – Blazemonger

这里是如何让视频播放/暂停使用空格键。

var video = document.getElementById('video_id'); 
document.onkeypress = function(e){ 
    if((e || window.event).keyCode === 32){ 
     video.paused ? video.play() : video.pause(); 
    } 
};

您可以分配的键码，通过不同的按键来触发。并操纵内部的代码，如果你想在按键上做你想做的事情。

来源

2017-08-07 17:53:46 KingSneaky

感谢回来这么快，生病给这一去！该代码需要在哪一部分下去？在脚本部分？ – ThomTTP

@ThomTTP是在脚本标记中。您可能希望阅读JavaScript的一些信息，并确保您使用其id属性 – KingSneaky

引用您的HTML元素欢呼！我将它放在脚本部分，并将视频的正确ID放在括号内（“video_id”）并保留{video.play（）}，但它没有响应，只做了一些调整，但我无法得到它加工。我是否必须在代码的部分之间放置一些代码以使其工作？ – ThomTTP

当用户按下键盘上的特定按键时，如何触发视频播放 - 使用HTML可能会查看onkeypress

回答

相关问题