https://jakomo.co.kr/data/skin/front/jakomo/js/video_custom2.js?v=3

1
2document.addEventListener("DOMContentLoaded", function(){
3
4	const playerAll = document.querySelectorAll('.player');
5		playerAll.forEach( player => {
6			//console.log("player==>>>>>", player);
7			const video = player.querySelector('.viewer');
8			const progress = player.querySelector('.progress');
9			const progressBar = player.querySelector('.progress__filled');
10			const toggle = player.querySelector('.toggle');
11			const volume = player.querySelector('.volume__button');
12			
13			//video.removeAttribute('controls');
14			//console.log("duration=", video.duration);
15			
16			video.addEventListener('play', updateVideoBtn);
17			video.addEventListener('pause', updateVideoBtn);
18			video.addEventListener('ended', function(){
19				toggle.classList.remove("pause");
20				video.currentTime = 0;
21			});
22			
23			/* play button */
24			function updateVideoBtn(){
25				/*
26				const icon = this.paused ? 'play':'pause';
27				toggle.textContent = icon;
28				*/
29				//const icon = this.paused ? '<i class="ri-play-fill"></i>':'<i class="ri-pause-fill"></i>';
30				//toggle.innerHTML = icon;
31			}
32			toggle.addEventListener('click',togglePlay);
33			function togglePlay() {
34				if(video.paused) { 
35					/* 기타 비디오 정지 */
36					let videoAll = document.querySelectorAll('.viewer');
37					videoAll.forEach(etcVideo => {
38						etcVideo.pause();
39						toggle.classList.remove("pause");
40					});
41					let videoBtn = document.querySelectorAll('.toggle');
42					videoBtn.forEach(etcBtn => {
43						etcBtn.classList.remove("pause");
44					});
45					/* 기타 비디오 정지 끝 */
46					video.play();
47					console.log("duration=", video.duration, video.currentTime);
48					toggle.classList.add("pause");
49				} else {
50					video.pause();
51					toggle.classList.remove("pause");
52				}
53			}
54
55
56			// progressbar
57			function handleProgress() {
58				const percent = (video.currentTime / video.duration) * 100;
59				progressBar.style.flexBasis = percent + "%";
60			}
61
62			progress.addEventListener('click', scrub);
63			//progress.addEventListener('mousemove', scrub);
64
65			function scrub(e) {
66				const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
67				video.currentTime = scrubTime;
68			}
69
70			video.addEventListener('timeupdate', handleProgress);
71			
72			if(video.muted){
73				volume.innerHTML = '<i class="ri-volume-mute-line"></i>';
74			}
75			else{
76				volume.innerHTML = '<i class="ri-volume-down-line"></i>';
77			}
78
79			volume.addEventListener('click', volumeState);
80			function volumeState(){
81				if(video.muted){
82					video.muted = false;
83					volume.innerHTML = '<i class="ri-volume-down-line"></i>';
84				}
85				else{
86					video.muted = true;
87					volume.innerHTML = '<i class="ri-volume-mute-line"></i>';
88				}
89				//volume.textContent = icon;
90			}
91		})
92	});