JSFiddle - React, Tailwind, and code Playground

by masaab algailani

HTML

<div id="playerContainer">
                <video width="550" id="videoPlayer" height="320" autoplay>
                    <source src="http://www.w3schools.com/html/movie.mp4" />
                </video>
                <div id="playerControls">
                    <div id="actionButton" style="background-color:red;width:100px;height:100px"></div>
                    <input id="seekSlider" type="range" min="0" max="100" step="1" value="0"/>
                </div>
            </div>

JavaScript

$(function () {
            var actionButton = $('#actionButton'),
                video = document.getElementById('videoPlayer'),
                seekSlider = $('#seekSlider');

            actionButton.on("click", function () {
                if (video.paused) {
                    actionButton.css('background-image', 'url(images/Pause_White.png)');
                    video.play();
                }
                else {
                    actionButton.css('background-image', 'url(images/Play_White.png)');
                    video.pause();
                }
            });
             seekSlider.on("change", function () {
                var seekTo = video.duration * (seekSlider.val() / 100);
                video.currentTime = seekTo;
            });
            $("#videoPlayer").on("timeupdate", function () {
                var newTime = video.currentTime * (100 / video.duration);
                seekSlider.val(newTime);
            });
        });