[html5] video 사용하기

[html5] video 사용하기

1. 동영상이 3개 필요합니다.

ogv, mp4, webm

2. 인코딩

원본 동영상 파일을

윈도우즈 무비메이커로 원하는 부분만 편집해서 mp4로 저장합니다.

다음인코더로 ogv 파일을 만듭니다.

카카오인코더로 webm 파일을 만듭니다.

3개 파일을 html 상에서

<video class="banner_mov" poster="" loop="loop" autoplay >
   <source type="video/ogv"  src="http://www.jobtoy.com/upload/mov/20150921_2222.ogv"></source>
   <source type="video/webm" src="http://www.jobtoy.com/upload/mov/20150921_2222.webm"></source>
   <source type="video/mp4"  src="http://www.jobtoy.com/upload/mov/20150921_2222.mp4"></source>
</video>

  

넣습니다. 그러면 아래처럼 보이겠죠

[html5] video 사용하기