본문 바로가기

웹프로그래밍/HTML

HTML5 비디오태그 <video></video>

반응형

비디오 태그는 웹페이지에서 동영상을 볼 수 있게 만들어주는 기능을 수행한다. 

원래 HTML5 시대가 오기 전에는 비디오도 윈도 미디어 플레이어 또는 플래시와 같은 플러그인을 사용해서만 볼 수 있었다. 

하지만 HTML5 시대가 오면서 웹표준만으로 동영상을 볼 수 있게 되었다.


*유튜브는 플래시를 사용해서 동영상을 재생하게 설계되었지만 http://www.youtube.com/html5  에 들어가서 HTML5 기능을 실행하면 플래시 없이 동영상을 볼 수 있다.


video 태그의 속성

<video poster="http://placehold.it/640x360" width="640" height="360" controls="controls">

    <source src="Kalimba.mp4" type="video/mp4" />

    <source src="Kalimba.webm" type="video/webm" />

</video>


속성 이름

값 

설명 

src

URL 

비디오파일의 경로지정 

height 숫자 비디오의 높이를 지정
width 숫자 비디오의 너비를 지정
poster URL 비디오 준비중일 때의 이미지 파일 경로 지정
muted "muted", "", - 음소거 

controls

"controls", "" , -  

비디오 재생 도구를 출력할지 지정 

autoplay 

"autoplay", "", - 

비디오를 자동 재생할지 지정 

loop 

"loop", "", - 

비디오를 반복할지 지정 

preload

"none", "metadata", "auto" 

음악을 재생하기 전에 모두 불러올지 지정

none : 사용자가 비디오를 필요로하지 않을 것이라고 명시, 미리 다운로드 하지 않음

metadata : 사용자가 비디오를 필요로 하지 않을 것이지만, 기본정보(크기,첫프레임,오디오길이 등)는 가져온다.

auto : 사용자가 비디오를 필요로 하고 미리 다운로드를 한다 (기본값)

 


 *웹브라우저에서 지원하는 비디오파일 형식

 

 IE

크롬 

파이어폭스 

사파리 

오페라 

MP4(H.264+ACC)

O 

O 

X 

O 

X 

WebM(VP8+Vorbis)

X 

O 

O 

X

O 

OGV(Theora+Vorbis)

X 

O 

O 

X 

 


※ video.js 플러그인

웹브라우저마다 표시되는 video태그의 형태가 일관되지 않으므로 웹페이지를 디자인할 때 문제가 될 수 있다.

또한 IE8이하에서는 video 태그가 동작하지 않는다. 이러한 문제를 해결 할 수 있는 간단한 플러그인이 video.js플러그인 이다.

IE8에서는 자동으로 플래시에 담겨 동영상이 재생된다.


http://videojs.com

<!DOCTYPE HTML>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>video.js</title>

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet" />

<script src="http://vjs.zencdn.net/c/video.js"></script>

</head>

<body>

<video width="640" height="360" controls="controls" class="video-js vjs-default-skin" data-setup="{}">

    <source src="Wildlife.mp4" type="video/mp4" />

    <source src="Wildlife.ogv" type="video/ogv" />

</video>

</body>

</html>

반응형