Last active
February 18, 2022 05:25
-
-
Save Vyasdev217/68a953fd052a12f2050334222b6efcf7 to your computer and use it in GitHub Desktop.
Simple HTML video player
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>SIMPLE MEDIA PLAYER</title> | |
<style type="text/css"> | |
/* The Modal (background) */ | |
.modal { | |
display: none; | |
position: fixed; | |
z-index: 1; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 100%; | |
overflow: auto; | |
background-color: rgb(0,0,0); | |
background-color: rgba(0,0,0,0.4); | |
} | |
/* Modal Content/Box */ | |
.modal-content { | |
background-color: #fefefe; | |
margin: 15% auto; | |
padding: 20px; | |
border: 1px solid #888; | |
width: 80%; | |
} | |
</style> | |
</head> | |
<body style="background-color:#CCCCCC;overflow-x: hidden;font-family:Times new roman;"> | |
<div id="myModal" class="modal"> | |
<div class="modal-content"> | |
<p>LOADING...</p> | |
</div> | |
</div> | |
<script type="text/javascript"> | |
var modal = document.getElementById("myModal"); | |
modal.style.display = "block"; | |
</script> | |
MEDIA PLAYER | |
<br> | |
<video id="videoPlayer" style="width:80%" controls preload="auto" style="float:left;"> | |
<source src="" type="video/mp4"> | |
<source src="" type="video/ogg"> | |
Your browser does not support the video tag. | |
</video> | |
<div id="side_panel" style="float:right;width: 20%;"> | |
<div id="controls"> | |
<label id="currentVideo"></label> | |
<br> | |
File<input id="input" type="file"></input> | |
<br> | |
Folder<input id="folder" type="file" webkitdirectory directory></input> | |
<br> | |
PlaybackSpeed:<nobr id="controls1"></nobr> | |
</div> | |
<button id="prevBtn" onclick="previousVideo()" style="background-color: Transparent;background-repeat:no-repeat;border: none;cursor:pointer;overflow: hidden;outline:none;font-size:20px;">Prev</button> | |
<button id="playBtn" onclick="playPauseVideo()" style="background-color: Transparent;background-repeat:no-repeat;border: none;cursor:pointer;overflow: hidden;outline:none;font-size:20px;">Loading</button> | |
<button id="nextBtn" onclick="nextVideo()" style="background-color: Transparent;background-repeat:no-repeat;border: none;cursor:pointer;overflow: hidden;outline:none;font-size:20px;">Next</button> | |
<div id="play_list"> | |
<ul id="videoList"> | |
</ul> | |
</div> | |
</div> | |
</body> | |
<script type="text/javascript"> | |
document.getElementById("prevBtn").innerHTML="<<"; | |
document.getElementById("nextBtn").innerHTML=">>"; | |
document.getElementById("playBtn").innerHTML="==(||)=="; | |
var pbs = document.createElement("INPUT"); | |
pbs.type="number"; | |
pbs.style="background-color: Transparent;background-repeat:no-repeat;border: none;cursor:pointer;overflow: hidden;outline:none;-moz-appearance: textfield;color:black;font-size:20px;"; | |
pbs.step=0.1; | |
pbs.min=0; | |
pbs.value=1.0; | |
document.getElementById("controls1").appendChild(pbs); | |
document.getElementById("controls").insertAdjacentHTML("beforeend","<br>") | |
var video=document.getElementById("videoPlayer"); | |
pbs.addEventListener("change",function(){if(pbs.value>0){video.playbackRate = pbs.value;}else{pbs.value=1;video.playbackRate = pbs.value;}}); | |
document.getElementById("play_list").style.visibility="hidden"; | |
var playlistMode=true;//bool | |
//Individual mdde--START | |
var input = document.getElementById('input'); | |
input.type = 'file'; | |
//Play video | |
input.onchange = e => { | |
var file = e.target.files[0]; | |
var fileUrl = window.URL.createObjectURL(file); | |
video.src=fileUrl; | |
video.playbackRate = pbs.value; | |
video.play(); | |
document.getElementById("currentVideo").innerHTML=""; | |
playlistMode=false; | |
document.getElementById("play_list").style.visibility="hidden"; | |
} | |
input.click(); | |
//Individual mode--END | |
//Playlist mode--START | |
//define var | |
var folder = document.getElementById('folder'); | |
var currentVid=0; | |
var autoplay=true;//bool | |
//Play video in the play list | |
function playListItem(FileNum){ | |
var fileUrl = window.URL.createObjectURL(files[FileNum]); | |
video.src=fileUrl; | |
video.playbackRate = pbs.value; | |
video.play(); | |
var uat1=currentVid+1 | |
document.getElementById("currentVideo").innerHTML=String("["+uat1+"] "+files[FileNum].name); | |
} | |
//Import playlist | |
var files = folder.files,len = files.length,li,i; | |
folder.onchange=function(){ | |
var ul = document.getElementById("videoList"); | |
while((ul.getElementsByTagName("li")).length > 0) { | |
ul.removeChild(ul.firstChild); | |
} | |
for(i=0;i<len;i+=1){ | |
li = document.createElement("li"); | |
li.appendChild(document.createTextNode("["+String(i+1)+"] "+files[i].name)); | |
document.getElementById("videoList").appendChild(li); | |
} | |
playlistMode=true; | |
document.getElementById("play_list").style.visibility="visible"; | |
currentVid=0; | |
playListItem(currentVid); | |
} | |
function nextVideo(){ | |
if(playlistMode==false||currentVid==files.length-1)return 0; | |
currentVid+=1; | |
playListItem(currentVid); | |
} | |
function previousVideo(){ | |
if(playlistMode==false||currentVid==0)return 0; | |
currentVid-=1; | |
playListItem(currentVid); | |
} | |
video.onended=function(){ | |
if(playlistMode==true&&autoplay==true){ | |
nextVideo(); | |
} | |
} | |
//Playlist mode--END | |
function playPauseVideo(){ | |
if(video.paused){ | |
video.play(); | |
} | |
else{ | |
video.pause(); | |
} | |
} | |
video.onpause=function(){document.getElementById("playBtn").innerHTML="==(||)==";} | |
video.onplay=function(){document.getElementById("playBtn").innerHTML="==(=)==";} | |
//close the LOADING modal | |
modal.style.display = "none"; | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment