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

Question

我对编程很陌生（这是我的第一次尝试），我希望制作一个网站，您可以在其中使用键盘触发视频（每个键将分配给不同的视频）。我希望做这样的东西 - http://patatap.com/

我已经设法将我的视频分层，并在打开页面时让它们播放和循环播放，但是我找不到在按下某个键时播放视频的方法！最好和最简单的方法是什么 - 我看过 "onkeypress" 但是我不确定如何使用它！

我将post我的代码写在下面！

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

Answer 1

以下是如何使用 space 栏将视频上传至 play/pause。

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

您可以指定由不同的键触发的键码。并操纵 if 内的代码，以在按键时执行您想要的操作。

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

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

html

keyboard

video

keypress