HTML5 이전 웹에서 영상을 표현하기 위해서는 별도 object 또는 embed테그 등을 이용해서
외부 플레이어의 힘을 받아야 영상을 재생할 수 있었습니다.
거기에서 끝나는게 아니라 사용자는 그 동영상을 보기 위해 각종 플러그인(실버라이트, 플레시등)을 설치해야 하는
불편함을 겪어야 했죠. (현재까지도…)

But! HTML5 video테그를 이용한다면 사용자가 별도의 플레이어 설치 없이 비디오를 볼 수 있습니다.
지금부터 간단하게 video테그 사용에 대해 설명 해보겠습니다.

미디어 타입 브라우저 지원 현황 (추가 : 파폭 버전 25에서 MP4플레이 되는것 확인)

브라우저별 지원하는 비디오 타입이 다르기 때문에 타입별로 준비가 필요합니다. (IE 9 이하는 지원하지 않습니다.)

예제

예제코드

<video controls width=”640″ height=”360″ poster=”미리보기이미지”>
<source src=”/contents/media/chrome.mp4″ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>
<source src=”/contents/media/chrome.webm” type=’video/webm; codecs=”vp8, vorbis”‘>
<source src=”/contents/media/chrome.ogv” type=’video/ogg; codecs=”theora, vorbis”‘>
비디오를 지원하지 못하는 브라우저 입니다. <!– 미지원 브라우저에서 출력됩니다 –>
</video>

source테그로 같은 동영상을 브라우저별 지원사항을 고려해서 3개를 놓게 되면 브라우저는 자동으로 지원하는 포맷으로 재생을 하게되고 모두 지원하지 않을경우, 아래의 “비디오를 지원하지 못하..” 텍스트를 출력합니다.

<source> 테그 설명

• 미디어의 데이터를 지정하는 요소
• <video>, <audio>의 하위 요소로 사용되며 여러 번 사용 가능
• 속성
  – src : 미디어 데이터의 URL
  – type : 미디어 데이터의 MIME 타입
  – media : 미디어 데이터의 이용 조건인 미디어 쿼리를 지정

[파이어폭스 지원 현황 – 2014.7]

• Update 1: Firefox 21 on Windows and Android now supports MP4
• Update 2: Firefox 30 on Linux now supports MP4