[JavaScript] 자바스크립트에서 스크립트로 영상 제어하기

195_자바스크립트에서 스크립트로 영상 제어하기

[적용]

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

---

[문법]

메소드	의미	반환
play()	재생	Promise
pause()	일시정지	없음

---

[내용]

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

 

HTML                                                                                                                                                              index.html

<div>
  <video id="myVideo" width="480" height="320" src="assets/sample.mp4"></video>
</div>
<div>
  <button id="btnPlay">재생</button>
  <button id="btnPause">정지</button>
</div>

자바스크립트로 HTML의 video 요소를 참조한다.

JavaScript                                                                                                                                                          main.js

const video = document.querySelector('#myVideo');

play()를 사용해 영상을 재생한다.

JavaScript                                                                                                                                                          main.js

video.play();

일시정지는 pause()를 사용하며, 영상 재생 바가 해당 위치에 멈춘다.

추후 해당 위치에서 다시 재생이 가능하다.

JavaScript                                                                                                                                                          main.js

video.pause();

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김