interactive
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 | 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>
'Design' 카테고리의 다른 글
| CSS 동위선택자, 상태선택자 (0) | 2012.12.06 |
|---|---|
| CSS 속성선택자 (0) | 2012.12.06 |
| HTML5 오디오태그 <audio></audio> (1) | 2012.12.05 |
| 이미지 대체 사용 팁! placehold.it (0) | 2012.12.05 |
| [CSS3] Transform (0) | 2012.12.03 |
