Fine-tune the playback speed on Vimeo and Youtube's HTML5 videos

bookmarklet.js

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);

source.js

//
// 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);

FYI I found https://chrome.google.com/webstore/detail/video-speed-controller/nffaoalbilbmmfgbnbgppjihopabppdk/details?hl=en which seems to do the trick. It creeps me out to install browser extensions though. I'd much rather have a small JS bookmarklet that I mostly understand and can see isn't malicious.

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.