JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div class="is-video-box">
    <video src="http://alibra.ru/upload/video/Svetlana__ENG_.mp4" autoplay>
    <source type="video/mp4">
    </video> 
        <div class="ivb-progress">
            <i></i>
        </div>
</div>

SCSS

.is-video-box {
    position: relative;
    width: 500px;
    video {
        display: block;
        width: 100%;
    }
    .ivb-progress {
        display: block;
        position: relative;
        overflow: hidden;
        height: 10px;
        background: yellow;
        i {
            display: block;
            position: absolute;
            width: 0%;
            height: 100%;
            left: 0px; top: 0px;
            background: red;
        }
    }
}

JavaScript

var $videoBox = $('.is-video-box');

var _vbVideo = $('.is-video-box').find('video').eq(0)[0];
var $vbProgress = $('.ivb-progress').find('i');
var updateProgressBar = function() {
    var pr = Math.floor((100 / _vbVideo.duration) *
   _vbVideo.currentTime);
    $vbProgress.attr('style','width:'+pr+'%;');
};

_vbVideo.addEventListener('timeupdate', updateProgressBar, false);