media

 

<audio>

:브라우저 자체에서 음악을 재생할 수 없었기 때문에 플래시 플레이어, 윈도우 미디어 플레이어, 퀵타임 등의 프로그램을 이용해 음악을 재생했지만 html5에서는 <audio>태그가 추가되어 웹 브라우저에서 바로 음악을 재생할 수 있다.

사용법이나 속성 등은 <video>태그와 거의 동일하다.

 

IE를 제외한 모든 브라우저에서 지원(각 브라우저별로 어떤 코덱을 지원하는지도 주의해야 한다.)

<audio src="sample.mp3" autoplay controls></audio>

src : 오디오 파일의 경로 지정

preload : auto, metadata, none 값으로 오디오가 페이지 로드될 때 같이 로드 될지 아닐지 지정

autoplay : 오디오 자동 재생

loop : 재생 반복 횟수 지정

controls : 콘트롤 막대바 추가

 

사용 예)

<audio controls="controls">
  <source src="sample.ogg" type="audio/ogg">
  <source src="sample.mp3" type="audio/mp3">
</audio>

*기본적으로 audio태그만 사용하여 코딩하지만, 현재 각 브라우저마다 지원 파일 형식과 코덱이 달라서 css3를 사용할 때 벤더 접두사(-moz-, -webkit-, -o-)를 사용하듯 audio태그 안에 source태그를 사용해서 파일 형식과 코덱들을 모두 적어주어야 한다.

 

*브라우저별 지원 오디오 파일 형식

파이어폭스 : ogg, wav

오페라 : wav

사파리 : mp3, wav

크롬 : ogg, mp3

 

 

<video>

:이제까지는 웹 페이지에서 비디오를 보여주는 표준은 존재하지 않았고, 플래시 같은 플러그인(plug-in)을 통해 비디오를 보여주는것이 대부분이었지만 모든 브라우저들이 같은 플러그인을 가지고 있지 않아 불편한 점이 많았다.

HTML4에서는 <object>태그와 <embed>태그를 사용해야 했고, ActiveX컨트롤을 사용하기도 했지만 HTML5에서는 별도의 플러그인 없이 <video> 태그를 사용하여 웹에서 바로 비디오를 보여줄 수 있는 표준을 정의한다.

 

IE를 제외한 모든 브라우저에서 지원(video태그를 지원한다고 해도 각 브라우저별로 어떤 코덱을 지원하는지도 주의해야 한다.)

<video src="sample.mp4" width="300" height="300" autoplay controls></video>

src : 동영상 파일의 경로 지정

poster : 동영상 대체 이미지 파일 경로 지정

preload : 동영상이 백그라운드에서 다운로드되어 재생 단추를 눌렀을 때 재생

autoplay : 동영상 자동 재생

loop : 재생 반복 횟수 지정

controls : 콘트롤 막대바 추가

width : 동영상 화면의 너비 지정

height : 동영상 화면의 높이 지정

 

사용 예)

<video width="300" height="300" autoplay controls poster="sample.jpg">
  <source src="sample.mp4" type="video/mp4">
  <source src="sample.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

*기본적으로 video태그만 사용하여 코딩하지만, 현재 각 브라우저마다 지원 파일 형식과 코덱이 달라서 css3를 사용할 때 벤더 접두사(-moz-, -webkit-, -o-)를 사용하듯 video태그 안에 source태그를 사용해서 파일 형식과 코덱들을 모두 적어주어야 한다.

*현재(2011.06) 어떤 코덱이 표준 코덱이 될 것인가에 대해 많은 이슈가 있고, H.264, 테오라, VP8 세 개의 코덱이 가장 유력하다.

-H.264 : 가장 많이 쓰여지고 있는 코덱이지만 유료라는 이유로 표준에 맞지 않다는 의견이 많자 H.264의 특허권을 가지고 있는 MPEG포럼에서 HTML5 웹 표준의 용도로 사용할 경우만 무료로 허용 했다.

-테오라 : 공개(무료) 코덱이며 파이어폭스에서는 벌써 3.5 버전부터 플러그인 없이도 테오라 코덱 비디오가 재생 가능하다. 테오라 코덱을 사용하는 .ogv 동영상 파일 인코딩은 파이어폭스 브라우저에서 부가기능으로도 제공한다.

-VP8 : 2010년 구글이 발표한 공개(무료) 코덱이며, 구글이 H.264와 함께 VP8을 지원하겠다고 하여 모질라, 오페라, MS IE9에서도 지원에 참여 했다.

 

*브라우저별 지원 동영상 파일 형식과 코덱

비디오와 오디오를 압축해서 동영상 파일로 만들고(인코딩), 또 플레이어에 보여주고(디코딩)하는 것들을 코덱이라고 하며 동영상 파일은 이 두가지 코덱을 사용해 만들어진다.(2011.06)

 

브라우저	동영상 파일 형식	비디오 코덱	오디오 코덱
파이어 폭스	.ogg  .webm	테오라  VP8	Vorbis
오페라	.ogg  .webm	테오라  VP8	Vorbis
크롬	.ogg  .mp4  .webm	테오라  H.264  VP8	Vorbis  ACC
사파리	.mp4	H.264	ACC
IE9	.mp4	H.264	ACC
모바일(iphone,android)	.mp4	H.264	ACC

 

 

 

<source>

:video 와 audio 태그 같은 미디어 요소의 resources를 정의한다. 2개 이상의 미디어 파일을 불러와야 할 경우 video나 audio 태그에 바로 적지 않고 자식요소로써 source 태그를 사용해서 각각의 미디어 파일 리소스를 정의해야 할 때 사용한다.

지금처럼 브라우저에서 지원하는 미디어 파일 형식과 코덱들이 제 각각일 경우 source 태그를 이용해서 모든 형식을 마크업 해주어야 한다.

 

<source src="song.ogg" type="audio/ogg" />

media

src

type

 

사용 예)

<video width="300" height="300" autoplay controls poster="sample.jpg">
  <source src="sample.mp4" type="video/mp4">
  <source src="sample.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

*현재 각 브라우저마다 지원 파일 형식과 코덱이 달라서 css3를 사용할 때 벤더 접두사(-moz-, -webkit-, -o-)를 사용하듯 source태그를 사용해서 파일 형식과 코덱들을 모두 적어주어야 한다.

 

 

<embed>

:플러그인을 포함한 콘텐츠를 포함시킬 때 사용한다. 이전에는 특정 브라우저용으로 불분명하게 사용되어 호환이 되지 않는 문제점을 가지고 있었으나 html5에서 정식으로 지원한다.

 

<embed src="sample.swf" />

src : 파일의 경로 지정

height : 콘텐츠 높이값을 지정

width : 콘텐츠 너비값을 지정

type : 콘텐츠 MINE-type값을 지정

 

사용 예)

<embed src="sample.swf" />

*embed 태그는 넷스케이프3.0에서 쓰였던 것을 html5 에서 공식 지원하는 것이다.

 

출처 : http://htmlcss.kr/html5/media/