HTML5 Video..
<head>
<meta charset="UTF-8">
<title>HTML5 Video</title>
</head>
<body>
<div>
<video autoplay loop controls id="thevideo" width="320" height="240">
<source src="muirbeach.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
<source src="muirbeach.webm" type='video/webm; codecs="vp8, vorbis"' >
<source src="muirbeach.ogg" type='video/ogg; codecs="theora, vorbis"' >
</video>
</div>
<div>
(Right-click to Control)
</div>
</body>
</html>
아주 기본적인 소스이며 video태그 안에 source태그가 여러개인것을 볼수 있다.
video에서 지원하는 비디오 형식은 한정적이며 브라우저 마다 지원 하는 형식이 서로 다르다.
그래서 각각 인코딩 된 파일들을 여러개로 주고 브라우저는 순차적으로 비디오를 로딩 하다가 지원하는 코덱에 맞는 영상을 플레이 하게 된다.(한국말이지만 제대로 이해가 될지..)
video에 여러 옵션이 있다.
'HTML5' 카테고리의 다른 글
| HTML5 Audio Element.. (0) | 2015.04.27 |
|---|---|
| 화면 해상도에 맞춰 페이지 변경.. (0) | 2015.03.13 |
| HTML5 drawImage().. (0) | 2014.12.24 |
| Html에서 Div와 TextArea의 줄바꿈. (0) | 2014.12.06 |
| HTML5 Modernizr대신 HTML5지원 여부 알아보기.. (0) | 2014.11.28 |
