🔍 설계도
🔍 완성 화면
🔍 HTML & CSS
-HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom-Video-Player</title>
<link
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="progress.css">
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="videoContainer">
<h1>Custom Video Player</h1>
<div class="video">
<video id="video" class="screen" poster="./img/poster.png" src="./videos/gone.mp4" muted></video>
</div>
<div class="controls">
<button id="play" class="btn"><i class="fa fa-play fa-2x"></i></button>
<button id="stop" class="btn"><i class="fa fa-stop fa-2x"></i></button>
<input type="range" id="progress" class="progress" min="0" max="100" value="0" step="1">
<span id="timestamp" class="timestamp">00:00</span>
</div>
</div>
</div>
</body>
</html>-CSS
body{
box-sizing: border-box;
margin: 0;
background-color: #777;
}
.videoContainer{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
.videoContainer h1{
color: #fff;
}
.videoContainer .video{
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: black;
padding: 4px;
width: 70%;
cursor: pointer;
}
.screen{
width: 100%;
}
.controls{
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 5px;
width: 70%;
}
.btn{
background-color: #333;
border: none;
cursor: pointer;
}
.fa.fa-play.fa-2x{
margin: 5px;
color: green;
}
.fa.fa-stop.fa-2x{
margin: 5px;
color: red;
}
.fa.fa-pause.fa-2x{
margin: 5px;
color: #fff;
}
.timestamp{
color: #fff;
margin: 10px;
}
@media(max-width : 800px){
.videoContainer .controls, .videoContainer .video{
width: 90%;
}
}🔍 자바스크립트
document.addEventListener("DOMContentLoaded", () => {
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");
//재생 or 일시정지 and 아이콘 업데이트
function playOrPauseVideo() {
if (video.paused) {
video.play();
play.innerHTML = `<i class="fa fa-pause fa-2x"></i>`;
} else {
video.pause();
play.innerHTML = `<i class="fa fa-play fa-2x"></i>`;
}
}
// 비디오 멈추기 버튼
function stopVideo() {
video.currentTime = 0;
video.pause();
play.innerHTML = `<i class="fa fa-play fa-2x"></i>`;
}
// input range 변경하기
function updateProgress() {
progress.value = (video.currentTime / video.duration) * 100;
let min = Math.floor(video.currentTime / 60);
let sec = Math.floor(video.currentTime % 60);
if( min < 10){
min = '0' + String(min);
}
if( sec < 10){
sec = '0' + String(sec);
}
timestamp.innerText = min + ':' + sec;
}
// progress 바 움직이면 비디오 화면 변경 되기
function updateTime(){
video.currentTime = (progress.value * video.duration) / 100;
}
video.addEventListener("click", playOrPauseVideo);
video.addEventListener("timeupdate", updateProgress);
play.addEventListener("click", playOrPauseVideo);
stop.addEventListener("click", stopVideo);
progress.addEventListener('change', updateTime);
});
video가 timeupdate 될때마다 progress 바가 변경되어야 하는 부분과,
progress 바를 움직일때 비디오의 재생화면을 변경 시켜줘야하는 부분이 좀 어려웠다.
비디오의 시간이 update 될때마다 input range 값이 변경이 되어야 하는거니
비디오 현재 시간이 30초, 재생시간이 60초라고 가정 했을때, input의 value는 50이 되어야 한다.
그렇기때문에 progress.value = (video.currentTime / video.duration) * 100; 라는 식이 필요하다.
또한 progress 바를 움직이면 video 의 currentTime 이 변경되어서 화면이 바뀌어야한다.
비디오의 현재 시간이 30초, 재생시간이 60초일때, progress의 value는 50인거니
총 재생시간과 input의 value 값을 서로 곱해주어서 100으로 나눠주면 비디오의 현재 시간 값이 나온다.
https://brgndy.me/ 로 옮기는 중입니다 :)