Alpha

videologic.js

@@ -1,80 +1,105 @@
-var newVideo=[
-	{
-		video: "Video",
-		source: "Sample Video/video.mp4"
-	},
-	{
-		video: "Video 2",
-		source: "Sample Video/Video2.mp4"
-	},
-	{
-		video: "Singham",
-		source: "Sample Video/Singham.mp4"
-	},
-	{
-		video: "Mr.Bean",
-		source: "Sample Video/Mr. Bean.mp4"
-	},
-	{
-		video: "Father on Holidays",
-		source: "Sample Video/Father on Holidays"
-	}
-];
-var pbutton=document.querySelector("#play"),
-muted=document.getElementById("mute"),
-video=document.querySelector(".video"),
-res=document.querySelector("#reset"),
-fullVideo=document.querySelector(".c-video"),
-back5=document.getElementById("back"),
-for5=document.getElementById("for"),
-prog=document.querySelector(".progress"),
-fullScreen=document.querySelector("#fullscreen"),
-seekSlider=document.getElementById("seekslider"),
-seekSlide=document.getElementById("red"),
-currentTi=document.getElementById("currenttime"),
-durationTi=document.getElementById("durationtime"),
-soundSlider=document.getElementById("soundslider"),
-next=document.getElementById("changeVideo"),
-a=document.querySelectorAll("a"),
-m=true,
-isFullScreen=false,
-i=0;
-
-pbutton.addEventListener("click",playpause);
-muted.addEventListener("click",volumeVideo);
-res.addEventListener("click",restart1);
+let newVideo=[],m=true,isFullScreen=false,i;
+
+const  play=document.querySelector("#play"),
+	   muted=document.getElementById("mute"),
+	   video=document.querySelector(".video"),
+	   res=document.querySelector("#reset"),
+	   fullVideo=document.querySelector(".c-video"),
+	   back5=document.getElementById("back"),
+	   for5=document.getElementById("for"),
+	   prog=document.querySelector(".progress"),
+	   fullScreen=document.querySelector("#fullscreen"),
+	   seekSlider=document.getElementById("seekslider"),
+	   seekSlide=document.getElementById("red"),
+	   currentTi=document.getElementById("currenttime"),
+	   durationTi=document.getElementById("durationtime"),
+	   soundSlider=document.getElementById("soundslider"),
+	   playlist=document.querySelector("ul"),
+	   fileInput=document.querySelector("input[type=file]");
+
+seekSlider.addEventListener("change",vidSeek);
+video.addEventListener("timeupdate",updateSeek);	
+play.addEventListener("click",playpause);
+muted.addEventListener("click",volume);
+res.addEventListener("click",restart);
 back5.addEventListener("click",backBy5);
 for5.addEventListener("click",forwardBy5);
-video.addEventListener("ended",end);
 fullScreen.addEventListener("click",toggleFullScreen);
-seekSlider.addEventListener("change",vidSeek);
-video.addEventListener("timeupdate",updateSeek);
 soundSlider.addEventListener("change",soundSeek);
