비디오
비디오(video)
비디오(video) 요소
HTML5 이전에는 웹 페이지에서 비디오(video)를 보여주기 위한 표준안이 없었습니다.
따라서 비디오를 삽입하기 위해서는 플래시(flash)와 같은 외부 플러그인(plug-in)에 의존해야만 했습니다.
하지만 HTML5에서는 <video>태그를 이용하여 웹 페이지에 비디오를 삽입하는 표준화된 방식을 제공합니다.
<video>태그를 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.
요소 | |||||
---|---|---|---|---|---|
<video>태그 | 9.0 | 4.0 | 3.5 | 4.0 | 10.5 |
비디오 요소의 속성
예제
<video style="width:576; height:360" controls>
<source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
<source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
이 문장은 사용자의 웹 브라우저가 video 요소를 지원하지 않을 때 나타납니다!
</video>
control 속성은 재생, 정지 및 소리의 조절 등 비디오의 기본적인 동작을 조절할 수 있는 패널을 생성합니다.
또한, height와 width 속성을 이용하여 웹 브라우저에 삽입되는 비디오의 크기를 명시할 수 있습니다.
웹 브라우저는 여러 개의 <source>태그 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소를 사용합니다.
<video>태그 사이에 존재하는 텍스트는 해당 웹 브라우저가 <video>태그를 지원하지 않을 때만 화면에 표시됩니다.
autoplay 속성은 웹 페이지가 로드(load) 될 때 비디오를 자동으로 재생시켜 줄지 않을지를 설정합니다.
예제
<video style="width:576; height:360" controls autoplay>
<source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
<source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
이 문장은 사용자의 웹 브라우저가 video 요소를 지원하지 않을 때 나타납니다!
</video>
loop 속성을 설정하면, 비디오의 재생이 끝나도 계속적으로 반복해서 비디오를 재생합니다.
예제
<video style="width:576; height:360" controls loop>
<source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
<source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
이 문장은 사용자의 웹 브라우저가 video 요소를 지원하지 않을 때 나타납니다!
</video>
<track>태그는 비디오가 재생될 때 보일 자막이나 캡션 파일을 명시할 때 사용합니다.
예제
<video style="width:576; height:360" controls>
<source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
<source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
<track kind="subtitles" src="sample_subtitle_en.vtt" srclang="en" label="English">
<track kind="subtitles" src="sample_subtitle_fr.vtt" srclang="fr" label="Francais">
이 문장은 사용자의 웹 브라우저가 video 요소를 지원하지 않을 때 나타납니다!
</video>
kind 속성은 자막 문자열의 타입을 명시하며, srclang 속성은 해당 문자열의 언어 설정을 명시합니다.
label 속성은 사용자가 보게 될 라벨을 명시합니다.
HTML5 비디오 파일 형식
HTML5 표준이 공식적으로 지원하는 비디오 파일 형식은 MP4, WebM, OGV 뿐입니다.
- MP4 : Moving Picture Experts Group에 의해 개발되었으며, 비디오 코덱으로는 H.268, 오디오 코덱으로는 ACC를 사용합니다. 적은 용량으로도 고품질의 영상 및 음성을 구현할 수 있어 인터넷을 통한 스트리밍에 많이 활용되는 파일 형식입니다.
- WebM : 구글의 지원으로 개발된 개방형 공개 멀티미디어 파일 형식이며, 비디오 코덱으로는 VP8, 오디오 코덱으로는 Vorbis를 사용합니다.
- OGV : Theora Ogg라고도 불리며, Xiph 재단에 의해 MP3의 대안으로 개발된 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식입니다. 비디오 코덱으로는 Theora, 오디오 코덱으로는 Vorbis를 사용합니다.
HTML5 비디오 파일 형식별 주요 웹 브라우저의 지원 여부는 다음 표와 같습니다.
파일 형식 | 미디어 타입 | |||||
---|---|---|---|---|---|---|
MP4 | video/mp4 | ○ | ○ | ○ | ○ | ○ |
WebM | video/webm | Χ | ○ | ○ | Χ | ○ |
OGV | video/ogg | Χ | ○ | ○ | Χ | ○ |
HTML5 video 요소
요소 | 설명 |
---|---|
video | 비디오와 영화 등 비디오 파일을 명시함. |
source |
video 요소의 원본 파일에 대한 파일 형식 및 파일 주소를 여러 개 명시함. 웹 브라우저는 위쪽에서부터 순서대로 가장 먼저 인식되는 파일 형식과 파일 주소를 사용함. |
track | 비디오 플레이어에 대한 텍스트 자막을 명시함. |
HTML5 video 속성
속성 | 설명 |
---|---|
src | 비디오 파일의 경로를 명시함. |
height |
비디오 파일의 높이를 명시함. |
width | 비디오 파일의 너비를 명시함. |
controls | 비디오의 기본적인 동작을 조절할 수 있는 패널를 명시함. |
autoplay | 비디오의 자동 재생 여부를 명시함. |
loop | 비디오의 반복 재생 여부를 명시함. |
poster | 비디오가 아직 준비 중일때 불러올 이미지 파일의 경로를 명시함. |
preload | 비디오를 재생하기 전에 파일의 내용을 모두 불러올지를 명시함. |