Programming/HTML CSS
1. video 사용
<video src="sample.mp4" controls="controls"></video>
▶지정된 mp4 file을 재생합니다.

표준 tag만 사용하면 browser마다 player의 모양새가 틀릴 수 있으며 HTML5를 지원하지 않는 browser 에서는 동작하지 않을 수도 있습니다. 대신 video.js plug-in(http://videojs.com)을 사용하면 이 문제를 일부 해결할 수 있습니다.

사용방법은 우선 head사이에 아래 두줄의 tag를 추가하고
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
video tag에서 다음과 같이 class와 data-setup을 지정해 두기만 하면 됩니다.
<video width="200px" src="sample.mp4" class="video-js vjs-default-skin" data-setup="{}" controls="controls"></video>
다만 HTML5를 지원하지 않는 경우에는 flash로 대체됩니다. 따라서 flash를 사용할 수 없는 일부 smart phone이나 tablet 등의 mobile기기에서는 작동되지 않을 수 있습니다.(대신 HTML5가 되겠지...^^)

동영상 포멧은 브라우저 마다 지원하는 형태가 달라질 수 있으나 mp4와 ogv 형식을 같이 지원하면 대부분의 브라우저에서 문제없이 재생될 수 있습니다.

2. video 속성

(1) src

재생할 file이 존재하는 url경로를 지정합니다.

(2) poster

video 재생전 보여줄 image의 url을 지정합니다.

(3) preload

video를 모두 load한뒤에 재생하도록 합니다. preload만 입력해도 되고 preload="preload" 처럼 속성을 지정해도 됩니다. 참고로 후자는 XHTML5 표기방법에 해당합니다.

(4) autoplay

자동으로 재생할지를 지정합니다. 속성지정은 preload와 같습니다.

(5) loop

반복재생할지 지정합니다. 속성지정은 preload와 같습니다.

(6) controls

재생, 정지등의 interface를 표시하도록 합니다. 속성지정은 preload와 같습니다.

(7) width

player의 가로 크기를 지정합니다. 값은 pixel단위 정수로 지정합니다.

(8) height

player의 세로 크기를 지정합니다. 속성 지정은 width와 같습니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 선택자 - 부정 선택  (0) 2013.05.23
[CSS3] 선택자 - 구조 선택  (0) 2013.05.22
[HTML5] video (비디오)  (0) 2013.05.20
[CSS3] opacity  (0) 2013.05.15
[CSS3] 선택자 - 링크 선택  (0) 2013.05.14
[HTML / HTML5] div  (0) 2013.05.13
0 0