Skip to content

Commit 58d9dcf

Browse files
amabenhamouamabenhamou
committed
1 parent 2516cfb commit 58d9dcf

File tree

4 files changed

+284
-132
lines changed

4 files changed

+284
-132
lines changed

‎11 - Custom Video Player/index.html‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,31 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
4-
<meta charset="UTF-8">
5-
<title>HTML Video Player</title>
6-
<link rel="stylesheet" href="style.css">
5+
<meta charset="UTF-8">
6+
<title>HTML Video Player</title>
7+
<link rel="stylesheet" href="style.css">
78
</head>
9+
810
<body>
911

10-
<div class="player">
11-
<video class="player__video viewer" src="https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164"></video>
12+
<div class="player">
13+
<video class="player__video viewer" src="https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164"></video>
1214

13-
<div class="player__controls">
14-
<div class="progress">
15-
<div class="progress__filled"></div>
16-
</div>
17-
<button class="player__button toggle" title="Toggle Play">►</button>
18-
<input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
19-
<input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
20-
<button data-skip="-10" class="player__button">« 10s</button>
21-
<button data-skip="25" class="player__button">25s »</button>
22-
</div>
23-
</div>
15+
<div class="player__controls">
16+
<div class="progress">
17+
<div class="progress__filled"></div>
18+
</div>
19+
<button class="player__button toggle" title="Toggle Play">►</button>
20+
<input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
21+
<input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
22+
<button data-skip="-10" class="player__button">« 10s</button>
23+
<button data-skip="25" class="player__button">25s »</button>
24+
<button class="fullScreen"><i class="icon-fullscreen"></i></button>
25+
</div>
26+
</div>
2427

25-
<script src="scripts.js"></script>
28+
<script src="scripts.js"></script>
2629
</body>
30+
2731
</html>

‎11 - Custom Video Player/scripts.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
const player = document.querySelector('.player');
2+
const video = player.querySelector('.viewer');
3+
const progress = player.querySelector('.progress');
4+
const progressBar = player.querySelector('.progress__filled');
5+
const toggle = player.querySelector('.toggle');
6+
const skipButtons = player.querySelectorAll('[data-skip]');
7+
const ranges = player.querySelectorAll('.player__slider');
8+
const fullScreen = player.querySelector('.fullScreen');
9+
10+
function togglePlay() {
11+
if (video.paused) {
12+
video.play();
13+
} else {
14+
video.pause();
15+
}
16+
}
17+
18+
function updateButton() {
19+
const icon = this.paused ? '►' : '❚ ❚';
20+
toggle.textContent = icon;
21+
}
22+
23+
function skip() {
24+
console.log('skipping');
25+
video.currentTime += parseFloat(this.dataset.skip);
26+
}
27+
28+
function handleRangeUpdate() {
29+
video[this.name] = this.value;
30+
}
31+
32+
function handleProgress() {
33+
const percent = (video.currentTime / video.duration) * 100;
34+
progressBar.style.flexBasis = `${percent}%`;
35+
}
36+
37+
function scrub(e) {
38+
const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
39+
video.currentTime = scrubTime;
40+
}
41+
42+
function makeFullScreen() {
43+
if (video.mozRequestFullScreen) {
44+
video.mozRequestFullScreen();
45+
} else if (video.webkitRequestFullScreen) {
46+
video.webkitRequestFullScreen();
47+
}
48+
}
49+
50+
video.addEventListener('click', togglePlay);
51+
video.addEventListener('play', updateButton);
52+
video.addEventListener('pause', updateButton);
53+
video.addEventListener('timeupdate', handleProgress);
54+
toggle.addEventListener('click', togglePlay);
55+
56+
skipButtons.forEach(button => button.addEventListener('click', skip));
57+
ranges.forEach(range => range.addEventListener('change', handleRangeUpdate));
58+
59+
let mousedown = false;
60+
progress.addEventListener('click', scrub);
61+
progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
62+
progress.addEventListener('mousedown', () => mousedown = true);
63+
progress.addEventListener('mousedown', () => mouseup = false);
64+
65+
fullScreen.addEventListener('click', makeFullScreen);

‎12 - Key Sequence Detection/index-START.html‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,25 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
4-
<meta charset="UTF-8">
5-
<title>Key Detection</title>
6-
<script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script>
5+
<meta charset="UTF-8">
6+
<title>Key Detection</title>
7+
<script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script>
78
</head>
9+
810
<body>
9-
<script>
10-
</script>
11+
<script>
12+
const pressed = [];
13+
const secretCode = 'moo';
14+
window.addEventListener('keyup', (e => {
15+
console.log(e.key);
16+
pressed.push(e.key);
17+
pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
18+
if (pressed.join('').includes(secretCode)) {
19+
cornify.add();
20+
}
21+
}));
22+
</script>
1123
</body>
24+
1225
</html>

0 commit comments

Comments
 (0)