HTML5 동영상강좌 바로가기 

댓글 목록

HTML5 Video

페이지 정보

작성자 운영자 작성일 14-12-11 18:04 조회 7,982 댓글 0

본문

요즘은 많은 사이트에서 비디오를 보여주고 있습니다.

트래픽도 대용량을 감당할 수 있는 상황이 되었고 더 비주얼적인 사이트가 되다 보니 동영상의 수요는 더욱 확대되리라 봅니다.

 

HTML5이전엔 플래시 같은 플러그인 형태로 웹사이트에서 제공되어 왔는데 문제는 브라우저별로 다른 플러그인을 제공하였다는 것입니다. 그리고 플러그인을 다운받아 사용 PC에 설치해야 비디오를 감상할 수 있었다는 것입니다.

 

HTML5에서는 이런 문제를 해결하고 표준 태그를 제공합니다.

 

그러나 여전히 모든 브라우저가 새 표준을 만족하는 것은 아닙니다. 

 

크롬, 오페라, 화이어폭스, 사파리, IE 9+ 가 새 표준 태그 <video>를 지원합니다. 

 

<video width="320" height="240" controls>

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

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

당신의 브라우저는 video태그를 지원하지 않습니다.

</video>

 

video태그는 제어 속성으로 play, pause, volume 같은 것을 제공합니다.

또한 브라우저별 지원하는 동영상 포맷이 다르기 떄문에 source엘리먼트로 2개 이상의 비디오 소스를 허용합니다.

현재, 허용하는 비디오 포맷은 MP4, WebM, Ogg 3가지가 있습니다. 

 

아래는 브라우저별 지원하는 화일 포맷입니다.(출처:w3schools.com)

BrowserMP4WebMOgg
Internet ExplorerYESNONO
ChromeYESYESYES
FirefoxNO
Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP4
YESYES
SafariYESNONO
OperaNOYESYES
  • MP4 = MPEG 4 files with H264 video codec and AAC audio codec
  • WebM = WebM files with VP8 video codec and Vorbis audio codec
  • Ogg = Ogg files with Theora video codec and Vorbis audio codec

댓글목록 0

등록된 댓글이 없습니다.


HTML5 동영상강좌 바로가기