Skip to content

Commit 6d5900e

Browse files
solygambassolygambas
committed
add custom video player
1 parent f935aaf commit 6d5900e

File tree

4 files changed

+288
-0
lines changed

4 files changed

+288
-0
lines changed

‎61-custom video player/index.html

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
9+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
10+
crossorigin="anonymous"
11+
/>
12+
<link rel="stylesheet" href="style.css" />
13+
<title>Custom Video Player</title>
14+
</head>
15+
<body>
16+
<h1>Custom Video Player</h1>
17+
<video
18+
src="https://designsupply-web.com/samplecontent/vender/codepen/20181014.mp4"
19+
id="video"
20+
class="screen"
21+
poster="https://images.unsplash.com/photo-1472148439583-1f4cf81b80e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1489&q=80"
22+
></video>
23+
<!-- Sample Video provided by DesignSupply https://codepen.io/designsupply/pen/zmEWBm -->
24+
<div class="controls">
25+
<button class="btn" id="play">
26+
<i class="fa fa-play-circle fa-2x"></i>
27+
</button>
28+
<button class="btn" id="stop">
29+
<i class="fa fa-stop fa-2x"></i>
30+
</button>
31+
<input
32+
type="range"
33+
id="progress"
34+
class="progress"
35+
min="0"
36+
max="100"
37+
step="0.1"
38+
value="0"
39+
/>
40+
<span class="timestamp" id="timestamp">00:00</span>
41+
</div>
42+
<script src="script.js"></script>
43+
</body>
44+
</html>

‎61-custom video player/script.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// Reference: https://developer.mozilla.org/fr/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs
2+
3+
const video = document.getElementById("video");
4+
const play = document.getElementById("play");
5+
const stop = document.getElementById("stop");
6+
const progress = document.getElementById("progress");
7+
const timestamp = document.getElementById("timestamp");
8+
9+
function toggleVideoStatus() {
10+
video.paused ? video.play() : video.pause();
11+
}
12+
13+
function updatePlayIcon() {
14+
video.paused
15+
? (play.innerHTML = '<i class="fa fa-play-circle fa-2x"></i>')
16+
: (play.innerHTML = '<i class="fa fa-pause-circle fa-2x"></i>');
17+
}
18+
19+
function updateProgress() {
20+
progress.value = (video.currentTime / video.duration) * 100;
21+
let minutes = Math.floor(video.currentTime / 60);
22+
if (minutes < 10) minutes = "0" + String(minutes);
23+
let seconds = Math.floor(video.currentTime % 60);
24+
if (seconds < 10) seconds = "0" + String(seconds);
25+
timestamp.innerHTML = `${minutes}:${seconds}`;
26+
}
27+
28+
function setVideoProgress() {
29+
video.currentTime = (+progress.value * video.duration) / 100;
30+
}
31+
32+
function stopVideo() {
33+
video.currentTime = 0;
34+
video.pause();
35+
}
36+
37+
video.addEventListener("click", toggleVideoStatus);
38+
video.addEventListener("pause", updatePlayIcon);
39+
video.addEventListener("play", updatePlayIcon);
40+
video.addEventListener("timeupdate", updateProgress);
41+
play.addEventListener("click", toggleVideoStatus);
42+
stop.addEventListener("click", stopVideo);
43+
progress.addEventListener("change", setVideoProgress);

‎61-custom video player/style.css

