Comment déclencher des vidéos à jouer quand un utilisateur appuie sur des touches spécifiques sur le clavier - Utilisation de HTML potentiellement à la recherche onkeypress

Je suis très nouveau à la programmation (c'est ma première tentative) et je souhaite faire un site web où vous pouvez déclenchez des vidéos à l'aide de votre clavier (chaque touche sera affectée à une vidéo différente). J'espère faire quelque chose comme ça - http://patatap.com/Comment déclencher des vidéos à jouer quand un utilisateur appuie sur des touches spécifiques sur le clavier - Utilisation de HTML potentiellement à la recherche onkeypress

Je suis parvenu à superposer mes vidéos et pour eux jouer haut et en boucle lors de l'ouverture de la page mais je ne peux pas trouver un moyen de faire jouer une vidéo quand une touche est pressé! Quel serait le moyen le meilleur et le plus simple de le faire - J'ai regardé "onkeypress" mais je ne suis pas sûr de savoir comment l'utiliser!

Je vais publier mon code ci-dessous!

<!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>

Source

2017-08-07 ThomTTP

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

Voici comment obtenir une vidéo à lire/mettre en pause en utilisant la barre d'espace.

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

Vous pouvez affecter le code clé à déclencher par une autre clé. Et manipulez le code à l'intérieur du si vous voulez faire ce que vous voulez sur une touche.

Source

2017-08-07 17:53:46 KingSneaky

Merci de revenir si vite, mal à essayer !! sous quelle section ce code devrait-il aller? Dans la partie script? – ThomTTP

@ThomTTP Oui dans les balises de script. Vous voudrez peut-être lire un peu sur JavaScript et vous assurer que vous faites référence à vos éléments HTML en utilisant leur attribut id – KingSneaky

Bravo pour les heads up! Je l'ai mis dans la section de script et placé le bon id pour la vidéo entre parenthèses ("video_id") et gardé {video.play()} mais il ne répond pas, a eu quelques ajustements mais je ne peux pas l'obtenir travail. Dois-je placer un code entre la section pour que cela fonctionne? – ThomTTP

Comment déclencher des vidéos à jouer quand un utilisateur appuie sur des touches spécifiques sur le clavier - Utilisation de HTML potentiellement à la recherche onkeypress

Répondre

Questions connexes