Video Element 는 HTML 5 에서 관심이 주목되고 있는 새롭게 추가된 element 들 중 하나입니다.
지금까지 웹페이지에 동영상을 삽입하고 싶을때는 object Element 나 Embed Element 를 사용하여 Flash, media player 와 같은 플러그인을 이용하여야 했습니다.
그러나, 이제 HTML 5 에서는 플러그인없이도 동영상을 웹페이지에 쉽게 삽입할 수 있습니다.
그리고, 다음과 같이 object, embed Element 와는 다른 점이 있습니다.
- 재생, 일시중지 등 Web Browser 자체 Control 이 있습니다.
- Source 에 파일을 여러개를 지정할 수 있어서 Web Browser 의 지원 Format 에 따라 표시 할 수 있습니다.
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 5 Video 예제</title>
</head>
<body>
<video width="320" height="240" controls="controls">
<source src="http://www.w3schools.com/html5/movie.mp4" type="video/mp4" />
<source src="http://www.w3schools.com/html5/movie.webm" type="video/webm" />
<source src="http://www.w3schools.com/html5/movie.ogg" type="video/ogg" />
<p>Your browser does not support the video tag.</p>
</video>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 5 Video 예제</title>
</head>
<body>
<video width="320" height="240" controls="controls">
<source src="http://www.w3schools.com/html5/movie.mp4" type="video/mp4" />
<source src="http://www.w3schools.com/html5/movie.webm" type="video/webm" />
<source src="http://www.w3schools.com/html5/movie.ogg" type="video/ogg" />
<p>Your browser does not support the video tag.</p>
</video>
</body>
</html>
(참고 : http://www.w3schools.com)
rowser 별 지원 비디오 코덱을 위 Markup 을 바탕으로 아래 표에 간략히 정리해 보았습니다.
| IE 9 | FireFox 3.6.17 | Opera 11.11 | Chrome 12.0.742 | Safari 5.0.5 | |
| Ogg | X | O | O | O | X |
| MPEG 4 | O | X | X | O | O |
| WebM | △ | X | O | O | X |
IE 9 에다가 WebM 란에는 "△" 표시를 했는데 이유는요...
기본적으루다가 지원을 하는 것이 아니고...
코난님께서도 소개해주신바 있는 글인데요..
http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx
를 확인해 보시면 알 수 있듯이...
webM Componenent 를 설치하시고 Refresh 를 하셔야 보실 수 있을 겁니다.
^^
아래 이미지는 설치 과정입니다.
그 해당싸이트는 위와같이 접근 할 수도 있습니다.
http://ie.microsoft.com/testdrive/
클릭해보면.. 아래 페이지로 이동합니다.
다시 다운 받을수 있는 곳으로 이동을 합니다.
확인하시고요...
설치가 다 끝났나 봅니다.
아... 인제 보이네요... ^^
그럼 이번에는 각 Web Browser 마다 제공하는 기본 Control 의 모양을 살펴보죠.
IE 의 모양입니다.
FireFox 의 모양입니다.
Safari 의 모양입니다.
각 Web Browser 마다 특색이 나타나는 것을 확인해 볼 수 있습니다.
이제 Video Element 를 사용하는 방법을 알아보도록 하겠습니다.
<video src="sqler.mp4" loop="loop">
<p>이 문장이 보인다면 video Tag 를 지원하지 않는 Web Browser 를 사용하고 계시는 겁니다.</p>
</video>
| 속성 | 설명 |
| controls | 재생 Control 표시를 제어합니다. |
| autoplay | 동영상이 Loading 되면 곧바로 재생을 시작합니다. |
| autobuffer | 이 속성을 사용하게 되면 사용하기 전부터 다운로드가 진행됩니다. 사용자가 재생할 때쯤이면 동영상이 어느 정도 다운로드가 된 상태일 것입니다. |
| poster | 동영상이 Download 중이거나 Buffering 중에 나타낼 이미지를 지정합니다. |
| loop | 동영상을 반복 재생합니다. |
| width | 동영상의 너비를 지정합니다. |
| height | 동영상의 높이를 지정합니다. |
하지만, Web Browser 마다 지원하는 동영상이 다르므로 아래 Markup 처럼 둘 이상의 여러 포맷을 준비해 두어 Source Element 를 이용하여 모든 Web Browser 에서 재생가능하도록 해야할 것입니다.
<video controls=controls poster="image/poster/sqler.png">
<source src="media/video/sqler.ogg" type="video/ogg">
<source src="media/video/sqler.mp4" type="video/mp4">
<object data="media/video/sqler.mov">
<source src="media/video/sqler.mp4" type="video/mp4">
<object data="media/video/sqler.mov">
<p>이 문장이 보인다면 HTML 5 의 video Tag 를 지원하지 않는 Web Browser 를 사용하고 계시는 겁니다.</p>
</object>
</video>
이런 Video Element 는 javascript 를 사용하여 자유롭게 동영상을 조작할 수 있습니다.
너무 간단하긴 하지만 아래와 같은 arkup 으로 Web Browser 가 제공하는 Control 이 아닌 사용자가 직접 제작할 수 있는 Control 을 제작해 보았습니다.
<video id="vdo" src="media/video/sqler.ogg" poster="image/poster/sqler.png">
<p>이 문장이 보인다면 HTML 5 의 video Tag 를 지원하지 않는 Web Browser 를 사용하고 계시는 겁니다.</p>
</video>
<p>
<p>이 문장이 보인다면 HTML 5 의 video Tag 를 지원하지 않는 Web Browser 를 사용하고 계시는 겁니다.</p>
</video>
<p>
<button onclick="document.getElementById('vdo').pause()">Pause</button>
<button onclick="document.getElementById('vdo').play()">Play</button>
<button onclick="document.getElementById('vdo').currentTime = 0">|<</button>
<button onclick="document.getElementById('vdo').currentTime += 5">>></button>
</p>
<script>
<script>
var vdo = document.getElementById('vdo');
if(vdo != null && vdo.addEventListener)
{
vdo.addEventListener(
'ended',
function() {
alert('The video has ended.');
},
false);
}
</script>
아래와 같이 외부 Control 을 확인하실수 있습니다.
이 상으로 간단하게 Video Element 를 사용하는 방법에 대해서 간단하게 살펴보았습니다.
동영상 조작을 위한 외부 Contorl 들을 제작하기에도 그리 어렵지 않을 것이라는 생각이 드네요...
그런 생각은 정작 만들면 사라질 수도 있겠지만 말입니다.
다음은 Audio Element 에 대해서 살펴보기로 하겠습니다.
행복한 고수되셔요...
woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
PS) www.w3schools.com 사이트를 추가적으로 참조하였음을 말씀드립니다.
반응형
'Web > HTML 5' 카테고리의 다른 글
| [HTML 5] 10. Canvas Element (2) | 2011.06.18 |
|---|---|
| [HTML 5] 9. Audio Element (0) | 2011.06.14 |
| [HTML 5] 7. Rich Text Edit API (0) | 2011.06.08 |
| [HTML 5] 6. Strong Web Form (0) | 2011.06.05 |
| [HTML 5] 5. Sementic Element (2) (1) | 2011.06.01 |
