[해피CGI][cgimall] HTML5의 "Video" 태그 사용하기

소개 

<video> 태그는 무비 클립이나 다른 비디오 스트림과 같은 비디오를 지정합니다.
현재 <video> 요소에는 MP4, WebM 및 Ogg와 같이 3 가지 지원되는 비디오 형식이 있습니다.

예시

MP4 = H264 비디오 코덱 및 AAC 오디오 코덱이있는 MPEG 4 파일
WebM = VP8 비디오 코덱과 Vorbis 오디오 코덱이있는 WebM 파일
Ogg = Theora 비디오 코덱과 Vorbis 오디오 코덱이 포함 된 Ogg 파일


브라우저별 지원여부

속성

Autoplay (자동재생)

<video controls autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
< /video> 

Controls (비디오 컨트롤러)

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
< /video> 

height (영상세로크기)

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video> 

loop (반복)

<video controls loop>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video> 

muted (음소거)

<video controls muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video> 


poster (대표이미지)

<video controls poster="/images/w3html5.gif">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video> 

preload (페이지가 로드될때 비디오가 로드되는지 여부 선택)

<video controls preload="none">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video> 


등 다양한 속성이 있습니다. 
더욱더 자세한 내용은 <w3schools.com> 에서 확인바랍니다.