Video 엘리먼트의 속성과 이벤트 정리
Video 엘리먼트
기본 구조
1
2
3
<video poster="thumbnail.png" autoplay controls loop playsinline>
<source src="/media/cc0-videos/flower.mp4" type="video/mp4" />
</video>
속성
autoplay
비디오가 데이터 로드를 완료하기 위해 중지하지 않고 재생할 수 있는 가장 빠른 시점에 자동으로 재생
브라우저 정책상 autoplay는 muted=true 상태에서만 가능!
controls
소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume)을 할 수 있는 컨트롤러를 제공
loop
true면 동영상 재생이 마친 후(동영상의 마지막에 도달하면) 자동으로 리플레이
playsInline
IOS 자동재생 지원을 위한 속성
IOS에서 비디오를 보면 전체화면으로 나오는 이슈가 있어서 playsInline 속성을 추가해서 방지한다.
duration
비디오의 총 길이(초)
currentTime
비디오 현재 재생 시간(초)
seeking
미디어가 새로운 위치를 찾는 과정에 있는지 여부를 나타내는 반환 값
paused
비디오가 일시정지 되었는지 여부
muted
비디오에 포함되어 있는 오디오의 음소거 상태. 기본 값은 false
volume
비디오에 포함되어 있는 오디오의 볼륨값
poster
사용자가 동영상을 재생하거나 탐색하기 전까지 출력되는 포스터 프레임 주소
poster 값이 없으면 첫 번째 프레임이 사용 가능하게 될 때까지 아무것도 출력되지 않다가, 가능하게 되면 첫 번째 프레임을 포스터 프레임으로 출력
이벤트
loadedmetadata
비디오의 duration 등의 정보를 담은 메타데이터가 로드되면 시작
canPlay
비디오가 전부 로드되진 않았지만 비디오를 재생할 수 있을 때 발생
프로그레스바 등으로 currentTime을 조작한 이후에도 발생
플레이어 커스텀에서 canPlay 이벤트가 발생할 때 로딩바를 제거해준다.
play
paused 값이 false로 변할 때, 혹은 autoplay 값이 true일 때 발생
비디오 로드는 비동기적이기 때문에 play() 함수를 실행할 때 promise를 사용하여 에러를 방지한다.
1
2
3
4
5
6
play = () => {
const promise = video.play()
if (promise !== undefined) {
promise.then(() => {}).catch((error) => {})
}
}
pause
일시정지 요청이 처리되고 paused 값이 true로 변할 때 발생
비디오가 play 된 후 pause 순서로 실행해야 하기 때문에 promise를 사용하여 에러를 방지한다.
1
2
3
4
5
6
pause = () => {
const promise = video.pause()
if (promise !== undefined) {
promise.then(() => {}).catch((error) => {})
}
}
timeupdate
currentTime이 업데이트 될 때마다 발생.
※ timeupdate 이벤트에 throttle을 걸면 비동기가 돼서 비디오 일시정지시 바로 정지되지 않고 timeupdate 되는 버그가 발생한다!
seeking
탐색 작업이 시작될 때 발생
currentTime 조작 시에도 발생
seeked
탐색 작업이 완료되면 발생
currentTime 조작 후 발생
플레이어 커스텀에서 seeked 이벤트가 발생할 때 로딩바를 제거해준다.
seekable
미디어 범위를 나타내는 TimeRanges 객체를 반환하며 이 값으로 seek 가능한지 체크할 수 있다.
seek가 불가능한 경우 this.video.seekable.start(0)와 this.video.seekable.end(0) 값이 0으로 나온다.
일반 웹 URL이 아닌 다운로드 URL을 비디오 src로 넣은 경우 seek가 불가능하므로 참고
waiting
일시적인 데이터 부족으로 인해 재생이 중지되고 버퍼링이 필요한 경우 발생
플레이어 커스텀에서 waiting 이벤트가 발생할 때 로딩바를 노출해준다.
volumeChange
비디오에 포함되어 있는 오디오의 볼륨이 변경되면 발생
플레이어 커스텀에서 볼륨 조절 input에도 change 이벤트가 걸려있지만, 비디오 엘리먼트에 volumeChange 이벤트를 또 추가해주는 이유는 모바일 볼륨 조절 대응을 위해서이다.
ended
비디오 재생이 끝에 도달하거나 더 이상 데이터가 없어서 재생이 중지될 때 발생
주의 : video.currentTime === video.duration 이지만 ended 값이 false인 경우도 있음
error
오류로 인해 리소스를 로드할 수 없을 때 발생
참고사이트
HTMLMediaElement
video: 비디오 삽입 요소
video-react
DOMException - The play() request was interrupted
[HTML5] Audio 태그와 Video 태그 이벤트 :: 마이구미