Last active
February 16, 2022 14:41
-
-
Save cornzz/6d17b2e496a4db9c59be59db692c2598 to your computer and use it in GitHub Desktop.
Script which enables YouTube-like control of the video playback rate.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let dTimeout = null | |
function keydownHandler(e) { | |
if (e.key !== '>' && e.key !== '<') { | |
return | |
} | |
let video = document.querySelector('video') | |
if (e.key === '>') video.playbackRate += 0.5 | |
if (e.key === '<' && video.playbackRate > 0) video.playbackRate -= 0.5 | |
let d = document.getElementById('playbackRate') | |
d.innerHTML = `${String(video.playbackRate)}x` | |
d.classList.add('active') | |
clearTimeout(dTimeout) | |
dTimeout = setTimeout(() => d.classList.remove('active'), 500) | |
} | |
function init() { | |
let video = document.querySelector('video') | |
if (!video) { | |
return | |
} | |
console.log('loaded playbackRate.js...') | |
var style = document.createElement('style') | |
style.type = 'text/css' | |
style.innerHTML = ` | |
#playbackRate { | |
height: 50px; | |
width: 50px; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
z-index: 9999; | |
border-radius: 5px; | |
background-color: rgba(0,0,0,0.65); | |
color: #fff; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
pointer-events: none; | |
opacity: 0; | |
transition: all, 0.5s ease; | |
font-family: Arial, sans-serif; | |
font-size: 15px; | |
} | |
#playbackRate.active { | |
opacity: 1 !important; | |
transition: all 0.05s ease !important | |
} | |
` | |
document.getElementsByTagName('head')[0].appendChild(style) | |
let d = document.createElement('div') | |
d.id = 'playbackRate' | |
video.parentNode.appendChild(d) | |
document.addEventListener('keydown', keydownHandler) | |
} | |
const observer = new MutationObserver(function() { | |
let videos = document.getElementsByTagName('video') | |
if (videos.length > 0) { | |
this.disconnect() | |
init() | |
} | |
}) | |
if (!/.*(\/|\.)youtube\..*/.test(window.location.toString())) { | |
observer.observe(document, { childList: true, subtree: true }) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment