[Javascript] video 태그 관련 명령어

1. 재생 / 일시정지

     - 재생 : play()

     - 일시정지 : pause()

 

2. 소리 조절 (0.0 ~ 1.0)

     - 소리 크기  : volume

 

3. 현재 상태 확인 (초 단위, 숫자를 입력할 경우 해당값 적용)

     - 현재 재생 시간 : currentTime

     - 총 재생 시간 : duration

 

4. 재생 속도 조절 (default 1.0)

     - 재생 속도 : playbackRate

 

5. 이벤트 처리

     - 비디오가 재생되었을 때 호출되는 이벤트 핸들러 : play

     - 비디오가 일시 정지되었을 때 호출되는 이벤트 핸들러 : pause

 

Ex ) id가 myVideo인 video 태그의 영상 제어

 

/********************** 1. 재생 **********************/
// 1-1. 재생
document.getElementById('myVideo').play(); // javascript
$('#myVideo').get(0).play(); // jQuery

// 1-2. 일시정지
document.getElementById('myVideo').pause(); // javascript
$('#myVideo').get(0).pause(); // jQuery

/********************** 2. 소리 조절 **********************/
// 예시 : 50%;
document.getElementById('myVideo').volume = 0.5; // javascript
$('#myVideo').get(0).volume = 0.5; // jQuery

/********************** 3. 현재 상태 **********************/
// 숫자를 입력할 경우 해당값 적용

// 3-1. 현재 재생 시간
document.getElementById('myVideo').currentTime; // javascript
$('#myVideo').get(0).currentTime; // jQuery

// 3-2. 총 재생 시간
document.getElementById('myVideo').duration; // javascript
$('#myVideo').get(0).duration; // jQuery

/********************** 4. 재생 속도 조절 **********************/
// 예시: 2배속
document.getElementById('myVideo').playbackRate = 2.0; // javascript 
// jQuery는 별도의 함수가 없음

/********************** 5. 이벤트 처리 **********************/
// 5-1. 재생 시 호출 이벤트 핸들러
document.getElementById('myVideo').addEventListener('play', function() {}); // javascript
$('#myVideo').on('play', function() {}); // jQuery

// 5-2. 일시정지 시 호출 이벤트 핸들러
document.getElementById('myVideo').addEventListener('pause', function() {}); // javascript
$('#myVideo').on('pause', function() {}); // jQuery