JSFiddle - React, Tailwind, and code Playground

HTML

This recipe enables youtube-like keyboard and mouse control of HTML5 video and audio. Click on the control panel or the image to gain control over a video or audio. Click to toggle play/pause; double click to toggle fullscreen (fullscreen is disabled in Jsfiddle though). Press space to toggle play/pause. Press left/right keys to go backward/forward 5 seconds. Press up/dn to change volume. Press number keys for a quick jump. Press f to toggle fullscreen.<br><br>

Video example:<br>
<video loop controls="controls">
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" />
</video>
<br><br>
Audio example:<br>
<audio loop controls="controls">
  <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg" />
</audio>

JavaScript

/* 
 * This recipe enables youtube-like keyboard and mouse control of HTML5 video and audio. 
 * Click on the control panel or the image to gain control over a video or audio. Click to
 * toggle play/pause; double play to toggle fullscreen. Pressing space to toggle
 * play/pause. Pressing left/right keys to go backward/forward 5 seconds. Pressing 
 * up/dn to change volume. Pressing the number keys for a quick jump. Pressing f to toggle
 * fullscreen. 
 *
 * This program is free software; you can redistribute it
 * and/or modify it under the terms of the GNU General
 * Public License as published by the Free Software
 * Foundation; either version 3 of the License, or (at your
 * option) any later version. Available at
 * https://www.gnu.org/licenses/gpl.txt
 *
 * Copyright 2016 Ling-San Meng (f95942117@gmail.com)
 * Version 20160804
 */

// Toggle between play & pause for a video or audio element
function Html5AVCtrlToggleFC(element) {
	if (document.webkitFullscreenElement !== null &&
		document.webkitFullscreenElement.tagName.toLowerCase() == 'video') {
		document.webkitFullscreenElement.webkitExitFullscreen();
	} else {
		element.webkitRequestFullscreen();
	}
}

// Toggle between play & pause for a video or audio element
function Html5AVCtrlTogglePlay(element) {
  if (element.paused) {
    element.play();
  } else {
    element.pause();
  }
}

window.addEventListener('load', function() {
  // Capture the audio/video element by changing the controls
  var videoElement = document.getElementsByTagName('video');
  var audioElement = document.getElementsByTagName('audio');
  for (var i = 0; i < videoElement.length + audioElement.length; i++) {
    var element = (i >= videoElement.length) ? audioElement[i - videoElement.length] : videoElement[i];
    element.onplay = function() {
      Html5AVCtrlElement = this;
    }
    element.onpause = function() {
      Html5AVCtrlElement = this;
    }
    element.onseeking = function() {
      Html5AVCtrlElement = this;
    }
 ...