Adil Khan
7 years ago
AdiKhanOfficial
#Web Engineering
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">
<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
Video Player with JavaScript _ 0.mp4
Smart Solar Flower
SmartFlower Solar produces unique, ground-mounted solar panel systems that include a sun t...
Adil Khan
10 months ago
DIELECTRIC STRENGTH MEASUREMENT OF EPOXY WITH DIFFERENT NANO FILLING M...
In this project, firstly we will measure the breakdown voltage of pure epoxy with difffere...
Adil Khan
10 months ago
Services
Introduction of System In our Country there is problem that if somebody needs a ser...
Adil Khan
10 months ago
Brain Controlled Home Automation System
Brain Controlled home automation uses EEG device to get its input signal from brain. Throu...
Adil Khan
10 months ago
Student Application Management system (SAMS)
This system will provide a comprehensive solution for the students of Computer Science(CS)...
Adil Khan
10 months ago