vidia video element
현재 우리가 동영상을 접하게 되는 웹상의 플레이어들 (유튜브, 다음, 티스토리 등등) 의 대부분은 플래쉬 기반 포맷을 제공합니다
우리가 흔히 말하는 플짤도 플레쉬 짤방의 준말이죠, 그만큼 플래쉬를 이용한 동영상 플레이어가 차지하는 비중이 지대하다 할 수 있습니다
지금까지 동영상을 웹상에 적용하기 위해 object 나 embed 를 사용하여 플래쉬 또는 미디어플레이어 와 같은 플러그인을 이용해 왔는데
HTML 5 에서의 video 태그는 네이티브 태그로서 별도의 외부 프로그램의 도움없이 독립적인 방식으로 동영상을 재생하게 됩니다
동영상 플레이를 이유로 이유로 억지로 설치해야만 했던 액티브X와 같은 프로그램이나 플로그를 더이상 설치할 필요가 없다는 소리죠
HTML 5 에서 이와같은 태그를 선보인것은 보다 웹표준에 맞는 그에 근거하는 마크업을 위한 새로운 시도가 아닐까 합니다
우리나라의 경우는 다른 나라보다 플래시의 사용빈도가 현저히 월등한 수준이나 외국의 경우 플래시 기능을 지향하고
웹표준에 맞추어 이미지나 플래시 보다는 웹표준에 맞는 시멘틱 마크업을 적용해 나가고 있습니다
우리나라에서도 조금씩 웹표준에 맞는 마크업을 시도하는 추세로 HTML 5 이 나옴과 동시에
보다 명확한 웹표준 마크업을 위해 발전해 나가고 있다고 생각합니다
1 video
액티브X나 <embed>,<object>의 사용없이 간편하게 동영상을 재생할 수 있는 기능으로
기본적인 비디오 엘리먼트의 속성 및 값은 다음과 같습니다
|
속성 (Attribute) |
값 (Value) |
설명 (Description) |
|
N controls |
Boolean (true/false) |
각 브라우저 고유의 컨트롤 바를 표시 |
|
N autoplay |
Boolean (true/false) |
동영상 파일이 로드되는 즉시 자동으로 재생 |
|
N loop |
Boolean (true/false) |
동영상 재생이 끝나면 처음부터 다시 반복, 반복 재생 획수 지정 |
|
N src |
URL |
동영상 파일의 경로를 지정 |
|
N poster |
IMG URL |
재생할 동영상이 로드 중이거나 버퍼링 중일때 보여질 이미지 |
|
N preload |
Auto, None, Metadata |
동영상 파일을 다운로드하여 재생하게끔 하는 방식 auto - 자동으로 다운로드 none - 사용자가 컨트롤을 조작하지 전까지 다운금지 metadata - 메타데이터를 가져오며 사용자가 컨트롤을 조작하면 실제 비디오 부분을 다운
|
|
N width |
Pixels |
재생할 동영상의 가로(넓이) 크기 |
|
N height |
Pixels |
재생할 동영상의 세로(높이) 크기 |
다음은 HTML 5 를 사용함에 있어 아직 해결하지 못한 코덱에 관한 문제들입니다
|
브라이저 (Browser) |
H.264 + AAC + MP4 |
WebM |
Theora + Vorbis + Ogg |
|
파이어폭스 3.6 |
|
√ |
√ |
|
오페라 10.63 |
|
√ |
√ |
|
구글 크롬 8.0 |
√ |
√ |
√ |
|
애플 사파리 5.0.3 (with 쿽타임) |
√ |
|
|
|
마이크로 소프트 익스 9 beta |
√ |
√ |
|
브라우저마다 사용하는 코덱은 다음과 같습니다
|
브라이저 (Browser) |
코덱 (Codec) |
|
Microsoft + Apple |
H.264 Codec |
|
Firefox + Opera |
Ogg Theora Format |
|
|
VP8 Video Codec |
현재 주 대표 브라우저들이 자체 비디오 코덱을 사용하고 있기때문에 그야말로 표준 코덱이 존재하지 않습니다
하여 각 브라우저마다 사용하는 비디오 코덱이 다릅니다 video 태그가 생겨났다고 해도 코덱에 관한 문제가 아직도 남아있다는 말이 됩니다
2 기본적인 비디오 태그 작성법
<video src="동영상 URL" preload="false" width="480" height="360"></video>
여기서 중요한 점은 각 크로스브라우저의 비디오 태그의 사용법에 대한 내용입니다
말씀드렸듯이 각 브라우저마다 사용하는 코덱이 다르기 때문에 각 브라우저에 맞는 태그를 사용하셔야 합니다
|
<!DOCTYPE HTML> |
[★] 알아두면 유용한 사이트 HTML5 Video elements
http://videojs.com
http://www.html5video.org
http://www.diveintohtml5.org/video.html