JSFiddle - React, Tailwind, and code Playground

by octatone

HTML

<input id="url" type="text" value="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb_trailer_iphone270P.m4v"/>
<button id="load">load</button>
<button id="play">play</button>
<button id="pause">pause</button>
<button id="fullscreen">fullscreen</button>
<video id="video"/>

JavaScript

var loopEnd = null;
var loopStart = null;

$('#load').on('click', function(){
    console.log('load clicked');
    $('#video').attr('src', $('#url').val());
});

$('#fullscreen').on('click', function(){
    console.log('fs clicked');
    $('#video')[0].webkitEnterFullScreen();
});

$('#play').on('click', function(){
    console.log('play clicked');
    $('#video')[0].play();
});

$('#pause').on('click', function(){
    console.log('fs clicked');
    $('#video')[0].pause();
});

$("#video").on('timeupdate', function() {
    console.log("Current time is: " + this.currentTime);
    if(loopEnd && this.currentTime > loopEnd){
        this.currentTime = loopStart || 0;
    }
});