JSFiddle - React, Tailwind, and code Playground

by Ketan Patel

HTML

<video id="vid" width="500" height="280" autoplay="true">
    <source src="https://54.88.20.251/~straightenup/app/video/Full%20Length%20Video-ENYOUTH%20(convert-video-online.com).mp4" type="video/mp4">
        <source src="https://54.88.20.251/~straightenup/app/video/Full%20Length%20Video-ENYOUTH%20(convert-video-online.com).webm" type="video/webm">
            <source src="https://54.88.20.251/~straightenup/app/video/Full%20Length%20Video-ENYOUTH%20(convert-video-online.com).ogg" type="video/ogg">
</video>
<br />
<canvas id="canvas" width="500" height="16"></canvas>
<br>
<button id="play">Play</button><button id="pause">Pause</button>

JavaScript

var ctx = canvas.getContext('2d');

canvas.onclick = function (e) {
    var vl = vid.duration,
        w = canvas.width,
        x = e.clientX - 5;

    vid.currentTime = x / w * vl;
}
loop();

function loop() {

    var b = vid.buffered,
        i = b.length,
        w = canvas.width,
        h = canvas.height,
        vl = vid.duration,
        x1, x2;

    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, w, h);
    ctx.fillStyle = '#d00';

    while (i--) {
        x1 = b.start(i) / vl * w;
        x2 = b.end(i) / vl * w;
        ctx.fillRect(x1, 0, x2 - x1, h);
    }
    ctx.fillStyle = '#fff';

    x1 = vid.currentTime / vl * w;
    ctx.textBaseline = 'top';
    ctx.textAlign = 'left';

    ctx.fillText(vid.currentTime.toFixed(1), 4, 4);

    ctx.textAlign = 'right';
    ctx.fillText(vl.toFixed(1), w - 4, 4);

    ctx.beginPath();
    ctx.arc(x1, h * 0.5, 7, 0, 2 * Math.PI);
    ctx.fill();

    setTimeout(loop, 29);
}
play.addEventListener('click', function () {
    vid.play()
}, false);
pause.addEventListener('click', function () {
    vid.pause()
}, false);