[책] 자바스크립트 코드 레시피 278 - 179일차

영상 로딩하기

• 웹 사이트에 영상을 넣고 싶을 때
• 웹 사이트에 영상으로 효과를 넣고 싶을 때

구문

src 리소스 지정
controls 컨트롤 바 표시
autoplay 자동 재생
loop 반복
preload 영상 미리 불러오기
playsinline 인라인 재생 지정

실습

index.html

<video src="tide.mp4" width="500" height="auto"></video>
<div>1번 영상</div>

<video src="tide.mp4" width="500" height="auto" controls></video>
<div>2번 영상</div>

<video src="tide.mp4" width="500" height="auto" autoplay></video>
<div>3번 영상</div>

<video src="tide.mp4" width="500" height="auto" poster="tide_photo_.jpg" controls></video>
<div>4번 영상</div>

<video src="tide.mp4" width="500" height="auto" poster="none"></video>
<div>5번 영상</div>

<video src="tide.mp4" width="500" height="auto" autoplay playsinline muted></video>
<div>6번 영상</div>

스크립트로 영상 제어하기

• 영상의 재생을 관리하고 싶을 때

구문

play() 재생
pause() 일시정지

구문

video 요소의 play() 와 pause() 로 영상의 재생과 정지가 가능합니다.

실습

index.html

<div class="wrap-video">
  <video src="tide.mp4" id="myVideo" width="480" height="320"></video>
</div>
<div class="btn-video">
  <button class="btnVideoPlay">재생</button>
  <button class="btnVideoPause">정지</button>
</div>

---

scrip.js

const video = document.querySelector('#myVideo');
const btnPlay = document.querySelector('.btnVideoPlay');
const btnPause = document.querySelector('.btnVideoPause');
console.log(video, btnPlay, btnPause);

// 재생
btnPlay.addEventListener('click', () => {
  video.play();
});

// 정지
btnPause.addEventListener('click', () => {
  video.pause();
});