HTML5 Video Speed Control Bookmarklet

Any Level

Code:

javascript:
var v=document.querySelector('video');
v.playbackRate=prompt("Video playback rate:", v.playbackRate);
false

Source:Chrome Webstore/HTML5 Speed Control/User Reviews/webEater [Modified Nov 23, 2016]

One Click

Code:

javascript:(function(){    
          function speed(speed){    
            var theVideo = document.getElementsByTagName("video")[0];  
            theVideo.playbackRate=speed;  
          }
          speed(2.0);
        })()

Source: Reddit/The Playback Speed

Button

Code:

javascript:'use strict';
var d = document;
var vid = d.querySelector('video');
var speed = vid ? vid.playbackRate = vid.playbackRate + .25 : ' No video';
var h, s, b, c;
var css = `
    @-webkit-keyframes fade-in-out {
      7%, 93% {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
      }
      0%, 100% {
        opacity: 0;
        -webkit-transform: translateY(-10px);
                transform: translateY(-10px);
      }
    }
    @keyframes fade-in-out {
      7%, 93% {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
      }
      0%, 100% {
        opacity: 0;
        -webkit-transform: translateY(-10px);
                transform: translateY(-10px);
      }
    }
    #speed-control {
      height: 40px;
      background: #000;
      padding: 0 10px;
      border-radius: 4px;
      line-height: 40px;
      color: white;
      font-size: 20px;
      text-align: center;
      font-weight: 100;
      font-family: 'Roboto', Arial;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
      opacity: 0;
      position: fixed;
      top: 5px;
      right: 10px;
      z-index: 99999999999;
      pointer-events: none;
    }
    .speed-control-animation {
      -webkit-animation: fade-in-out 2s linear;
              animation: fade-in-out 2s linear;
    }
`;
console.log('current speed:', speed);
s = d.querySelector('#speed-control-style');
b = d.querySelector('body');
if (!s) {
  s = d.createElement('style');
  s.id = 'speed-control-style';
  s.textContent = css;
  b.appendChild(s);
}

c = d.querySelector('#speed-control');
if (!c) {
  c = d.createElement('div');
  c.id = 'speed-control';
  b.appendChild(c);
}
c.textContent = speed;
c.classList.remove('speed-control-animation');
c.offsetWidth;
c.classList.add('speed-control-animation');

Source: [Wilman] https://codepen.io/wilman/full/ZWdEPX / https://codepen.io/wilman/pen/ZWdEPX

More: http://yuptude.com/