비디오 태그는 웹페이지에서 동영상을 볼 수 있게 만들어주는 기능을 수행한다.
원래 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 |
O |
※ video.js 플러그인
웹브라우저마다 표시되는 video태그의 형태가 일관되지 않으므로 웹페이지를 디자인할 때 문제가 될 수 있다.
또한 IE8이하에서는 video 태그가 동작하지 않는다. 이러한 문제를 해결 할 수 있는 간단한 플러그인이 video.js플러그인 이다.
IE8에서는 자동으로 플래시에 담겨 동영상이 재생된다.
<!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>
'웹프로그래밍 > HTML' 카테고리의 다른 글
| 모바일 웹 개발시 유용한 팁 (0) | 2015.09.04 |
|---|---|
| (Chrome) ID/Password 자동 완성 방지 (0) | 2015.08.03 |
| HTML5 오디오태그 <audio></audio> (0) | 2015.04.24 |
| HTML escape 문자 (0) | 2015.04.09 |
| 크롬 웹브라우저에서 input 클릭할 경우 외곽테두리가 생기는 경우 (0) | 2015.03.12 |