HTML 입문 | HTML5 멀티미디어 | 비디오(video) 요소

비디오(video) 요소

HTML5 이전에는 웹 페이지에서 비디오(video)를 보여주기 위한 표준안이 없었다. 따라서 비디오를 삽입하기 위해서는 플래시(flash)와 같은 외부 플러그인(plug-in)에 의존해야만 했다.
하지만 HTML5에서는 <video>태그를 이용하여 웹 페이지에 비디오를 삽입하는 표준화된 방식을 제공한다.

<video>태그를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.

비디오 요소의 속성

예제

<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 비디오 파일 형식별 주요 웹 브라우저의 지원 여부는 다음 표와 같다.

HTML5 video 요소

HTML5 video 속성