🎨 video-player

kirin.log·2021년 3월 4일

🪐 logic

play 기능과 stop & pause 기능 구현이 핵심
비디오 화면 과 play button 을 누르면 Play 기능 실현
play 기능이 실현 중 일때 ➡ play button은 pause button상태
❗ (pause 상태일 때 ➡ play button 상태)
stop button을 누르면 Stop 기능 실현 및 range bar 초기화
현재 재생 상태에 따라 range bar 활성화 && time stamp(경과시간) 활성화

🐸 html

<!DOCTYPE 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>Video player practice</title>
       
        <!-- video dafault poster -->
        <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 href="index.css" rel="stylesheet" />
    </head>
    <body>
        <div class="container">
            <h1>My video player</h1>
            <video src="bear.mp4" poster="poster.png"></video>
            <div class="control">
                <!-- 재생버튼 -->
                <button class="btn" id="play">
                    <i class="fa fa-play fa-2x"></i>
                </button>

                <!-- 중지버튼 -->
                <button class="btn" id="stop">
                    <i class="fa fa-stop fa-2x"></i>
                </button>

                <!-- 슬라이드 바를 조정하여 범위 내의 숫자를 선택할 수 있는 input 입력 필드 -->
                <input type="range" class="progress" min="0" max="100" step="0.1" value="0" />
                          <!-- step: <input> 요소에 입력할 수 있는 숫자들 사이의 간격을 명시 -->
                          <!-- value : <input> 요소의 초깃값을 명시 -->

                <!-- 경과시간 표시 -->
                <span id="timestamp">00:00</span>
            </div>
        </div>

        <script src="index.js"></script>
    </body>
</html>

🐸 css

@import url("reset.css");

body {
    background-color: linear-gradient(to right, orange, green);
}
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}
h1 {
    margin-bottom: 30px;
    font-size: 40px;
    font-weight: 900;
}
video {
    width: 50%;
    height: 50%;
    background-color: rgb(37, 37, 37);
    cursor: pointer;
}

.control {
    display: flex;
    justify-content: space-between;
    width: 50%;
    background-color: rgb(106, 4, 117);
    cursor: pointer;
}
.btn {
    margin: 3px;
    padding: 5px;
    color: #fafafa;
    background-color: rgb(171, 109, 230);
    font-size: 10px;
    border-radius: 5px;
}
.progress {
    width: 100%;
    cursor: pointer;
}
#timestamp {
    padding: 10px;
    color: #fafafa;
    font-weight: 900;
}

🐸 javascript

"use strict";

// (1) play & stop 기능 함수 생성
// (2) 비디오창 누르면 stop (한번 더 누르면 play) >> toggle 기능
// (3) play 버튼 누르면 재생 (한번 더 누르면 일시정지)
// (4) stop 버튼 누르면 range 처음으로
// (5) 재생 range에 따라 경과시간 upload

const playBtn = document.getElementById("play");
const stopBtn = document.getElementById("stop");
const video = document.querySelector("video");
const progress = document.querySelector(".progress");
const timestamp = document.getElementById("timestamp");

// play & stop 기능
function toggleVideoStatus(e) {
    // console.log(e.target);
    if (video.paused) {
        video.play();   // play() ➡ 영상 재생하는 메서드
    } else {
        video.pause();  // pause() ➡ 영상 중지하는 메서드
    }
}
video.addEventListener("click", toggleVideoStatus);
playBtn.addEventListener("click", toggleVideoStatus);

// play 버튼 누르면 일시정지 아이콘 생성
function updateIcon(e) {
    // console.log(e.target);
    if (video.paused) {      // paused : 미디어 재생 일시 정지 여부
        play.innerHTML = '<i class="fa fa-play fa-2x"></i>';
    } else {
        // 비디오가 중지되는 경우를 제외한 모든 경우(=재생)에 '일시정지'아이콘 들어가기
        play.innerHTML = '<i class="fa fa-pause fa-2x"></i>';
    }
}
❗ default 버튼은 'play' 버튼으로 되어있기 때문에, if 조건에 "pause 되었을 때, 일시정지 아이콘 넣어주기"를 해야한다. 
❗ 반대의 경우(video.played)로 하면 비디오가 멈춰도 계속 일시정지 아이콘이 떠있는다

playBtn.addEventListener("click", updateIcon);
video.addEventListener("click", updateIcon);
// 아래와 같이 eventListner를 걸어도 동일함
// video.addEventListener("play", updateIcon);
// video.addEventListener("pause", updateIcon);

// stop 버튼 누르면 range 처음으로
function stopVideo(e) {
    // console.log(e.target);
    video.currentTime = 0;
    // 비디오 현재 시간을 0초로 변경
    video.pause();
}
stopBtn.addEventListener("click", stopVideo);

//range 설정
video.addEventListener("timeupdate", (e) => {
    // "timeupdate" : currentTime이 변경될 때 발생하는 이벤트
    //console.log(e.target);
    progress.value = (video.currentTime / video.duration) * 100;
    // 현재 재생중인 시간  // 미디어의 재생 길이

    let mins = Math.floor(video.currentTime / 60); // 현재 시간을 60으로 나눈 몫
    if (mins < 10) {
        mins = "0" + String(mins);
    }

    let secs = Math.floor(video.currentTime % 60); // 현재 시간을 60으로 나눈 나머지
    if (secs < 10) {
        secs = "0" + String(secs);
    }
    timestamp.innerHTML = `${mins}:${secs}`;
});

// range bar 시간 설정
timestamp.addEventListener("change", (e) => {
    // console.log(e.target);
    video.currentTime = (+timestamp.value * video.duration) / 100;
    // (진행시간 더한값 X 전체 재생길이) / 100
});

kirin.log

boma91@gmail.com

이전 포스트

모던 자바스크립트 (5)

다음 포스트

🎨 video-player

🪐 logic

모던 자바스크립트 (5)

Node

0개의 댓글