[HTML5] VIDIO 태그 사용방법

HTML5 에 있는 VIDEO 태그를 사용할때 주로 사용하는 방법입니다.

비디오 태그를 사용할경우, 반드시 영상을 아래와 같이 3가지파일로

인코딩을 해놓고 작업을 해야합니다.

webm, mp4, ogg 추가로 video 를 지원하지 않을경우를 대비하여 

플래시로 flv 파일의 영상을 확보하면 크로스브라우징요소를 대비할수도 있습니다.

<video controls="controls" width="500" poster="img/1.png">

    <!-- Safari/Chrome 브라우저일 경우, 지원하는 webm 파일을 재생 -->

    <source src="movie/catyoga.webm" type="video/webm">

    <!-- IE9 이상 브라우저일 경우, 지원하는 mp4 파일을 재생 -->

    <source src="movie/catyoga.mp4" type="video/mp4">

    <!-- Firefox 브라우저일 경우, 지원하는 ogv 파일을 재생 -->

    <source src="movie/Titanic.ogg" type="video/ogg">

    <!-- HTML5 video요소를 지원하지 않는 브라우저의 경우 플래시 무비를 사용합니다 -->

    <embed src="movie/catyoga.flv" type="application/x-shockwave-flash" width="500" height="350" allowscriptaccess="always" allowfullscreen="true"></embed>

</video>

<!-- video태그내에 플레이버튼과 정지버튼 만들기 -->

<form name="mc">

    <input type="button" value="PLAY" onClick="document.getElementsByTagName('video')[0].play();"

    <input type="button" value="PAUSE" onClick="document.getElementsByTagName('video')[0].pause();"

</form>

/* 반응형 */

<video width="100%" height="auto" preload controls> 

<!--이렇게 width 100%하고 height를 auto 로 하시면 반응형으로 만드실수 있습니다.-->

     <source src="Test.mp4" type="video/mp4">

     <source src="Test.ogv" type="video/ogg"> 

</video>

요즘엔 유투브로 올려서 작업을 하지만 FTP로 올려서 작업을 해야 될경우

이렇게 사용하고 있습니다.