HTML5 Player controls Bookmarklet

player.js

(function() {
  var video = document.querySelector('video');
  if (video) {
    var wrapper = document.createElement('div');
    wrapper.style.position = 'fixed';
    wrapper.style.top = '0';
    wrapper.style.left = '0';
    wrapper.style.zIndex = '1000';
    var buttons = [
      {
        title: '<<5',
        handler: () => video.currentTime -= 5
      },
      {
        title: '<<10',
        handler: () => video.currentTime -= 10
      },
      {
        title: '5>>',
        handler: () => video.currentTime += 5
      },
      {
        title: '10>>',
        handler: () => video.currentTime += 10
      },
      {
        title: '1x',
        handler: () => video.playbackRate = 1
      },
      {
        title: '1.25x',
        handler: () => video.playbackRate = 1.25
      },
      {
        title: '1.5x',
        handler: () => video.playbackRate = 1.5
      },
      {
        title: '1.75x',
        handler: () => video.playbackRate = 1.75
      },
      {
        title: '2x',
        handler: () => video.playbackRate = 2
      }

    ];
    buttons.forEach(button => {
      var el = document.createElement('button');
      el.addEventListener('click', button.handler);
      el.innerText = button.title;
      wrapper.appendChild(el);
    })
  }
  var el = document.documentElement.appendChild(wrapper)
})();