티스토리 뷰
<video> 태그
▷ 비디오 재생
▷ 속성
＊ <audio> 태그의 속성을 그대로 사용
＊ src, autoplay, controls, loop, muted, preload
＊ width="픽셀", height="픽셀"
→ 비디오 콘텐츠가 표시될 영역의 크기(폭, 높이)
＊ poster="URL"
→ 지정한 비디오 데이터가 설정되어 있지 않거나 비디오가 로딩되는 동안에 보여줄 이미지를 지정
비디오 파일 형식
▷ 웹에서 주로 사용되는 비디오 형식
MP4 (*.mp4) | WebM (*.webm) | Ogg (*.ogv) |
MPEG-4에서 규정된 비디오 파일 형식 H.264 비디오 코덱 AAC 오디오 코덱 | 구글이 개발한 고화질 영상 압축 형식 VP8 비디오 코덱 Vorbis 오디오 코덱 | 멀티미디어 표현을 위한 공개 소스 기반의 파일 형식 Theora 비디오 코덱 Vorbis 오디오 코덱 |
브라우저별 지원 비디오 파일 형식
▷ 각 브라우저/버전마다 지원되는 비디오 파일 형식이 다름
오디오 형식 | 브라우저 | ||||
크롬 52 | IE 11 | 파이어폭스 48 | 오페라 37 | 사파리 9.1 | |
MP4 | ○ | ○ | ○ | ○ | ○ |
WebM | ○ | X | ○ | ○ | X |
Ogg | ○ | X | ○ | ○ | X |
<source> 태그를 사용한 비디오 재생
비디오 재생 구간 지정
▷ 미디어 콘텐츠를 재생할 때 특정 구간을 지정하여 재생
＊ <audio>/<video> 또는 <source> 태그의 src 속성 이용
☞ src="파일명#t=[시작시간][,종료시간]"
☞ 시간 표시 형식 → 시:분:초
#t=[시:분:초][,시:분:초] | 설명 |
src="video.mp4#t=1:20:32, 2:05:00" | 1시간20분32초~2시간5분까지 재생 |
src="video.mp4#t=10, 20" | 10초~20초까지 재생 |
src="video.mp4#t=,10" | 처음부터 10초까지 재생 |
src="video.mp4#t=20" | 20초부터 재생 |
자막 처리를 위한 <track> 태그
▷ 여러 언어나 비디오 설명을 제공하거나 또는 자막이나 캡션 같이 시간이 지정된 텍스트 파일을 지정
＊ <audio>/<video> 태그의 하위 태그로 사용
<track> 태그
▷ 속성
＊ src="URL" → (필수항목) 텍스트 트랙 파일(*.vtt)의 URL을 지정
＊ kind="속성값" → 텍스트 트랙의 종류를 지정 (기본: subtitles)
＊ label="텍스트" → 사용자가 읽을 수 있는 트랙의 제목을 지정
＊ srclang="언어코드" → 텍스트 트랙 데이터의 언어를 지정(kind="subtitles"이면 필수 지정)
＊ default → 사용자가 별도의 트랙을 지정하지 않는 경우 기본 트랙으로 활성화되어야 함을 표시
<track> kind 속성
▷ 속성값의 종류
＊ subtitles → 비디오의 자막을 정의 (대화를 글로 옮기거나 번역한 것. 소리는 들리지만 언어를 이해할 수 없는 경우에 적합)
＊ captions → 대화나 사운드 효과를 글로 옮기거나 번역한 것(소리를 또렷하게 알아들을 수 없는 청각이 약한 사람에게 적합)
＊ descriptions → 비디오 내용에 대한 텍스트 형식의 설명을 정의(시각 장애를 가진 사람에게 적합)
＊ chapters → 장의 제목으로 미디어 자원을 탐색하기 위한 것
＊ metadata → 스크립트에서 사용하기 위한 내용을 정의(브라우저에는 표시되지 않음)
트랙 파일의 형식
▷ WebVTT(Web Video Text Tracks) 형식 (https://w3c.github.io/webvtt/)
＊ UTF-8 형식의 텍스트 파일
▷ 예제에서 사용할 "video_track.vtt" 파일
자막 처리의 예_인터넷 익스플로러
다중 트랙의 사용
▷ default 속성을 사용해서 하나의 트랙을 기본으로 지정
＊ 여러 트랙을 사용하는 경우 사용자가 언어를 지정/선택하지 않는 경우를 대비
