Video Player with JavaScript

<html>
<head>
<title>Video Player</title>
<style>
body{background:#8080802b}
#playerBody{max-width:70%;max-height:60%}
#video{width:100%;background:black}
#fileAddres{width:80%;padding:10px}
#loadButton{width:20%;padding:10px}
input[type=range]{-webkit-appearance: none;background:#2db7bf;height:8px}
#durationHidden{margin-top:-22px;opacity:0.1;cursor:pointer}
#controlSection{width:100%;height:5%;padding:10 0 10 0;background:black;color:white}
#controlSection button{background:white;border-radius:20%;padding:5px;border:none;background:#2db7bf}
#controlSection .normalButton{font-size:15px;height:40px;width:40px;}
#controlSection .playBackToggle{font-size:25px;height:60px;width:60px}
#duration, #durationHidden{width:100%}
</style>
</head>
<body>
<center>
<div id="playerBody">
<input type="text" id="fileAddres" dropzone placeholder="Past Video URL" value="https://mcs18.ml/uploads/Video%20Player%20with%20JavaScript%20_%200.mp4"/><button id="loadButton" onclick="loadNew();">Play</button>
<video src="" id="video" autoplay="true" ontimeupdate="updatePlayer();" onclick="togglePlayback();"></video><br>
<table id="controlSection">
<tr>
<td colspan="2">
<input type="range" id="duration" value="0" max="5000"/>
<input type="range" id="durationHidden" value="0" max="5000" onmousedown="changeDuration(this);"/>
</td>
</tr>
<tr>
<td align="left" valign="middle">
&nbsp;&nbsp;&nbsp;&nbsp;
<button class="normalButton" title="Seek Forward" onclick="seekBackward();"><<</button>
<button class="playBackToggle" title="Toggle Playback" onclick="togglePlayback();">P</button>
<button class="normalButton" title="Seek Backward" onclick="seekForward();">>></button></button></button>
</td>
<td align="right" valign="middle">
<input type="range" id="volume" max="1" step="0.01" value="1" onchange="changeVolume(this);"/>
</td>
</tr>
</table>
</div>
</center>
<script>
var video = document.getElementById("video");
function updatePlayer(){
var duration = video.duration;
var currentTime = video.currentTime;
var durationBar = document.getElementById("duration");
durationBar.value = (currentTime/duration)*5000;
}
function loadNew(){
var url = document.getElementById("fileAddres").value;
if(url == "" || url.length < 5){
alert("Invalid Video URL");
}
else{
video.src = url;
video.play();
}
}
function togglePlayback(){
(video.paused) ? video.play() : video.pause();
}
function changeDuration(obj){
video.currentTime = (obj.value/obj.max)*video.duration;
}
function changeVolume(obj){
video.volume = obj.value;
}
function seekForward(){
if(video.currentTime < video.duration-5){
video.currentTime+=5;
}
}
function seekBackward(){
if(video.currentTime > 5){
video.currentTime-=5;
}
}
</script>
</body>
</html>

Video Player with JavaScript _ 0.html

Download: Video Player with JavaScript _ 0.html

Video Player with JavaScript _ 0.mp4

Download: Video Player with JavaScript _ 0.mp4