Skip to content

Commit 1910fe6

Browse files
pouyiopouyio
committed
day 11
1 parent e01eb4d commit 1910fe6

File tree

5 files changed

+223
-1
lines changed

5 files changed

+223
-1
lines changed

‎11-custom-html5-video-player/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Custom HTML5 video player
2+
Watch this challenge live in [codepen](http://codepen.io/pouyio/full/bByVLB/).

‎11-custom-html5-video-player/app.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/*jshint esversion: 6 */
2+
3+
const player = document.querySelector('.player');
4+
const video = player.querySelector('.viewer');
5+
6+
const progress = document.querySelector('.progress');
7+
const progressBar = document.querySelector('.progress__filled');
8+
const toggle = document.querySelector('.toggle');
9+
const skipButtons = document.querySelectorAll('[data-skip]');
10+
const ranges = document.querySelectorAll('.player__slider');
11+
12+
function togglePlay() {
13+
const method = video.paused ? 'play' : 'pause';
14+
video[method]();
15+
}
16+
17+
function updateButton() {
18+
const icon = this.paused ? 'play' : 'pause';
19+
toggle.textContent = icon;
20+
}
21+
22+
function skip() {
23+
video.currentTime += parseFloat(this.dataset.skip);
24+
}
25+
26+
function handleRangeUpdate() {
27+
video[this.name] = this.value;
28+
}
29+
30+
function handleProgress() {
31+
const percent = 100 * video.currentTime/video.duration;
32+
progressBar.style.flexBasis = `${percent}%`;
33+
}
34+
35+
function scrub(e) {
36+
const scrubTime = (e.offsetX/ progress.offsetWidth) * video.duration;
37+
video.currentTime = scrubTime;
38+
}
39+
40+
video.addEventListener('click', togglePlay);
41+
video.addEventListener('play', updateButton);
42+
video.addEventListener('pause', updateButton);
43+
toggle.addEventListener('click', togglePlay);
44+
45+
skipButtons.forEach(button => button.addEventListener('click', skip));
46+
ranges.forEach(range => range.addEventListener('change', handleRangeUpdate));
47+
48+
video.addEventListener('timeupdate', handleProgress);
49+
progress.addEventListener('click', scrub);

‎11-custom-html5-video-player/index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Custom HTML5 video player</title>
6+
<link rel="stylesheet" href="style.css" media="screen" title="no title">
7+
</head>
8+
<body>
9+
<div class="player">
10+
<video class="player__video viewer" src="https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164"></video>
11+
12+
<div class="player__controls">
13+
<div class="progress">
14+
<div class="progress__filled"></div>
15+
</div>
16+
<button class="player__button toggle" title="Toggle Play">►</button>
17+
<input type="range" name="volume" class="player__slider" min=0 max="1" step="0.05" value="1">
18+
<input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
19+
<button data-skip="-10" class="player__button">« 10s</button>
20+
<button data-skip="25" class="player__button">25s »</button>
21+
</div>
22+
</div>
23+
24+
<script type="text/javascript" src="app.js"></script>
25+
</body>
26+
</html>

‎11-custom-html5-video-player/style.css

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
html {
2+
box-sizing: border-box;
3+
}
4+
5+
*, *:before, *:after {
6+
box-sizing: inherit;
7+
}
8+
9+
body {
10+
padding: 0;
11+
display:flex;
12+
background:#7A419B;
13+
min-height:100vh;
14+
background: linear-gradient(135deg, #7c1599 0%,#921099 48%,#7e4ae8 100%);
15+
background-size:cover;
16+
align-items: center;
17+
justify-content: center;
18+
}
19+
20+
.player {
21+
max-width:750px;
22+
border:5px solid rgba(0,0,0,0.2);
23+
box-shadow:0 0 20px rgba(0,0,0,0.2);
24+
position: relative;
25+
font-size: 0;
26+
overflow: hidden;
27+
}
28+
29+
.player__video {
30+
width: 100%;
31+
}
32+
33+
.player__button {
34+
background:none;
35+
border:0;
36+
line-height:1;
37+
color:white;
38+
text-align: center;
39+
outline:0;
40+
padding: 0;
41+
cursor:pointer;
42+
max-width:50px;
43+
}
44+
45+
.player__button:focus {
46+
border-color: #ffc600;
47+
}
48+
49+
.player__slider {
50+
width:10px;
51+
height:30px;
52+
}
53+
54+
.player__controls {
55+
display:flex;
56+
position: absolute;
57+
bottom:0;
58+
width: 100%;
59+
transform: translateY(100%) translateY(-5px);
60+
transition:all .3s;
61+
flex-wrap:wrap;
62+
background:rgba(0,0,0,0.1);
63+
}
64+
65+
.player:hover .player__controls {
66+
transform: translateY(0);
67+
}
68+
69+
.player:hover .progress {
70+
height:15px;
71+
}
72+
73+
.player__controls > * {
74+
flex:1;
75+
}
76+
77+
.progress {
78+
flex:10;
79+
position: relative;
80+
display:flex;
81+
flex-basis:100%;
82+
height:5px;
83+
transition:height 0.3s;
84+
background:rgba(0,0,0,0.5);
85+
cursor:ew-resize;
86+
}
87+
88+
.progress__filled {
89+
width:50%;
90+
background:#ffc600;
91+
flex:0;
92+
flex-basis:50%;
93+
}
94+
95+
/* unholy css to style input type="range" */
96+
97+
input[type=range] {
98+
-webkit-appearance: none;
99+
background:transparent;
100+
width: 100%;
101+
margin: 0 5px;
102+
}
103+
input[type=range]:focus {
104+
outline: none;
105+
}
106+
input[type=range]::-webkit-slider-runnable-track {
107+
width: 100%;
108+
height: 8.4px;
109+
cursor: pointer;
110+
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
111+
background: rgba(255,255,255,0.8);
112+
border-radius: 1.3px;
113+
border: 0.2px solid rgba(1, 1, 1, 0);
114+
}
115+
input[type=range]::-webkit-slider-thumb {
116+
box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
117+
height: 15px;
118+
width: 15px;
119+
border-radius: 50px;
120+
background: #ffc600;
121+
cursor: pointer;
122+
-webkit-appearance: none;
123+
margin-top: -3.5px;
124+
box-shadow:0 0 2px rgba(0,0,0,0.2);
125+
}
126+
input[type=range]:focus::-wefbkit-slider-runnable-track {
127+
background: #bada55;
128+
}
129+
input[type=range]::-moz-range-track {
130+
width: 100%;
131+
height: 8.4px;
132+
cursor: pointer;
133+
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
134+
background: #ffffff;
135+
border-radius: 1.3px;
136+
border: 0.2px solid rgba(1, 1, 1, 0);
137+
}
138+
input[type=range]::-moz-range-thumb {
139+
box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
140+
height: 15px;
141+
width: 15px;
142+
border-radius: 50px;
143+
background: #ffc600;
144+
cursor: pointer;
145+
}

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ My goal is simply to learn the basics by doing many simple things rather than st
1515
8. [x] [Fun with HTML5 Canvas](./08-fun-with-HTML5-canvas) - [Codepen](http://codepen.io/pouyio/full/xRBqNL/)
1616
9. [x] [Dev Tools Domination](./09-must-know-dev-tool-tips) - [Codepen](http://codepen.io/pouyio/pen/BQbbdp?editors=1111#)
1717
10. [x] [Hold Shift and Check Checkboxes](./10-hold-shift-and-check-checkboxes) - [Codepen](http://codepen.io/pouyio/full/RoOyqj/)
18-
11. [ ] Custom Video Player
18+
11. [x] [Custom Video Player](./11-custom-html5-video-player) - [Codepend](http://codepen.io/pouyio/full/bByVLB/)
1919
12. [ ] Key Sequence Detection
2020
13. [ ] Slide in on Scroll
2121
14. [ ] JavaScript References vs. Copying

0 commit comments

Comments
 (0)