Skip to content

Instantly share code, notes, and snippets.

@BrettBukowski
Created March 7, 2013 14:21
Show Gist options
  • Save BrettBukowski/5108358 to your computer and use it in GitHub Desktop.
Save BrettBukowski/5108358 to your computer and use it in GitHub Desktop.
Fine-tune the playback speed on Vimeo and Youtube's HTML5 videos
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"}),c.type="range",c.max=4,c.min=.1,c.value=1,c.step=.1,g(c,{verticalAlign:"middle",webkitAppearance:"slider-horizontal",mozAppearance:"slider-horizontal"}),d.appendChild(c),g(e,{marginTop:"3px",position:"absolute",zIndex:1e3}),e.appendChild(d),(f=a.querySelector(".html5-player-chrome"))?(f.appendChild(e),g(e,{left:"35%"})):b.parentNode.insertBefore(e,b),c.addEventListener("change",function(a){var c=a.target.value;b.playbackRate=c,d.querySelector(".asdf").innerHTML=c+"x"})}(document);
//
// 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);
@porjo
Copy link

porjo commented Nov 18, 2016

When I run this on a YouTube vid I get a blank screen with 'true' in the top left corner (Firefox 50). On Chrome, it does nothing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment