Video Player Controls

by Jhim Preston

HTML

<video oncanplay="this.play();" ontimeupdate="barra();time.innerHTML=tiempo(this.currentTime) + ' / ' +tiempo(this.duration)  " id="vide" src="http://bit.ly/can-tom-n-jerry" loop></video>
<br>
<button onclick="togglePlay()"> play </button>
<input id="range" type="range" value="0" max="1" step="0.01" onchange="goto(this.value)"/>
<span id=time></span>

<script>
videoElement=document.getElementById('vide');

function togglePlay() {
if ( videoElement.paused ) {
        videoElement.play()
    } else {
        videoElement.pause()
    }
}

function tiempo (time) {
    if (time === null || time === undefined) {
        return "--";
    }
    const minutes = Math.floor(time / 60);
    let seconds = Math.floor(time - minutes * 60);
    if (seconds < 10) {
        seconds = "0" + seconds;
    }
return  minutes + ":" + seconds
}

function barra()
{
document.getElementById('range').value = (videoElement.currentTime / videoElement.duration)
}

function goto(newVal)
{
 videoElement.currentTime = newVal * videoElement.duration;
}
</script>