-next.addEventListener("click",nextVideo);
-a.forEach(function(a){
-	a.addEventListener("click",show);
+fileInput.addEventListener("change",playFile);
+video.addEventListener("ended",end);
+
+document.addEventListener('keydown', e => {
+	switch (e.keyCode) {
+		case 32:
+			video.paused ? video.play() : video.pause();
+			break;
+		case 37: 
+			video.currentTime += -5;
+			break;
+		case 39:
+			video.currentTime += 5;
+		break;
+	}
 });
 
+function vidSeek()
+{
+	var ut=video.duration*(seekSlider.value/100);
+	video.currentTime=ut;
+}
+
+function updateSeek()
+{
+	var nt=video.currentTime*(100/video.duration);
+	seekSlider.value=nt;
+	seekSlide.style.width = nt +"%";
+	var curmin=Math.floor(video.currentTime/60);
+	var cursec=Math.floor(video.currentTime-curmin*60);
+	var durmin=Math.floor(video.duration/60);
+	var dursec=Math.round(video.duration-durmin*60);
+	if(cursec<10)
+	{
+		cursec="0"+cursec;
+	}
+
+	if(curmin<10)
+	{
+		curmin="0"+curmin;
+	}
+
+	if(dursec<10)
+	{
+		dursec="0"+dursec;
+	}
+
+	if(durmin<10)
+	{
+		durmin="0"+durmin;
+	}
+	currentTi.innerHTML=curmin+":"+cursec;
+	durationTi.innerHTML=durmin+":"+dursec;
+}
 
 function playpause()
 {
 	if(video.paused)
 	{
 		video.play();		
-		pbutton.classList.remove("fa-google-play");
-		pbutton.classList.add("fa-pause");
-		pbutton.style.fontSize="22px";
+		play.classList.remove("fa-google-play");
+		play.classList.add("fa-pause");
+		play.style.fontSize="22px";
 	}
 	else
 	{
 		video.pause();
-		pbutton.classList.add("fa-google-play");
-		pbutton.classList.remove("fa-pause");
-		pbutton.style.fontSize="22px";
+		play.classList.add("fa-google-play");
+		play.classList.remove("fa-pause");
+		play.style.fontSize="22px";
 	}
 }
 
-function volumeVideo()
+function volume()
 {
 	if(m)
 	{
@@ -96,7 +121,7 @@ function volumeVideo()
 	m=!m;
 }
 
-function restart1()
+function restart()
 {
 	video.currentTime=0;
 }
@@ -150,43 +175,6 @@ function toggleFullScreen()
 	}
 }
 
-function vidSeek()
-{
-	var ut=video.duration*(seekSlider.value/100);
-	video.currentTime=ut;
-}
-
-function updateSeek()
-{
-	var nt=video.currentTime*(100/video.duration);
-	seekSlider.value=nt;
-	seekSlide.style.width = nt +"%";
-	var curmin=Math.floor(video.currentTime/60);
-	var cursec=Math.floor(video.currentTime-curmin*60);
-	var durmin=Math.floor(video.duration/60);
-	var dursec=Math.round(video.duration-durmin*60);
-	if(cursec<10)
-	{
-		cursec="0"+cursec;
-	}
-
-	if(curmin<10)
-	{
-		curmin="0"+curmin;
-	}
-
-	if(dursec<10)
-	{
-		dursec="0"+dursec;
-	}
-
-	if(durmin<10)
-	{
-		durmin="0"+durmin;
-	}
-	currentTi.innerHTML=curmin+":"+cursec;
-	durationTi.innerHTML=durmin+":"+dursec;
-}
 
 function soundSeek()
 {
@@ -206,50 +194,59 @@ function soundSeek()
 		muted.style.color="red";
 	}
 }
-
-function nextVideo()
+function playFile()
 {
-	if(i<=newVideo.length-1)
-	{
-		video.pause();
-		video.setAttribute("src",newVideo[i++]["source"]);
-		video.currentTime=0.0;
-		var nt=video.currentTime*(100/video.duration);
-		seekSlider.value=nt;
-		seekSlide.style.width = nt +"%";
-		video.load();
-		video.pause();
-		pbutton.classList.add("fa-google-play");
-		pbutton.classList.remove("fa-pause");
-		pbutton.style.fontSize="22px";
-	}
-	else
-	{
-		i=0;
+	for (const file of Array.from(this.files))
+	{
+		var listItem = document.createElement('li');
+		playlist.appendChild(listItem);
+		listItem.objUrl = URL.createObjectURL(file);
+		listItem.textContent = file.name;
+		newVideo.push(listItem);
+		listItem.addEventListener('click', function(e) 
+		{
+			video.setAttribute("src", this.objUrl);
+			play.classList.add("fa-google-play");
+			play.classList.remove("fa-pause");
+			for(j=0;j<newVideo.length;j++)
+			{
+				if(this.textContent==newVideo[j].textContent)
+				{
+					i=j;
+					break;
+				}
+			}
+		});
+		playlist.appendChild(listItem);
 	}
+
 }
 
-function show()
+function nextVideo(pos)
 {
-	var source="D:/udemy/video/Sample Video/"+this.innerHTML;
 	video.pause();
 	video.currentTime=0.0;
 	var nt=video.currentTime*(100/video.duration);
 	seekSlider.value=nt;
 	seekSlide.style.width = nt +"%";
-	video.setAttribute("src",source);
+	video.setAttribute("src",newVideo[pos].objUrl);
 	video.load();
 	video.pause();
-	pbutton.classList.add("fa-google-play");
-	pbutton.classList.remove("fa-pause");
-	pbutton.style.fontSize="22px";
+	play.classList.add("fa-google-play");
+	play.classList.remove("fa-pause");
 }
 
+
 function end()
 {
-	video.currentTime=0.0;
-	pbutton.classList.add("fa-google-play");
-	pbutton.classList.remove("fa-pause");
-	pbutton.style.fontSize="22px";
-	nextVideo();
-}
+	alert("Video ended");
+	if(i==newVideo.length-1)
+	{
+		nextVideo(0);
+	}
+	else
+	{
+		nextVideo(++i);
+	}
+}
+

