diff --git a/Sample Video/Father on Holidays.mp4 b/Sample Video/Father on Holidays.mp4 deleted file mode 100644 index aeba5ea..0000000 Binary files a/Sample Video/Father on Holidays.mp4 and /dev/null differ diff --git a/Sample Video/Mr. Bean.mp4 b/Sample Video/Mr. Bean.mp4 deleted file mode 100644 index 8051d77..0000000 Binary files a/Sample Video/Mr. Bean.mp4 and /dev/null differ diff --git a/Sample Video/Singham.mp4 b/Sample Video/Singham.mp4 deleted file mode 100644 index abfee95..0000000 Binary files a/Sample Video/Singham.mp4 and /dev/null differ diff --git a/Sample Video/Video2.mp4 b/Sample Video/Video2.mp4 deleted file mode 100644 index 2c18de7..0000000 Binary files a/Sample Video/Video2.mp4 and /dev/null differ diff --git a/videologic.js b/videologic.js index 7c660b9..a68a9e8 100644 --- a/videologic.js +++ b/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 +
@@ -21,8 +22,7 @@ 00:00 / 00:00 - - +
@@ -32,12 +32,9 @@
-

List of Videos in the playlist

-

Video.mp4

-

Video2.mp4

-

Singham.mp4

-

Mr. Bean.mp4

-

Father on Holidays.mp4

+
    +

    List of Videos in the playlist

    +
diff --git a/videostyle.css b/videostyle.css index 5aa2da9..ee00796 100644 --- a/videostyle.css +++ b/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; } \ No newline at end of file