웹솔루션개발 22년 노하우! 해피CGI의 모든것

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

웹프로그램밍 자료실/HTML 자료

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

해피CGI윤실장 2018. 10. 22. 09:17

소개 

<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> 에서 확인바랍니다.





홈페이지바로가기

Comments