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>

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 10 beta 는 아직 설치를 안해봤으므로 설치하고 업데이트 하겠습니다. ㅡㅡ')

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">
<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>
<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>
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

+ Recent posts

티스토리툴바