Youtube player control keys FIX.

Fix player controls Space, Left, Right, Up, Down to behave consistently after page load or clicking individual controls. Not focusing the mute button anymore.

当前为 2018-02-18 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Youtube player control keys FIX.
  3. // @namespace https://github.com/GregHerendi
  4. // @version 1.0
  5. // @description Fix player controls Space, Left, Right, Up, Down to behave consistently after page load or clicking individual controls. Not focusing the mute button anymore.
  6. // @author Greg Herendi
  7. // @license MIT
  8. // @match https://www.youtube.com/watch*
  9. // @match http://www.youtube.com/watch*
  10. // @match https://youtube.com/watch*
  11. // @match http://youtube.com/watch*
  12. // @grant none
  13. // @require http://code.jquery.com/jquery-latest.js
  14. // ==/UserScript==
  15. /*
  16. Youtube player controls will work consistently after page load and after clicking controls:
  17. - Space (play/pause), F (fullscreen), M (mute), Left (jump backwards), Right (jump forwards), Up (volume up), Down (volume down)
  18.  
  19. Click outside movie frame to get standard page controls: Space (page down), Up, Down, Left, Right (scroll)
  20.  
  21. Fixes the following awkward behaviour of Youtube player controls after clicking them (making the individual control focused):
  22. - after clicking the mute button Space toggles mute instead of pausing
  23. - after clicking the volume slider Left-Right will change the volume instead of stepping the video.
  24. - after clicking subtitle button Space will toggle subtitles
  25. - after clicking settings button Space will toggle settings
  26. */
  27.  
  28. (function() {
  29. 'use strict';
  30.  
  31. // Movie player frame (element) is focused after loading the page to get movie player keyboard controls.
  32. document.getElementById('movie_player').focus();
  33. function onFocus(event) {
  34. // Called when a sub-element of the player gets focus (by clicking or TAB).
  35. var playerElem= document.getElementById('movie_player');
  36. // avoid infinite recursion of playerElem.focus() -> onFocus()
  37. if (event.target == playerElem) return;
  38. //console.log(event.type + ' ->', event.target);
  39. // Focus the player to have proper keyboard controls
  40. playerElem.focus();
  41. }
  42.  
  43. // '.ytp-chrome-bottom' has all the controls that should delegate focus to the player instead of getting focused themselves
  44. $('#movie_player .ytp-chrome-bottom').on('focusin', onFocus);
  45. // If there are other controls outside '.ytp-chrome-bottom', use the following instead:
  46. //$('#movie_player').on('focusin', onFocus);
  47. })();