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
Suitable Medicine Alternative System(SMAS)
This project aims to increase the usage of local brand as they have same salt like interna...
Adil Khan
1 year ago
IOT BASED SMART SOLAR TRACKING SYSTEM WITH REMOTE MONITORING AND CONTR...
In point of fact, as the energy demand is increasing, the renewable sources are being used...
Adil Khan
1 year ago
DETERMINATION OF HEMOLYTIC AND PHOSPHOLIPASE POTENTIAL IN FRUITS, VEGE...
Fruits, vegetables and spices are the rich source of proteins, minerals and vitamins. Many...
Adil Khan
1 year ago
IOT Based Smart Electricity Meter Monitoring and Control for Load Mana...
Due to lack of reliable and useful data of demand side, there is a huge gap between genera...
Adil Khan
1 year ago
WASTE TO ENERGY: RUNNING GENERATOR ON TRASH
According to Pakistan Waste Management System, Pakistan generates around 48.5 million tons...
Adil Khan
1 year ago