JSFiddle - React, Tailwind, and code Playground

by Daniel Lisik

HTML

<video controls id="vid-player" width="600">
    <source src="http://localhost/v/t_aaaamL.mp4" type="video/mp4">
        <track src="http://localhost/subtitles.srt" kind="subtitles" srclang="en" label="English" />
</video><!-- #vid-player -->
    
<div id="video-controls">
    <button id="play-pause">play</button>
    <button id="wider-screen">wider-screen</button>
    <button id="fullscreen">fullscreen</button>
</div><!-- #video-controls -->

JavaScript

$(document).ready(function(){ // DOM is ready

    // Initiate variables
    var vidPlayer,
        playPause = $("#play-pause"),
        widerScreen = $("#wider-screen"),
        fullscreen = $("#fullscreen");
    
    // Initiating function(s)
    initVidPlayer();




    /*****************************************/
    /* BEGIN video controls */
    
    // "Initiate control handles" function
    function initVidPlayer() { // main func
        vidPlayer = document.getElementById('vid-player');
        vidPlayer.controls = false;
    } // main func

    
    // "Play/pause" function
    playPause.click(function(){ // main func
        if (vidPlayer.paused || vidPlayer.ended) {
            this.innerHTML = 'pause';
            vidPlayer.play();
        } else {
            this.innerHTML = 'play';   
            vidPlayer.pause();
        }
    }); // main func

    
    // "Detect video end" function
    vidPlayer.onended = function(){
       alert('ooooo'); 
    };
    
    
    
    
    
    //vidPlayer.playbackRate = 20.0;
    setTimeout(function(){
        console.log(vidPlayer.duration);
    }, 4000);

    /* END video controls */ 
    /*****************************************/
   

}); // DOM is ready