JavaScript

Video Player 만들기

결과

지난번에 만든 뮤직플레이어를 토대로 동영상 플레이어를 제작하였다.

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 조건문을 만든다. videopaused이면 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 조건문을 만들어 videopaused이면 play버튼을 videoplay이면 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 를 만들고 progressvaluecurrentTime / duration * 100 이다. 퍼센트 계산을 하여 progress bar를 만들어 재생바 역할을 하게 하기위함이다.
변수 mins는 수학메서드 Math를 사용하고 floor 소수점 버림을 하여 분을 나타내기 위해 currentTime / 60 을 한다.
if 조건문을 만들어 mins를 두자리를 유지시켜야 하므로 10보다 작을 경우 0string으로 넣어주고 sec도 마찬가지로 넣어준다.
timestampinnerHTML을 사용하여 변수를 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를 만들고 cureentTimeprogress.value*video.duration / 100 을 한다. 즉 동일하게 % 위치를 표시하는것이다.
stopVideo가 되면 pause를 한다.
그리고 나서 addEventListener clickplay , pause 를 하여 비디오 컨트롤을 제어한다.

0개의 댓글