JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<video></video>
<contenedor>
  <label class="time"></label>
  <progress class="progress"></progress>
  <button id="rew" class="material-icons">fast_rewind</button>
  <button id="stop" class="material-icons">stop</button>
  <button id="play" class="material-icons">play_arrow</button>
  <button id="forw" class="material-icons">fast_forward</button>
  <button id="volume" class="material-icons">volume_up</button>
  <input id="add" type="file">
  <label id="add" for="add" class="material-icons">library_add</label>
</contenedor>

CSS

* {
  margin: 0;
  padding: 0;
}

video {
  position: relative;
  display: block;
  top: 50px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 300px;
  background: #000;
  z-index: -2;
}

contenedor {
  position: relative;
  display: block;
  top: 50px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 300px;
  height: 35px;
  background: #333;
  border-radius: 2px;
}

.progress {
  display: block;
  background: #999;
  border: none;
  width: 300px;
  height: 5px;
  z-index: 1000;
}

button {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 16.6%;
  height: 30px;
  border: none;
  background: #333;
  color: #cdcdcd;
  border-radius: 2px;
}

button:hover,
#add:hover {
  color: #fff;
  cursor: pointer;
}

#add {
  border: none;
  border-bottom: 3px solid #333;
  background: #333;
  color: #cdcdcd;
}

.time {
  position: absolute;
  display: none;
  left: 0;
  right: 0;
  top: -20px;
  width: 25px;
  font-size: 10px;
  font-family: helvetica;
  background: #444;
  color: #fff;
  padding: 2px;
  border-radius: 2px;
}

.time::after {
  content: '';
  position: absolute;
  display: block;
  background: #444;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 10px;
  height: 10px;
  margin-top: 8px;
  margin-left: 9px;
  z-index: -1;
  transform: rotate(45deg);
}

input[type="file"] {
  display: none;
}

JavaScript

function $(obj) {
  return document.querySelector(obj);
}
if (!localStorage.getItem('v')) {
  localStorage.setItem('v', 1);
}

$('video').onpause = function() {
  $('#play').innerHTML = 'play_arrow';
}
$('video').onplay = function() {
  $('#play').innerHTML = 'pause';
}
$('video').onended = function() {
  $('#play').innerHTML = 'repeat';
}
$('#play').onclick = function() {
  if ($('video').paused) {
    $('video').play();
  } else {
    $('video').pause();
  }
}
$('#stop').onclick = function() {
  $('video').currentTime = 0;
  $('video').pause();
}
$('#rew').onclick = function() {
  $('video').currentTime += -10;
}
$('#forw').onclick = function() {
  $('video').currentTime += 10;
}
$('#volume').onclick = function() {
  if ($('video').muted) {
    volumeState();
    $('video').muted = false;
  } else {
    $('video').muted = true;
    $('#volume').innerHTML = 'volume_off';
  }
}
$('video').onvolumechange = function() {
  localStorage.setItem('v', $('video').volume);
  if (!$('video').muted) {
    volumeState()
  } else {
    $('#volume').innerHTML = 'volume_off';
  }
}

function volumeState() {
  var Value = $('video').volume;
  if (Value > 0.5) {
    $('#volume').innerHTML = 'volume_up';
  } else if (Value > 0) {
    $('#volume').innerHTML = 'volume_down';
  } else {
    $('#volume').innerHTML = 'volume_mute';
  }
}
$('#add').onchange = function() {
  var reader = new FileReader();
  var file = $('#add').files[0];
  if (file) {
    reader.readAsDataURL(file);
    $('video').currentTime = 0;
    $('video').pause();
  }
  reader.onload = function(e) {
    $('video').crossOrigin = "Anonymous";
    $('video').src = reader.result;
  }
}
$('video').volume = localStorage.getItem('v');
$('video').oncanplay = function() {
  $('.time').innerHTML = Clock(this.currentTime);
}
$('video').ontimeupdate = function() {
  $('.time').style.display = 'block';
  $('.progress').value = this.currentTime * 1 / this.duration;
  $('.time').innerHTML = Clock(this.currentTime);
 ...