Replace the user-unfriendly Twitter video player with the browser's native video player.
This allows you to:
| // ==UserScript== | |
| // @name Twitter native video player | |
| // @namespace https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a | |
| // @match https://twitter.com/* | |
| // @match https://mobile.twitter.com/* | |
| // @grant none | |
| // @version 1.0.4 | |
| // @author yukulele | |
| // @homepage https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a | |
| // @description Replace the user-unfriendly Twitter video player with the browser's native video player. This allows you to: seek backward/forward with the left/right keyboard keys, change the volume with the up/down keyboard keys, switch to full screen with double-click of f key, access the video's contextual menu, change the playback speed with the <kbd>+</kbd>, <kbd>-</kbd> and <kbd>0</kbd> keys or via the contextual menu, share the playback speed between videos. | |
| // @downloadURL https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a/raw/twitter-native-video-player.user.js | |
| // @updateURL https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a/raw/twitter-native-video-player.user.js | |
| // @supportURL https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a#comments | |
| // @inject-into auto | |
| // ==/UserScript== | |
| function nativePlayer(video) { | |
| video.playbackRate = localStorage.playbackRate || 1 | |
| video.addEventListener('ratechange', () => localStorage.playbackRate = video.playbackRate) | |
| video.addEventListener('mouseenter', () => video.controls = true) | |
| video.addEventListener('mouseleave', () => video.controls = false) | |
| video.addEventListener('keydown', e => keyboard(e.key, video)) | |
| video.style.zIndex = 1 | |
| video.focus() | |
| } | |
| function toggleFullscreen(video) { | |
| if (document.fullscreenElement) return document.exitFullscreen() | |
| video.requestFullscreen() | |
| } | |
| function keyboard(key, video) { | |
| if (key === 'f') return toggleFullscreen(video) | |
| if (key === '0') return video.playbackRate = 1 | |
| if (key === '+') return video.playbackRate += 0.05 | |
| if (key === '-') return video.playbackRate -= 0.05 | |
| } | |
| new MutationObserver(mutationsList => { | |
| for (var mutation of mutationsList) { | |
| if (mutation.type !== 'childList') continue | |
| for (const node of mutation.addedNodes) { | |
| if (!(node instanceof HTMLElement)) continue | |
| for (const video of node.querySelectorAll('video')) nativePlayer(video) | |
| } | |
| } | |
| }).observe(document.documentElement, { | |
| childList: true, | |
| subtree: true, | |
| }) |