forked from wesbos/JavaScript30
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathscripts.js
More file actions
99 lines (81 loc) · 2.82 KB
/
scripts.js
File metadata and controls
99 lines (81 loc) · 2.82 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
const player = document.querySelector('.player');
const video = player.querySelector('.viewer');
const toggle = player.querySelector('.toggle');
const skipBtn = player.querySelectorAll('[data-skip]');
const range = player.querySelectorAll('input[type=range]');
const progress = player.querySelector('.progress');
const filled = player.querySelector('.progress__filled');
const fullscreen = player.querySelector('.fullscreen');
toggle.addEventListener('click', togglePlay);
fullscreen.addEventListener('click', fullscreenToggle);
video.addEventListener('click', togglePlay);
video.addEventListener('pause', updateButton);
video.addEventListener('play', updateButton);
video.addEventListener('load', handleProgress);
video.addEventListener('timeupdate', handleProgress);
let mouseDown = false;
progress.addEventListener('click', setPosition);
progress.addEventListener('mousedown', ev => mouseDown = true);
progress.addEventListener('mouseup', ev => mouseDown = false);
progress.addEventListener('mousemove', ev => {mouseDown && setPosition(ev)});
function setPosition(ev){
let pos = ev.offsetX/progress.offsetWidth;
filled.style.flexBasis = `${pos*100}%`;
video.currentTime = pos*video.duration;
}
skipBtn.forEach(btn => {
btn.textContent = btn.dataset.skip+'s';
btn.addEventListener('click', skip)
});
function handleProgress(){
let progress = this.currentTime/this.duration*100;
filled.style.flexBasis = `${progress}%`
}
range.forEach(item => {
item.addEventListener('change', rangeChange);
// item.addEventListener('mousemove', rangeChange);
});
function rangeChange(){
let method = this.name;
video[method] = this.value;
}
function skip(){
let step = parseFloat(this.dataset.skip);
video.currentTime += step;
}
function togglePlay(){
video.paused ? video.play() : video.pause();
}
function updateButton(ev){
let icon = ev.type === 'pause' ? '►' : '■';
toggle.textContent = icon;
}
let body = document.body;
document.addEventListener('fullscreenchange', handlerFullscreenchange);
document.addEventListener('mozfullscreenchange', handlerFullscreenchange);
document.addEventListener('webkitfullscreenchange', handlerFullscreenchange);
function handlerFullscreenchange(){
body.classList.toggle('fullscreen');
}
function fullscreenToggle(){
var elem = document.body
if (!body.classList.contains('fullscreen')) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
}else{
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}