JSFiddle - React, Tailwind, and code Playground

by bgmort

HTML

<h1>Subtitle creator</h1>

<form id="choosefile" action="javascript:">
    <h3>Choose your video:</h3>
    <ul>
        <li>
        <label for="url">Url:</label> <input type="url" id="url" name="url" /> <button type="submit">Load</button>
        </li>
        <!--li>
    <label for="local">Local file:</label><input type="file" id="local" name="local" /> <button id="loadFile">Load</button>
        </li-->
    </ul>
</section>

<video id="video" controls></video>

CSS

ul {
    list-style: none;
}

JavaScript

/*
$('#loadUrl').click(function loadUrl(){
    player.setSrc($('#url').val());    
});

$('#loadFile').click(function loadFile(){
    player.setSrc($('#local').val());    
});
*/

$('#choosefile').submit(function(e){
    e.preventDefault;
    e.stopImmediatePropagation;
    
    player.load($('#url').val());    
});

var Player = function(el){
    var $el = $(el);
    var el = $el[0];
    
    var _this = this;
    function publ(f, name){_this[name || f.name] = f}
    
    //public('fname', function fname(){ is minify friendly
    //public('fname', function(){ is minify friendly, but not accessible without using the this keyword
    //public(function fname(){ is NOT minify friendly, but we don't care here
    publ(load, 'load');
    function load(src){
        el.src = src
    }
 
    publ(seek);
    function seek(time){
        el.currentTime = time
    }

    publ(seekBy);
    function seekBy(time){
        el.currentTime += time
    }
}

player = new Player('#video')