videoplayer.html

@@ -5,10 +5,11 @@
 	<link rel="stylesheet" type="text/css" href="videostyle.css">
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
 <body>
+	<input type="file" accept="video/*"/ multiple>
 	<div class="container">
 		<div class="c-video">
 			<video  class="video" id="video1"> 
-				<source src="Sample video/video.mp4" type="video/mp4"> 
+				<source src="Sample Video/video.mp4" type="video/mp4"> 
 				THE VIDEO CANNOT BE PLAYED.... 
 			</video>
 
@@ -21,8 +22,7 @@
 					<span id="currenttime">00:00</span><span id="slash">  /  </span><span id="durationtime">00:00</span>
 					<button id="for" title="Forward by 5s" class="fas fa-forward"></button> 
 					<button id="reset" title="Replay video" class="fab fa-rev"></button>					
-					<button id="fullscreen" title="Fullscreen" class="fas fa-expand"></button>
-					<button id="changeVideo" title="Next video" class="fas fa-step-forward"></button>	
+					<button id="fullscreen" title="Fullscreen" class="fas fa-expand"></button>	
 					<div class="seekbar">
 						<input id="seekslider" type="range" min="0" max="100" value="0" range="1" title="Movie seek">
 						<div class="red" id="red" style="position: absolute; background: #f00; height: 4px; width: 0;bottom: 49px;left: -0.1%"></div>
@@ -32,12 +32,9 @@
 		</div>
 	</div>
 	<div class="videolist">
-		<h4>List of Videos in the playlist</h4>
-		<p><a href="#" class="v1">Video.mp4</a></p>
-		<p><a href="#" class="v2">Video2.mp4</a></p>
-		<p><a href="#" class="v3">Singham.mp4</a></p>
-		<p><a href="#" class="v4">Mr. Bean.mp4</a></p>
-		<p><a href="#" class="v5">Father on Holidays.mp4</a></p>
+		<ul>
+			<h4>List of Videos in the playlist</h4>
+		</ul>
 	</div>
 	<script src="videologic.js"></script>
 </body> 

videostyle.css

@@ -17,6 +17,7 @@ body
 }
 .container
 {
+	position: relative;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -181,33 +182,31 @@ input[type='range']:hover::-webkit-slider-thumb
 .videolist
 {
 	text-align: center;
-	margin-top: -100px;
-	margin-left: 45%;
-	max-width: 200px;
+	align-items: center;
+	margin: auto;
+	max-width: 400px;
 	line-height: 40px;
 }
-p
+li
 {
 	background: #fff;
 }
-a
+li
 {
 	color: red;
 	text-decoration: none;	
+	list-style-type: none;
 }
-p:nth-child(2n)
+li:nth-child(2n)
 {
 	background-color: #1eea7e;
 }
-p:hover
+li:hover
 {
 	background: blue;
+	text-decoration: underline;
 }
 h4
 {
 	background: #2980b9;
-}
-a:hover
-{
-	text-decoration: underline;
 }