[JavaScript] 백그라운드 비디오 앱

백그라운드 비디오 앱

로드되기 전에 로딩중이라는 이미지가 보여졌다가 로드 되면 로딩중은 없어지고 동영상이 나오게 되는데 아래 버튼을 통해 재생과 중지하도록 만들겠습니다!

 

 

window가 로드될 때 로딩 중인 이미지를 css를 줘서 숨겨줍니다.

const preloaderEl = document.querySelector('.preloader');


window.addEventListener("load", () => {
    preloaderEl.classList.add("hide-preloader");
})

 

 

btn 클릭했을 때 만액에 btnEl 클래스명이 slide가 없으면 add를 추가해주고 비디오를 멈춰주고 클래스명이 slide이 있다면 slide를 없애주고 비디오를 플레이 되도록 합니다.

const btnEl = document.querySelector('.switch-btn');
const videoEl = document.querySelector('.video-container');

btnEl.addEventListener("click", () => {
    if(!btnEl.classList.contains("slide")) {
        btnEl.classList.add("slide");
        videoEl.pause();
    } else {
        btnEl.classList.remove("slide");
        videoEl.play();
    }
})