javaScript-Project-video/script.js at main · jthinlay/javaScript-Project-video · GitHub

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
constplayer=document.querySelector('.player');
constvideo=document.querySelector('video');
constprogressRange=document.querySelector('.progress-range');
constprogressBar=document.querySelector('.progress-bar');
constplayBtn=document.getElementById('play-btn');
constvolumeIcon=document.getElementById('volume-icon');
constvolumeRange=document.querySelector('.volume-range');
constvolumeBar=document.querySelector('.volume-bar');
constspeed=document.querySelector('.player-speed');
constcurrentTime=document.querySelector('.time-elapsed');
constdurationTime=document.querySelector('.time-duration');
constfullscreenBtn=document.querySelector('.fullscreen');

functionshowPlayIcon(){
playBtn.classList.replace('fa-pause','fa-play');
playBtn.setAttribute('title','Pause');
}
functiontagglePlay(){
if(video.paused){
video.play();
playBtn.classList.replace('fa-play','fa-pause');
playBtn.setAttribute('title','Play');
}else{
video.pause();
showPlayIcon();
}
}

functiondisplayTime(time){
constminutes=Math.floor(time/60);
letseconds=Math.floor(time%60);
seconds=seconds>9 ? seconds : `0${seconds}`;
return`${minutes}:${seconds}`;
}

functionupdateProgress(){
progressBar.style.width=`${(video.currentTime/video.duration)*100}%`;
currentTime.textContent=`${displayTime(video.currentTime)} /`;
durationTime.textContent=`${displayTime(video.duration)}`;
}

functionchangeSpeed(){
console.log(speed.value);
video.playbackRate=speed.value;
}

functionsetProgress(e){
constnewTime=e.offsetX/e.srcElement.offsetWidth;
progressBar.style.width=`${newTime*100}%`;
video.currentTime=newTime*video.duration;
console.log(newTime);
console.log(video.duration);
}

letlastVolume=1;
functionchangeVolume(e){
letvolume=e.offsetX/e.srcElement.offsetWidth;
if(volume<0.1){
volume=0;
}
if(volume>0.9){
volume=1;
}
volumeBar.style.width=`${volume*100}%`;
video.volume=volume;

volumeIcon.className='';

if(volume>0.7){
volumeIcon.classList.add('fas','fa-volume-up');
}elseif(volume<0.7&&volume>0){
volumeIcon.classList.add('fas','fa-volume-down');
}elseif(volume===0){
volumeIcon.classList.add('fas','fa-volume-off');
}
lastVolume=volume;
}

functiontoggleMute(){
volumeIcon.className='';
if(video.volume){
lastVolume=video.volume;
video.volume=0;
volumeBar.style.width=0;
volumeIcon.classList.add('fas','fa-volume-mute');
volumeIcon.setAttribute('title','Unmute');
}else{
video.volume=lastVolume;
volumeBar.style.width=`${lastVolume*100}%`;
volumeIcon.classList.add('fas','fa-volume-up');
volumeIcon.setAttribute('title','Mute');
}
}

/* View in fullscreen */
functionopenFullscreen(elem){
if(elem.requestFullscreen){
elem.requestFullscreen();
}elseif(elem.webkitRequestFullscreen){/* Safari */
elem.webkitRequestFullscreen();
}elseif(elem.msRequestFullscreen){/* IE11 */
elem.msRequestFullscreen();
}
video.classList.add('video-fullscreen');
}

/* Close fullscreen */
functioncloseFullscreen(){
if(document.exitFullscreen){
document.exitFullscreen();
}elseif(document.webkitExitFullscreen){/* Safari */
document.webkitExitFullscreen();
}elseif(document.msExitFullscreen){/* IE11 */
document.msExitFullscreen();
}
video.classList.remove('video-fullscreen');
}

letfullscreen=false;

functiontoggleFullscreen(){
if(!fullscreen){
openFullscreen(player);
}else{
closeFullscreen();
}
fullscreen=!fullscreen;
}

video.addEventListener('timeupdate',updateProgress);
video.addEventListener('canplay',updateProgress);
video.addEventListener('ended',showPlayIcon);
playBtn.addEventListener('click',tagglePlay);
video.addEventListener('click',tagglePlay);

speed.addEventListener('change',changeSpeed);
progressRange.addEventListener('click',setProgress);
volumeRange.addEventListener('click',changeVolume);
volumeIcon.addEventListener('click',toggleMute);
fullscreenBtn.addEventListener('click',toggleFullscreen);