JSFiddle - React, Tailwind, and code Playground

by Rahul Desai

HTML

<div id="container">
    <div>
        <video id="video" src="podcast_teaser.mp4" >
            Your browser does not support the <code>video</code> element.
        </video>
    </div>
    <div>
        <input type="button" id="play_pause_button" value="Play" />
        <input type="range" id="seekbar" min="0" max="10" value="0" step="0.1" />
        <input type="button" id="mute_button" value="Mute" />
        <input type="range" id="volume" min="0" max="1" value="0.5" step="0.01"/>
        <input type="button" id="fullscreen_button" value="Fullscreen" />
    </div>
    <div>
        <input type="button" id="rewind_button" value="Rewind" />
        <input type="button" id="forward_button" value="Forward" />
        <input type="button" id="replay_button" value="Replay" />
    </div>
</div>

CSS

range{
    outline: none;
}
#container{
    text-align: center;
}

JavaScript

$(document).ready(function(){
    var video = document.getElementById("video");
    
    video.volume = $("#volume").val();
    
    $("#play_pause_button").click(function(){
        if(video.paused){
            video.play();
            $("#play_pause_button").prop("value", "Pause");
            var seekbar_update = setInterval(function(){
                $("#seekbar").val(video.currentTime / video.duration * 10);								
            }, 25);
        }
        else{
            video.pause();
            window.clearInterval(seekbar_update);
            $("#play_pause_button").prop("value", "Play");
        }						
    });
    
    $("#seekbar").change(function(){
        video.currentTime = video.duration * $("#seekbar").val() / 10;
    })
    
    $("#mute_button").click(function(){
        if(video.muted == false){
            video.muted = true;
            $("#mute_button").prop("value", "Unmute");
        }
        else{
            video.muted = false;
            $("#mute_button").prop("value", "Mute");
        }
    });
    
    $("#volume").change(function(){
        video.volume = $("#volume").val();
    });
    
    $("#fullscreen_button").click(function(){
        if(video.requestFullscreen)
            video.requestFullscreen();
        else if(video.msRequestFullscreen)
            video.msRequestFullscreen();
        else if(video.mozRequestFullscreen)
            video.mozRequestFullscreen();
        else if(video.webkitRequestFullscreen)
            video.webkitRequestFullscreen();
    });
    
    
    $("#rewind_button").click(function(){
        video.pause();
        video.currentTime -= 10;
        video.play();
        var seekbar_update = setInterval(function(){
            $("#seekbar").val(video.currentTime / video.duration * 10);								
        }, 25);
        $("#play_pause_button").prop("value", "Pause");
    });
    
    $("#forward_button").click(function(){
        video.pause();
        video.currentTime += 10;
       ...