Chrome谷歌浏览器禁止空格下翻页但可以暂停和播放视频脚本js

前提

播放某些网站的视频的时候(不能网页全屏的视频) 会产生空格下翻页但是不能暂停播放视频,解决方案:下载油猴或者脚本猫把这代码填进去

TypeScript 复制代码
(function() {
    'use strict';

    document.body.onkeydown = function(event) {
        var e = window.event || event;

        // 检查是否按下空格键
        if (e.code === 'Space') {
            // 获取当前焦点元素
            var activeElement = document.activeElement;

            // 检查焦点是否在输入框或文本区域
            if (activeElement.tagName !== 'INPUT' &&
                activeElement.tagName !== 'TEXTAREA') {
                // 阻止空格键的默认行为(下翻页)
                e.preventDefault();

                // 查找视频元素并切换播放状态
                var video = document.querySelector('video');
                if (video) {
                    if (video.paused) {
                        video.play(); // 播放视频
                    } else {
                        video.pause(); // 暂停视频
                    }
                }
            }
        }
    };
})();
相关推荐
正一品程序员21 小时前
vue项目引入GoogleMap API进行网格区域圈选
前端·javascript·vue.js
Tongfront21 小时前
前端通用submit方法
开发语言·前端·javascript·react
一 乐21 小时前
农产品销售|农产品供销|基于SprinBoot+vue的农产品供销系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·spring boot
sunshine6411 天前
JS实现悬浮可拖拽vue组件封装
开发语言·前端·javascript
by__csdn1 天前
Vue 2 与 Vue 3:深度解析与对比
前端·javascript·vue.js·typescript·vue·css3·html5
0***h9421 天前
TypeScript 与后端开发Node.js
javascript·typescript·node.js
❆VE❆1 天前
【技术分享】前端跨窗口/标签页面通信:掌握以下几种方法,提升用户体验(附带常用场景以及典例)
前端·javascript·性能优化·vue·跨标签通信
小二·1 天前
DevUI 和 MateChat:2025 年,我们是怎么把前端开发变轻松的
开发语言·javascript·vue.js
●VON1 天前
基于 Electron 模拟鸿蒙设备硬件信息查询的可行性探索
javascript·学习·electron·openharmony
chéng ௹1 天前
前端转编码(encodeURIComponent)以及解码(decodeURIComponent)
开发语言·前端·javascript