video标签的键盘控制之js处理

基于自己的这篇总结而拓展的
首先是html部分:

<div class="bo">
	<video src="视频目录" id="videoButton" width="500px"></video>
</div>

再是js:

const videoButton = document.getElementById('videoButton');
let i = 0;
videoButton.onclick = function(){
    if(videoButton.paused){
        i++;
        videoButton.play();
    }else{
        i++;
        videoButton.pause();
    }
}

window.onkeydown = function(){
    let e = event.keyCode;

    switch(e){
        case 32:i++;if(i % 2 == 0){
                videoButton.pause();
            } else{
                videoButton.play();
            };break;
        case 37: videoButton.currentTime = videoButton.currentTime - 5;break;//后退
        case 39: videoButton.currentTime = videoButton.currentTime + 5;break;//前进
    }
    console.log(e);
}

这里用到了window.onkeydown还有就是event.keyCode这个方法。window.onkeydown是判断键盘是否被按下；event.keyCode则是判断按下的键盘键的ASCII码(可以打印console.log()到控制台上查看)。

比如:
13:回车键
32:空格键
37:上下左右键的左键
39:上下左右键的右键

用全局变量的i来控制是否是被本身的鼠标键还是键盘的空格键按下，都会触发播放暂停，而且不冲突

用播放捕获的id.currentTime重新赋值即可。
这里提供一个参考的网页:https://www.twle.cn/l/yufei/javascriptref/javascript-ref-prop-video-currenttime.html