JSFiddle - React, Tailwind, and code Playground

HTML

<style id="ugh"></style>
<video width="400" controls>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video.
</video>

CSS

audio::-webkit-media-controls-timeline,
video::-webkit-media-controls-timeline {
  width: 300px;
  height: 5px;
  border-radius: 3px;
}

JavaScript

var run = 0;
var ss = document.getElementById("ugh");
document.getElementsByTagName("video")[0].addEventListener("timeupdate", function(){
    run = this.currentTime / this.duration * 100;
    ss.textContent = 'video::-webkit-media-controls-timeline { background-image: linear-gradient(to right, red 0%, red ' + run + '%, yellow ' + run + '%, yellow 100%);'
});