How do I trigger videos to play when a user presses specific keys on the keyboard - Using HTML potentially looking at onkeypress

I am very new to programming (this is my first attempt) and I am wishing to make a website where you can trigger videos using your keyboard (each key would be assigned to a different video). I am hoping to make something like this - http://patatap.com/

I have managed to layer my videos and for them top play and loop when opening the page however I can't find a way of getting a video to play when a key is pressed! What would be the best and simplest way of doing this - I have looked at "onkeypress" however I am not sure how to use it!

I'll post my code so far below!

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

Solution

Here is how to get a video to play/pause using the space bar.

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

You can assign the keycode to be triggered by a different key. And manipulate the code inside of the if to do what you would like on a key press.