-
-
Save zst123/a942f32ce66872b3c9e9 to your computer and use it in GitHub Desktop.
Update: Add Background, make label and input detect playback speed and set accordingly
This file contains 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
javascript:!function(a){function g(a,b){for(var c in b)b.hasOwnProperty(c)&&(a.style[c]=b[c])}var b=a.querySelector("video"),c=a.createElement("input"),d=a.createElement("label"),e=a.createElement("div"),f;d.innerHTML='<span class="asdf">1x</span>',g(d,{color:"#EEE",fontSize:"11px",background:"#1b1b1b"}),c.type="range",c.max=4,c.min=.25,c.value=1,c.step=.05,g(c,{left:"4px",width:"90%",verticalAlign:"middle",webkitAppearance:"slider-horizontal",mozAppearance:"slider-horizontal"}),d.appendChild(c),g(e,{width:"50%",padding:"3px",position:"absolute",zIndex:1e3}),e.appendChild(d),(f=a.querySelector(".html5-player-chrome"))?(f.appendChild(e),g(e,{left:"30%"})):b.parentNode.insertBefore(e,b),d.querySelector(".asdf").innerHTML=b.playbackRate+"x",c.value=b.playbackRate,c.addEventListener("change",function(a){var c=a.target.value;b.playbackRate=c,d.querySelector(".asdf").innerHTML=c+"x"})}(document); |
This file contains 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
// | |
// Youtube's [HTML5 videos](http://youtube.com/html5) allow you | |
// to set playback speed to 0.25x, 0.5x, 1x, 1.5x, and 2x. | |
// But that's not fine-grained enough. | |
// Let's add a slider allowing us to go from 0.1x - 4.0x. | |
// And have it work with HTML5 videos on Youtube and Vimeo. | |
// | |
// Because you haven't lived until you've seen | |
// <http://youtu.be/5p0QtJMKt1s> in 0.3x and 3.3x. | |
// | |
// Inspired by | |
// [Leif Wickland's](http://leifw.wickland.net/2013/03/truly-variable-rate-video-playback-in.html) | |
// bookmarklet. | |
// | |
// \(^O^)/\(^O^)/\(^O^)/ | |
// | |
!function(doc) { | |
var vid = doc.querySelector('video'), | |
range = doc.createElement('input'), | |
label = doc.createElement('label'), | |
div = doc.createElement('div'), | |
parent; | |
function setStyles (node, styles) { | |
for (var prop in styles) { | |
if (styles.hasOwnProperty(prop)) { | |
node.style[prop] = styles[prop]; | |
} | |
} | |
} | |
label.innerHTML = '<span class="asdf">1x</span>'; | |
setStyles(label, { | |
color: '#EEE', | |
fontSize: '11px' | |
}); | |
range.type = 'range'; | |
range.max = 4; | |
range.min = 0.1; | |
range.value = 1; | |
range.step = 0.1; | |
setStyles(range, { | |
verticalAlign: 'middle', | |
webkitAppearance: 'slider-horizontal', | |
mozAppearance: 'slider-horizontal' | |
}); | |
label.appendChild(range); | |
setStyles(div, { | |
marginTop: '3px', | |
position: 'absolute', | |
zIndex: 1000 | |
}); | |
div.appendChild(label); | |
if (parent = doc.querySelector('.html5-player-chrome')) { | |
parent.appendChild(div); | |
setStyles(div, { left: '35%' }); | |
} | |
else { | |
vid.parentNode.insertBefore(div, vid); | |
} | |
range.addEventListener('change', function(e) { | |
var newVal = e.target.value; | |
vid.playbackRate = newVal; | |
label.querySelector('.asdf').innerHTML = newVal + 'x'; | |
}); | |
}(document); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment