HTML5 - [13] audio 요소와 video 요소

HTML5 - [13] audio 요소와 video 요소

정리하기

(1) audio 요소의 속성

audio 요소의 속성

속성	설명
src	재생할 파일 경로
autoplay	웹 문서 로딩 시에 미디어 파일을 자동으로 재생할지 여부
controls	플레이어(재생 컨트롤의 집합) 표시 여부
loop	재생할 파일의 반복 여부
preload	웹 문서 로딩 시 파일의 로딩 상태 지정 (none, auto, meta)

controls, autoplay, loop 속성 → 별도의 속성 값을 지정하지 않아도 무방

(2) source 요소

미디어 요소(audio, video 요소)의 src 속성을 대신하여 다양한 포맷의 미디어 파일을 지정

• 미디어 요소의 자식 요소로서 여러 개 지정 가능 → 차례대로 source 요소를 실행하다가 브라우저에서 지원하는 포맷을 찾아서 재생
• 속성 → src, type, media

(3) 미디어 제어

메서드

메서드

메서드	설명
load()	미디어 파일을 로드함
play()	미디어 파일을 재생함
pause()	미디어 파일을 일시정지함

미디어 파일 제어 및 상태에 관련된 속성

미디어 파일 제어 및 상태에 관련된 속성

속성	설명
src	미디어 파일 경로 지정
currentSrc	재생 중인 미디어 파일의 URL 반환
currentTime	현재 재생 위치를 초 단위로 반환
duration	미디어 파일의 총 재생 시간을 초 단위로 반환
paused	일시 정지 상태인지의 여부 반환
defaultPlaybackRate	기본 재생 속도 지정
playbackRate	재생 속도 지정
ended	재생이 종료되어 있는 상태인지 여부 반환
autoplay	미디어 파일을 자동 재생되도록 지정
loop	반복 재생되도록 지정
controls	플레이어의 출력 여부 지정
volume	볼륨을 지정하거나 상태 반환
muted	음소거 상태 반환
error	오류 정보 반환
networkState	네트워크 접속 상태를 표시
readyState	미디어 파일의 다운로드 상태를 표시

미디어 관련 주요 이벤트

미디어 관련 주요 이벤트

이벤트	설명
play	미디어 파일의 재생이 시작되었을 때 발생
timeupdate	재생 중에 지속적으로 발생
waiting	다음 프레임의 다운로드를 대기할 때 발생
ended	재생이 종료되었을 때 발생
progress	미디어 파일을 로드할 때 지속적으로 발생
loadstart	미디어 파일의 로드를 시작할 때 발생
load	미디어 파일의 다운로드가 완료될 때 발생
error	미디어 파일을 재생/로드할 때 오류가 있을 경우 발생

이벤트 등록 및 처리

• var 변수 = document.getElementById('아이디');
• //처리할 이벤트 등록
• 변수.addEventListener("이벤트", 실행할_함수, false);
• function 실행할_함수 (e) {
•     //해당 이벤트에 따라 처리할 내용
• }

(4) video 요소의 속성

video 요소의 속성

속성	설명
src, autoplay, controls, loop, preload	☞ audio 요소의 속성과 동일
width, height	비디오의 너비/높이 지정
poster	비디오 데이터가 설정되어 있지 않거나 로드 하는 중에 보여줄 이미지 지정

source 요소도 적용 가능 → 코덱을 지정하여 보다 상세한 정보를 브라우저에게 제공

재생 구간 지정

• 재생할 특정 구간을 src 속성에 지정하여 재생 가능
• 지정 형식 → src="비디오파일#t=시간:분:초,시간:분:초"

(5) 비디오의 자막 처리 → track 요소

여러 언어나 비디오 설명을 제공하거나 시간이 지정된 텍스트 파일을 지정할 때 사용

속성

사각형 그리기

속성	설명
kind	텍스트 트랙의 종류 지정 값 → subtitles, captions, descriptions, chapters, metadata
src	텍스트 트랙 데이터 파일의 주소 지정
srclang	텍스트 트랙 데이터의 언어 지정
label	사용자에게 보이는 트랙의 제목 표시
default	기본 트랙을 지정

WebVTT(Web Video Text Tracks) 포맷

• WEBVTT
•  
• 00:00:02.000 --> 00:00:05.031
• 2초와 5초 사이에 표시될 자막 내용입니다.
•  
• 00:00:07.000 --> 00:00:15.000
• 7초와 15초 사이에 표시될 자막 내용입니다.