+200
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: "Muli", sans-serif;
9+
background-color: #117598;
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
justify-content: center;
14+
height: 100vh;
15+
margin: 0;
16+
}
17+
18+
h1 {
19+
color: #fff;
20+
}
21+
22+
/* Reference: https://stackoverflow.com/questions/10826784/make-html5-video-poster-be-same-size-as-video-itself */
23+
video[poster] {
24+
object-fit: cover;
25+
}
26+
27+
.screen {
28+
cursor: pointer;
29+
width: 90%;
30+
background-color: #000 !important;
31+
border-top-left-radius: 10px;
32+
border-top-right-radius: 10px;
33+
}
34+
35+
.controls {
36+
background-color: #09426a;
37+
color: #fff;
38+
border-bottom-left-radius: 10px;
39+
border-bottom-right-radius: 10px;
40+
display: flex;
41+
align-items: center;
42+
justify-content: center;
43+
padding: 10px;
44+
width: 90%;
45+
}
46+
47+
.controls .btn {
48+
border: 0;
49+
background: transparent;
50+
cursor: pointer;
51+
}
52+
53+
.controls .btn:focus {
54+
outline: 0;
55+
}
56+
57+
.controls .fa-play-circle {
58+
color: #34573a;
59+
}
60+
61+
.controls .fa-play-circle:hover {
62+
color: #28a745;
63+
}
64+
65+
.controls .fa-stop {
66+
color: #dc3545;
67+
}
68+
.controls .fa-stop:hover {
69+
color: #f02426;
70+
}
71+
72+
.controls .fa-pause-circle {
73+
color: #fff;
74+
}
75+
76+
.controls .timestamp {
77+
color: #fff;
78+
font-weight: bold;
79+
margin-left: 10px;
80+
}
81+
82+
@media (min-width: 768px) {
83+
.screen,
84+
.controls {
85+
width: 60%;
86+
}
87+
}
88+
89+
/* SOURCE: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */
90+
91+
input[type="range"] {
92+
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
93+
width: 100%; /* Specific width is required for Firefox. */
94+
background: transparent; /* Otherwise white in Chrome */
95+
}
96+
97+
input[type="range"]::-webkit-slider-thumb {
98+
-webkit-appearance: none;
99+
}
100+
101+
input[type="range"]:focus {
102+
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
103+
}
104+
105+
input[type="range"]::-ms-track {
106+
width: 100%;
107+
cursor: pointer;
108+
109+
/* Hides the slider so custom styles can be added */
110+
background: transparent;
111+
border-color: transparent;
112+
color: transparent;
113+
}
114+
115+
/* Special styling for WebKit/Blink */
116+
input[type="range"]::-webkit-slider-thumb {
117+
-webkit-appearance: none;
118+
border: 1px solid #000000;
119+
height: 36px;
120+
width: 16px;
121+
border-radius: 3px;
122+
background: #ffffff;
123+
cursor: pointer;
124+
margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
125+
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
126+
}
127+
128+
/* All the same stuff for Firefox */
129+
input[type="range"]::-moz-range-thumb {
130+
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
131+
border: 1px solid #000000;
132+
height: 36px;
133+
width: 16px;
134+
border-radius: 3px;
135+
background: #ffffff;
136+
cursor: pointer;
137+
}
138+
139+
/* All the same stuff for IE */
140+
input[type="range"]::-ms-thumb {
141+
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
142+
border: 1px solid #000000;
143+
height: 36px;
144+
width: 16px;
145+
border-radius: 3px;
146+
background: #ffffff;
147+
cursor: pointer;
148+
}
149+
150+
input[type="range"]::-webkit-slider-runnable-track {
151+
width: 100%;
152+
height: 8.4px;
153+
cursor: pointer;
154+
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
155+
background: #3071a9;
156+
border-radius: 1.3px;
157+
border: 0.2px solid #010101;
158+
}
159+
160+
input[type="range"]:focus::-webkit-slider-runnable-track {
161+
background: #367ebd;
162+
}
163+
164+
input[type="range"]::-moz-range-track {
165+
width: 100%;
166+
height: 8.4px;
167+
cursor: pointer;
168+
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
169+
background: #3071a9;
170+
border-radius: 1.3px;
171+
border: 0.2px solid #010101;
172+
}
173+
174+
input[type="range"]::-ms-track {
175+
width: 100%;
176+
height: 8.4px;
177+
cursor: pointer;
178+
background: transparent;
179+
border-color: transparent;
180+
border-width: 16px 0;
181+
color: transparent;
182+
}
183+
input[type="range"]::-ms-fill-lower {
184+
background: #2a6495;
185+
border: 0.2px solid #010101;
186+
border-radius: 2.6px;
187+
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
188+
}
189+
input[type="range"]:focus::-ms-fill-lower {
190+
background: #3071a9;
191+
}
192+
input[type="range"]::-ms-fill-upper {
193+
background: #3071a9;
194+
border: 0.2px solid #010101;
195+
border-radius: 2.6px;
196+
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
197+
}
198+
input[type="range"]:focus::-ms-fill-upper {
199+
background: #367ebd;
200+
}

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@
6666
| 58 | [3D Product Card](https://github.com/solygambas/html-css-fifty-projects/tree/master/58-3D%20product%20card) | [Live Demo](https://codepen.io/solygambas/full/wvoXWPq) |
6767
| 59 | [Form Validator](https://github.com/solygambas/html-css-fifty-projects/tree/master/59-form%20validator) | [Live Demo](https://codepen.io/solygambas/full/MWbPJjb) |
6868
| 60 | [Movie Seat Booking](https://github.com/solygambas/html-css-fifty-projects/tree/master/60-movie%20seat%20booking) | [Live Demo](https://codepen.io/solygambas/full/xxRQEOy) |
69+
| 61 | [Custom Video Player](https://github.com/solygambas/html-css-fifty-projects/tree/master/61-custom%20video%20player) | [Live Demo](https://codepen.io/solygambas/full/mdOQadY) |
6970

7071
Mainly based on 2 courses by Brad Traversy (2020):
7172

0 commit comments

Comments
 (0)