Mousewheel and keyboard control video HTML5

Add mousewheel & keyboard control to html5 video player.

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

  1. // ==UserScript==
  2. // @name Mousewheel and keyboard control video HTML5
  3. // @name:en Mousewheel and keyboard control video HTML5
  4. // @namespace http://tampermonkey.net/
  5. // @version 0.2
  6. // @description Add mousewheel & keyboard control to html5 video player.
  7. // @description:en Add mousewheel & keyboard control to html5 video player.
  8. // @author HoangNam
  9. // @match *://*/*
  10. // @grant none
  11. // @license MIT2
  12. // @downloadURL
  13. // @updateURL
  14. // ==/UserScript==
  15.  
  16.  
  17.  
  18. // Thời gian tua tới/lùi (5 giây)
  19. const seekTime = 2;
  20.  
  21. function handleWheel(event, seekTime) {
  22. // Kiểm tra xem sự kiện có phải là sự kiện wheel hay không
  23. if (event.type === 'wheel') {
  24. // Lấy phần tử video hoặc audio đang được trỏ chuột
  25. const isOverMedia = document.querySelector('video, audio');
  26. // Kiểm tra xem có phải ứng dụng Facebook không
  27. //const isFacebookApp = window.location.hostname.includes('facebook.com');
  28. // Kiểm tra xem có phải ứng dụng dailymotion không
  29. // const isYoutubeApp = window.location.hostname.includes('youtube.com');
  30. // Kiểm tra xem con trỏ chuột có trên video hoặc audio hay không
  31. // if ((!isOverMedia || !isOverMedia.contains(event.target)) && !isFacebookApp && !isYoutubeApp)
  32. // Tua tới/lùi 5 giây
  33. if (event.deltaY > 0) {
  34. // Tua tới
  35. isOverMedia.currentTime = Math.max(0, isOverMedia.currentTime - seekTime);
  36. } else {
  37. // Tua lùi
  38. isOverMedia.currentTime = Math.min(isOverMedia.duration, isOverMedia.currentTime + seekTime);
  39. }
  40.  
  41. if (isOverMedia && isOverMedia.contains(event.target))
  42. {
  43.  
  44. // Tắt hành động mặc định của chuột
  45. event.preventDefault();
  46.  
  47.  
  48. }
  49. }
  50. }
  51.  
  52. // Thêm event listener cho sự kiện wheel với chế độ passive
  53. document.addEventListener('wheel', (event) => handleWheel(event, seekTime), { passive: false, capture: true });
  54.  
  55. window.addEventListener('load', function() {
  56. document.addEventListener('keydown', function(e) {
  57. console.log(e.keyCode);
  58. var player = document.getElementsByTagName('video')[0];
  59. if (!player) return;
  60.  
  61. switch (e.keyCode) {
  62. case 37:
  63. // Arrow Left lùi 5s
  64. player.currentTime -= e.ctrlKey ? 30 : 5;
  65. break;
  66. case 39:
  67. // Arrow Right tiến 5s
  68. player.currentTime += e.ctrlKey? 30 : 5;
  69. break;
  70. case 32:
  71. // Space tạm dừng
  72. player.paused ? player.play() : player.pause();
  73. break;
  74. }
  75. });
  76. });