본문 바로가기

쇼핑몰 검색

html5

HTML5 Video

본문

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

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

 

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
  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기

코리아뉴스-웹학교 정보

회사명. 코리아뉴스
주소. 경기도 남양주시 진건읍 855
사업자 등록번호. 132-10-73100 대표. 한종배 전화. 031-574-3659 팩스. 0504-475-5402
통신판매업신고번호. 제2008-경기남양주-0513호 개인정보관리책임자. 한종배
Copyright © 2001- 2017 코리아뉴스. All Rights Reserved.