[HTML & javascript] Video 이벤트 및 함수

• target:  Video 이벤트 및 함수

 

---

• method: 

1. Properties

// <video id="video1"/> 기준
var video = $('#video1')[0];

video.autoplay = true;	// 자동 재생 여부
video.controls = true;	// 재생 컨트롤러 여부
video.defaultPlaybackRate = 1.0;	// video play시 기본 재생속도 설정
video.loop = true;	// video 자동 반복
video.muted = true;	// video 묵음 여부
video.paused = true;	// video 일시정지
video.volume = 0.75;	// 0~1 사이 (0: 음소거, 1: 최대)

if(video.ended) console.log('video ended');	// video 종료 여부

 

---

2. Method

// <video id="video1"/> 기준
var video = $('#video1')[0];

video.load();		// src에 설정한 영상 로딩
video.play();		// 로딩 완료한 영상 재생
video.pause();		// 영상 일시정지

 

---

 

3. Events

// <video id="video1"/> 기준
var video = $('#video1')[0];

// 이벤트 핸들러 속성 사용 : video.oncanplay = (e) => {};
video.addEventListener('canplay', (e) => {
	// 재생 가능이지만, 실제 재생할 수 있을지는 알 수 없음
});

// 이벤트 핸들러 속성 사용 : video.onended = (e) => {};
video.addEventListener('ended', (e) => {
	// 비디오 영상이 종료된 경우 발생
});

// 이벤트 핸들러 속성 사용 : video.onloadeddata = (e) => {};
video.addEventListener('loadeddata', (e) => {
	// 비디오 영상이 로딩 완료 후 이벤트 발생
});

// 이벤트 핸들러 속성 사용 : video.onpause = (e) => {};
video.addEventListener('pause', (e) => {
	// 영상을 일시정지 하는 경우 발생
});

// 이벤트 핸들러 속성 사용 : video.onplay = (e) => {};
video.addEventListener('play', (e) => {
	// 영상을 재생하는 경우 발생
	// paused 옵션이 true > false로 되거나, play() 함수 실행 또는 autoplay 속성이 토글된 경우 발생
});

// 이벤트 핸들러 속성 사용 : video.onplaying = (e) => {};
video.addEventListener('playing', (e) => {
	// 영상을 재생하는 경우 발생
    // 영상이 일시정지 또는 지연된 후 다시 재생 시 발생
});

// 이벤트 핸들러 속성 사용 : video.ontimeupdate = (e) => {};
video.addEventListener('timeupdate', (e) => {
    // 영상의 재생 시간 위치가 변경되는 경우, 지속 발생
});

// 이벤트 핸들러 속성 사용 : video.onvolumechange = (e) => {};
video.addEventListener('volumechange', (e) => {
    // 영상의 볼륨이 변경되는 경우, 발생
});

 

---

• warning:

 - video의 현재 재생시간이나, 재생시간이 변경되는 경우에 대한 이벤트는 존재하지만, 재생 위치 컨트롤 바를 컨트롤 해서 영상 재생 위치를 변경하는 부분에 대한 Method나 Event는 보이지 않음

 - 별도의 재생위치 변경 컨트롤러가 필요하며, 아래 게시글을 참조할 것

https://pu3vig.tistory.com/54

[HTML] Video 커스텀 컨트롤 버튼

 

---

• source:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volumechange_event

HTMLMediaElement: volumechange event - Web APIs | MDN