[유튜브 클론코딩] 8.1 Play Pause Functionality

8.1 Play Pause Functionality

🍔 assets > js > videoPlayer.js 파일을 만든다

그리고 이것을 사용할 수 있도록 main.js에서 videoPlayer.js 파일을 import 해준다.

import "../scss/styles.scss";

import "./videoPlayer";

↑ main.js

 

🍔 videoBlock.pug에 id를 따로 추가해준다

오직 자바스크립트에서만 사용하고 싶기 때문에 아이디를 추가하는 것이다.

mixin videoPlayer(video = {})

    .videoPlayer#jsVideoPlayer

        video(src=`/${video.src}`)

        .videoPlayer__controls 

            .videoPlayer__column

                span

                    i.fas.fa-volume-up

                span

                    |00:00 / 10:00

            .videoPlayer__column

                span#jsplayButton

                    i.fas.fa-play

            .videoPlayer__column

                span 

                    i.fas.fa-expand

↑ videoBlock.pug

 

🍔 videoPlayer.js 작성하기

videoPlayer.js로 와서 getElementById를 가지고 id를 가져와서 videoContainer에 할당한다.

(저 addEventListener 코드는 임시로 작성해본 것이다)

const videoContainer = document.getElementById("jsVideoPlayer");

videoContainer.addEventListener("click", () => false);

↑ videoPlayer.js

 

🔥🔥🔥그런데 이 경우 문제가 있다.

왜냐하면 자바스크립트 파일은 모든 페이지에 로드가 되는데 videoContainer가 있는 페이지에서는 문제가 없으나 다른 페이지에서는 videoContainer를 찾을 수 없기 때문에 addEventListener를 할 수가 없다.

 

이렇게 다른 페이지에서는 videoContainer를 찾을 수 없기 때문에 오류가 난다.

그래서 항상 이렇게 작성하는 습관을 들이면 좋다.

 

⭐init()을 이용해서 작성하는 습관을 들이자🎀

const videoContainer = document.getElementById("jsVideoPlayer");

const videoPlayer = document.querySelector("#jsVideoPlayer video");

function init(){

    

}

if(videoContainer){

    init();

}

↑ videoPlayer.js

만약 videoContainer가 존재한다면 init()을 실행한다고 하고 init()에다가 코드를 작성하는 것이다.

 

 

🍔 플레이버튼(▶)을 누르면 영상이 시작되게 하기

const videoContainer = document.getElementById("jsVideoPlayer");

const videoPlayer = document.querySelector("#jsVideoPlayer video");

const playBtn = document.getElementById("jsPlayButton");

function handlePlayClick(){

    if(videoPlayer.paused){

        videoPlayer.play();

    }else{

        videoPlayer.pause();

    }

}

function init(){

    playBtn.addEventListener("click", handlePlayClick)

}

if(videoContainer){

    init();

}

↑ videoPlayer.js

코드 설명 : 우선 videoContainer, videoPlayer, playBtn을 각각 가져오고

videoContainer가 존재할 때에만 init()을 실행하도록 한다.

init()함수 안에는 playBtn을 클릭했을 때 handlePlayClick 이 실행되도록 하고

handlePlayClick을 선언해주는데, MDN에서 알아낸 paused를 이용해서,

if(videoPlayer.paused) - videoPlayer가 멈춰있으면 play()메소드를 이용해서 비디오를 플레이하고 멈춰있지 않으면 pause()메소드를 이용해서 멈추도록 한다.

 

🍔 클릭하면 ▶ ↔  ⏸ 버튼 구현하기

const videoContainer = document.getElementById("jsVideoPlayer");

const videoPlayer = document.querySelector("#jsVideoPlayer video");

const playBtn = document.getElementById("jsPlayButton");

function handlePlayClick(){

    if(videoPlayer.paused){

        videoPlayer.play();

        playBtn.innerHTML = '<i class="fas fa-pause"></i>';

    }else{

        videoPlayer.pause();

        playBtn.innerHTML = '<i class="fas fa-play"></i>';

    }

}

function init(){

    playBtn.addEventListener("click", handlePlayClick)

}

if(videoContainer){

    init();

}

간단하게 이 코드만으로 1)영상이 멈춰있을 때 playBtn을 누르면 재생이 되면서 버튼 모양은 ⏸이 되도록 하기 2) 영상이 멈춰있지 않을때(재생중일때) playBtn을 누르면 정지가 되면서 버튼 모양은 ▶이 되도록 하기 기능이 구현된다.