Mousewhell and keyboard control video HTML5

Add mousewhell & keyboard control to html5 video player.

当前为 2024-10-15 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name            Mousewhell and keyboard control video HTML5 
// @name:en         Mousewhell and keyboard control video HTML5 
// @namespace       http://tampermonkey.net/
// @version         0.1
// @description     Add mousewhell & keyboard control to html5 video player.
// @description:en  Add mousewhell & keyboard control to html5 video player.
// @author          HoangNam
// @match           *://*/*
// @grant           none
// @license         MIT2
// @downloadURL
// @updateURL
// ==/UserScript==



// Thời gian tua tới/lùi (5 giây)
const seekTime = 2;

function handleWheel(event, seekTime) {
  // Kiểm tra xem sự kiện có phải là sự kiện wheel hay không
  if (event.type === 'wheel') {
    // Lấy phần tử video hoặc audio đang được trỏ chuột
    const isOverMedia = document.querySelector('video, audio');
    // Kiểm tra xem con trỏ chuột có trên video hoặc audio hay không
    // if (! isOverMedia || ! isOverMedia.contains(event.target))
    if (isOverMedia && isOverMedia.contains(event.target)) {
      // Kiểm tra xem phần tử media có thể tua được hay không (có currentTime và duration property) trước khi thực hiện các thao tác tua tới/tua lùi
      if (isOverMedia.currentTime !== undefined && isOverMedia.duration !== undefined) {
        // Tua tới/lùi 5 giây
        if (event.deltaY > 0) {
          // Tua tới
          isOverMedia.currentTime = Math.max(0, isOverMedia.currentTime - seekTime);
        } else {
          // Tua lùi
          isOverMedia.currentTime = Math.min(isOverMedia.duration, isOverMedia.currentTime + seekTime);
        }

        // Tắt hành động mặc định của chuột
        event.preventDefault();
      }

    }
  }
}

// Thêm event listener cho sự kiện wheel với chế độ passive
document.addEventListener('wheel', (event) => handleWheel(event, seekTime), { passive: false, capture: true });

    window.addEventListener('load', function() {
        document.addEventListener('keydown', function(e) {
            console.log(e.keyCode);
            var player = document.getElementsByTagName('video')[0];
            if (!player) return;

            switch (e.keyCode) {
                case 37:
                    // Arrow Left lùi 5s
                    player.currentTime -= e.ctrlKey ? 30 : 5;
                    break;
                case 39:
                    // Arrow Right tiến 5s
                    player.currentTime += e.ctrlKey? 30 : 5;
                    break;
                case 32:
                    // Space tạm dừng
                    player.paused ? player.play() : player.pause();
                    break;
            }
        });
    });