결과
지난번에 만든 뮤직플레이어를 토대로 동영상 플레이어를 제작하였다.
HTML
<h1>video player</h1>
<video src="./video2/js.mp4" id="video" class="screen" poster="./video2/post.JPG"></video>
<div class="controls">
<button class="btn" id="play">
<i class="fas fa-play"></i>
</button>
<button class="btn" id="stop">
<i class="fas fa-stop"></i>
</button>
<input type="range" id="progress" class="progress" min="0" max="100" step="0.1" value="0">
<span id="timestamp" class="timestamp">00:00</span>
</div>
CSS
*{margin: 0; padding: 0; box-sizing: border-box;}
body{
background: rgb(219, 219, 219);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-height: 100vh;
}
h1{color: #fff; margin-bottom: 10px;}
.screen{
cursor: pointer;
width: 60%;
background: #000 !important;
}
.controls{
background: #333;
color: #fff;
width: 60%;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.controls .btn{
border: 0;
background: transparent;
cursor: pointer;
margin: 0 5px;
}
.controls .fa-play{color: #fff;}
.controls .fa-pause{color: #fff;}
.controls .fa-stop{color: #fff;}
.controls .timestamp{
color: #fff;
font-weight: bold;
margin-left: 10px;
}
script
const video=document.getElementById('video')
const play=document.getElementById('play')
const stop=document.getElementById('stop')
const progress=document.getElementById('progress')
const timestamp=document.getElementById('timestamp')
function toggleVideoStatus(){
if(video.paused){
video.play();
}
else{
video.pause();
}
}
function updatePlayIcon(){
if(video.paused){
play.innerHTML='<i class="fas fa-play"></i>'
}
else{
play.innerHTML='<i class="fas fa-pause"></i>'
}
}
function updateProgress(){
progress.value=(video.currentTime / video.duration) *100;
let mins=Math.floor(video.currentTime / 60)
if(mins<10){
mins='0'+String(mins);
}
let secs=Math.floor(video.currentTime % 60);
if(secs<10){
secs='0'+String(secs);
}
timestamp.innerHTML=`${mins}:${secs}`;
};
function setVideoProgress(){
video.currentTime=(progress.value * video.duration) / 100
}
function stopVideo(){
video.pause();
};
video.addEventListener('click',toggleVideoStatus);
video.addEventListener('click',updatePlayIcon);
video.addEventListener('play',updatePlayIcon);
video.addEventListener('puase',updatePlayIcon);
video.addEventListener('timeupdate',updateProgress);
play.addEventListener('click',toggleVideoStatus);
play.addEventListener('click',updatePlayIcon);
stop.addEventListener('click',stopVideo);
stop.addEventListener('click',updatePlayIcon);
progress.addEventListener('change',setVideoProgress)
#Script 01
변수는 각
video
=document.getElementById('video')
play
=document.getElementById('play')
stop
=document.getElementById('stop')
progress
=document.getElementById('progress')
timestamp
=document.getElementById('timestamp')
#Script 02
function toggleVideoStatus(){ if(video.paused){ video.play(); } else{ video.pause(); } }
함수
toggleVideoStatus
를 만들고if 조건문
을 만든다.video
가paused
이면play
아니면pause
한다.
#Script 03
function updatePlayIcon(){ if(video.paused){ play.innerHTML='<i class="fas fa-play"></i>' } else{ play.innerHTML='<i class="fas fa-pause"></i>' } }
play
버튼과pause
버튼이다.if 조건문
을 만들어video
가paused
이면play
버튼을video
가play
이면pause
버튼을 나타나게 한다.
#Script 04
function updateProgress(){ progress.value=(video.currentTime / video.duration) *100; let mins=Math.floor(video.currentTime / 60) if(mins<10){ mins='0'+String(mins); } let secs=Math.floor(video.currentTime % 60); if(secs<10){ secs='0'+String(secs); } timestamp.innerHTML=`${mins}:${secs}`; };
함수
updateProgress
를 만들고progress
이value
는currentTime
/duration
* 100 이다. 퍼센트 계산을 하여progress bar
를 만들어 재생바 역할을 하게 하기위함이다.
변수mins
는 수학메서드Math
를 사용하고floor
소수점 버림을 하여 분을 나타내기 위해currentTime
/ 60 을 한다.
if 조건문
을 만들어mins
를 두자리를 유지시켜야 하므로 10보다 작을 경우0
을string
으로 넣어주고sec
도 마찬가지로 넣어준다.
timestamp
에innerHTML
을 사용하여 변수를mins
:secs
를 넣어준다.
#Script 05
function setVideoProgress(){ video.currentTime=(progress.value * video.duration) / 100 } function stopVideo(){ video.pause(); }; video.addEventListener('click',toggleVideoStatus); video.addEventListener('click',updatePlayIcon); video.addEventListener('play',updatePlayIcon); video.addEventListener('puase',updatePlayIcon); video.addEventListener('timeupdate',updateProgress); play.addEventListener('click',toggleVideoStatus); play.addEventListener('click',updatePlayIcon); stop.addEventListener('click',stopVideo); stop.addEventListener('click',updatePlayIcon); progress.addEventListener('change',setVideoProgress)
setVideoProgress
를 만들고cureentTime
은progress.value
*video.duration
/ 100 을 한다. 즉 동일하게 % 위치를 표시하는것이다.
stopVideo
가 되면pause
를 한다.
그리고 나서addEventListener
click
과play
,pause
를 하여 비디오 컨트롤을 제어한다.