[38JS] #9 영상 배경 만들기

38가지 자바스크립트&리액트 튜토리얼

★최종 결과물

 

 

0. 작업 개요

영상으로된 백그라운드를 만들고, 해당 영역 내에서 재생과 정지를 컨트롤 할 수 있는 컨트롤러가 있어야 한다.

샘플영상으로 http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4 사용 예정.

 

 

---

 

1. HTML

백그라운드로 영상을 반복/자동 재생 하려면, 

autoplay 속성과 muted, 그리고 loop 속성을 추가하면 된다.

<section class="video_section">
    <video autoplay muted loop>
        <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4 ">
    </video>
    <div class="controller">
        <button type="button">Play</button>
        <button type="button">Pause</button>
    </div>
</section>

 

2. CSS

.video_section {
    width: 100%;
    height: 600px;
    position: relative;
    overflow: hidden;
}

.video_section video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 100%;
    object-fit: cover;
}

.video_section .controller {
    position: absolute;
    bottom: 5%;
    right: 5%;
    display: flex;
}

.video_section .controller button {
    border: none;
    background-color: #000;
    color: #fff;
    padding: 5px 15px;
    margin: 0 5px;
    cursor: pointer;
}

.video_section .controller button:hover {
    background-color: orange;
}

 

3. JS

이번엔 따로 스크립트는 어려울건 없고, html5의 video 태그를 이용하면

play(), pause() 등의 video DOM을 제어할 수 있는 다양한 매서드가 제공된다.

const video = document.querySelector('.video_section video');
const playBtn = document.querySelector('.video_section .controller button:first-child');
const pauseBtn = document.querySelector('.video_section .controller button:last-child');

playBtn.addEventListener('click', () => {
    video.play();
});

pauseBtn.addEventListener('click', () => {
    video.pause();
});