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


비디오(video) 요소

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

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

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

파일 형식 미디어 타입 ie chrome firefox safari opera
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 비디오를 재생하기 전에 파일의 내용을 모두 불러올지를 명시함.