Skip to content

Commit 7e72bd0

Browse files
Avdhesh-VarshneyAvdhesh-Varshney
committed
Video Player 😎
1 parent 80d2278 commit 7e72bd0

7 files changed

Lines changed: 277 additions & 0 deletions

File tree

‎Projects/Video-Player/README.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# **VIDEO PLAYER**
2+
3+
---
4+
5+
6+
## **Description 📃**
7+
- This project made by using HTML, CSS and JS
8+
- In this project, Enter the data path of any file with extension on the javascript file in the array `currentDirVideoFiles`
9+
- This will enlist all the video files on the webpage.
10+
- Now, you can enjoy the video player application.
11+
12+
13+
<br>
14+
15+
## **Tech Stack 🎮**
16+
- HTML
17+
- CSS
18+
- JS
19+
20+
21+
<br>
22+
23+
## **Screenshot 📸**
24+
25+
![Leap_Years](https://github.com/TusharKesarwani/Front-End-Projects/assets/114330097/8e5cf34c-c1ad-4998-bbcd-4f5780b7d901)
26+
27+
28+
<br>
29+
30+
## **Created By 👦**
31+
32+
[Avdhesh Varshney](https://github.com/Avdhesh-Varshney)
33+
34+
35+
<br>
36+
37+
### **Thanks for using this application 🎉**
38+

‎Projects/Video-Player/index.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<!-- Logo of the website -->
9+
<link rel="shortcut icon" href="./logo.png" type="image/x-icon">
10+
11+
<!-- Title of the website -->
12+
<title>Video Player</title>
13+
14+
<!-- stylesheet of website -->
15+
<link rel="stylesheet" href="./style.css">
16+
</head>
17+
18+
<body>
19+
<!-- Main container of the video player -->
20+
<div class="container">
21+
<!-- Heading of the video player -->
22+
<h1>VIDEO PLAYER</h1>
23+
24+
<!-- Created by -->
25+
<h3>Created By <a href="https://github.com/Avdhesh-Varshney">Avdhesh Varshney</a></h3>
26+
27+
<!-- Video container to enlist all the videos -->
28+
<div class="video-container"></div>
29+
30+
<!-- On click video is played there -->
31+
<div class="popup-video">
32+
<!-- Cross button -->
33+
<span>&times;</span>
34+
35+
<!-- Video playing -->
36+
<video src="#" muted autoplay controls></video>
37+
</div>
38+
39+
</div>
40+
41+
<!-- Main javascript file -->
42+
<script src="./script.js"></script>
43+
</body>
44+
45+
</html>

‎Projects/Video-Player/logo.png‎

31.8 KB
Loading

‎Projects/Video-Player/script.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
// Array of video file names in the current directory
2+
var currentDirVideoFiles = ['vid1.mp4', 'vid2.mp4', 'vid3.mp4', 'vid4.mp4', 'vid5.mp4', 'vid6.mp4'];
3+
4+
// Get the video container element from the HTML document
5+
const videoContainer = document.getElementsByClassName('video-container')[0];
6+
7+
// Function to create video elements based on the provided array of video files
8+
function createElements(arr) {
9+
10+
for (let i = 0; i < arr.length; i++) {
11+
// Create a div element for each video
12+
let videoDiv = document.createElement('div');
13+
videoDiv.classList = 'video';
14+
15+
// Create a video element
16+
let video = document.createElement('video');
17+
video.muted = true;
18+
19+
// Path of the video
20+
video.src = `./${arr[i]}`;
21+
22+
// Adding the feature so that user does not download the video
23+
video.controlsList.add('nodownload');
24+
25+
// Adding the option so that menu option will remove/disable
26+
video.oncontextmenu = function (e) {
27+
e.preventDefault();
28+
};
29+
30+
// Append the video element to the video div
31+
videoDiv.appendChild(video);
32+
33+
// Append the video div to the video container
34+
videoContainer.appendChild(videoDiv);
35+
}
36+
}
37+
38+
// Function to handle the click events of video elements
39+
function load() {
40+
41+
// Add click event listener to each video element inside the video container
42+
document.querySelectorAll('.video-container video').forEach(vid => {
43+
vid.onclick = () => {
44+
// Display the popup video container
45+
document.querySelector('.popup-video').style.display = 'block';
46+
47+
// Set the source of the popup video to the clicked video source
48+
document.querySelector('.popup-video video').src = vid.getAttribute('src');
49+
}
50+
});
51+
52+
// Add click event listener to the close button of the popup video
53+
document.querySelector('.popup-video span').onclick = () => {
54+
let videoContainer = document.querySelector('.popup-video');
55+
let video = videoContainer.querySelector('video');
56+
57+
// Pause the video and hide the popup video container
58+
video.pause();
59+
videoContainer.style.display = 'none';
60+
}
61+
}
62+
63+
// Initialization function
64+
function init() {
65+
// Create video elements based on the current directory video files
66+
createElements(currentDirVideoFiles);
67+
68+
// Wait for some time before attaching the event listeners
69+
setTimeout(load, 1500);
70+
}
71+
72+
// Call the init function to start the process
73+
init();
74+
75+
// Adding the option so that menu option will remove/disable
76+
document.addEventListener('contextmenu', function (e) {
77+
e.preventDefault();
78+
});

‎Projects/Video-Player/style.css‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
text-transform: capitalize;
6+
font-family: Verdana, Geneva, Tahoma, sans-serif;
7+
user-select: none;
8+
}
9+
10+
.container {
11+
position: relative;
12+
min-height: 100vh;
13+
background-color: #334;
14+
}
15+
16+
.container h1 {
17+
color: #fff;
18+
text-align: center;
19+
padding: 15px;
20+
font-size: 40px;
21+
font-weight: normal;
22+
}
23+
24+
.container h3 {
25+
color: #fff;
26+
text-align: center;
27+
margin-bottom: 30px;
28+
margin-top: 10px;
29+
font-weight: normal;
30+
}
31+
32+
.container h3 a {
33+
color: #fff;
34+
text-decoration: none;
35+
}
36+
37+
.container h3 a:hover {
38+
text-decoration: underline;
39+
}
40+
41+
.container .video-container {
42+
display: flex;
43+
flex-wrap: wrap;
44+
gap: 35px;
45+
justify-content: center;
46+
padding: 10px;
47+
}
48+
49+
.container .video-container .video {
50+
height: 350px;
51+
width: 350px;
52+
border: 5px solid #fff;
53+
border-radius: 5px;
54+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
55+
cursor: pointer;
56+
overflow: hidden;
57+
}
58+
59+
.container .video-container .video video {
60+
padding: 10px;
61+
height: 100%;
62+
width: 100%;
63+
object-fit: cover;
64+
transition: 0.2s linear;
65+
}
66+
67+
.container .video-container .video:hover video {
68+
transform: scale(1.1);
69+
}
70+
71+
.container .popup-video {
72+
position: fixed;
73+
top: 0;
74+
left: 0;
75+
z-index: 100;
76+
background: rgba(0, 0, 0, 0.8);
77+
height: 100%;
78+
width: 100%;
79+
display: none;
80+
}
81+
82+
.container .popup-video video {
83+
position: absolute;
84+
top: 50%;
85+
left: 50%;
86+
transform: translate(-50%, -50%);
87+
width: 750px;
88+
border-radius: 5px;
89+
border: 3px solid #fff;
90+
object-fit: cover;
91+
}
92+
93+
.container .popup-video span {
94+
position: absolute;
95+
top: 5px;
96+
right: 20px;
97+
font-size: 50px;
98+
color: #fff;
99+
font-weight: bolder;
100+
z-index: 100;
101+
cursor: pointer;
102+
}
103+
104+
@media (max-width: 768px) {
105+
.container .popup-video video {
106+
width: 95%;
107+
}
108+
}

‎img/projects/Video_Player.png‎

252 KB
Loading

‎projects.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -998,6 +998,14 @@ const projects = [
998998
"description":"This website can be used to manipulate text in several ways such as change to uppercase or lowercase , and remove extra spaces etc.",
999999
"github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Text-Utilities",
10001000
"project-link":"Projects/Text-Utilities/index.html"
1001+
},
1002+
{
1003+
"title":"Video Player",
1004+
"tags":["HTML","CSS","JavaScript"],
1005+
"img":"img/projects/Video_Player.png",
1006+
"description":"This website can be used to play videos. This application give the feeling of video gallery as of our mobile phone.",
1007+
"github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Video-Player",
1008+
"project-link":"Projects/Video-Player/index.html"
10011009
}
10021010

10031011
]

0 commit comments

Comments
 (0)