video/audio 요소를 사용한 미디어 데이터 지정 HTML5



video/audio 요소를 사용한 미디어 데이터 지정

 

 

브라우저별 재생가능한 미디어의 종류에는 한계가 있다.

기타 필요한 내용은 서적이나 검색을 통해 확인바란다.

 

그래서 브라우저는 자기가 재생할 수 있는 미디어를 찾아내야 하는데,

이때 필요한 태그가 <source> 태그이고, 지원가능여부를 판단하기 위한 속성이 type 속성이다.

 

type속성이 뭔가하니...

브라우저가 실제로 미디어데이터(비디오나 오디오파일)를 처음부터 끝까지 다운로드 하지 않고서도

아! 이놈은 내가 재생할 수 있겠군! 이라고 판단할 수 있는 속성이다.

 

예제를 보자.

 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> HTML5 Test </TITLE>
</HEAD>
<BODY>
 <video id="myVideo"
  width="400" height="300"
  poster="http://desmond.yfrog.com/Himg29/scaled.php?tn=0&server=29&filename=r16t.jpg&xsize=640&ysize=640"
  controls >
  이 페이지가 보이지 않는다면, 당신은 구형 브라우저를 사용중입니다.
  <source src="http://double.co.nz/video_test/BillysBrowser480.ogg"
   type="video/ogg"></source>
 </video>
</BODY>
</HTML>

 

이전의 예제코드를 살짝 변형했다.

비디오 태그의 안쪽으로 <source>~</source>의 태그가 삽입되었다.

비디오태그에 있던 src 속성값이 소스태그의 속성으로 옮겨졌고, type 속성값이 video/ogg로 설정되었다.

 

지금 이 동영상은 ogg파일이기에, 위의 예제를 불여우에서 실행하면 종전처럼 정상재생이 된다.

하지만, video/ogg부분을 video/mp4로 변경해보면...?

 

 

다른 에러메시지는 보이지 않지만, 화면 중앙에 X라고 출력된것을 확인할 수 있다.

아마도 재생이 되지 않는다는 의미의 기호인듯 하다.

 

하지만!!

video/ogg 등으로 표현된 정보는 부족하다.

비디오에는 영상과 음성정보가 내재되어 있고, 이것을 컨테이너로 감싸고 있기때문에

이러한 컨테이너속에 어떠한 형식으로 데이터가 들어있는지 여부를 정확히 알 수 없기때문이다.

 

이때문에 codec이라는 파라미터를 추가적으로 사용해줘야 한다.

예를 들면,

- OGG 동영상 컨테이너 속에, Theora 영상형식과 Vorbis음성형식의 데이터가 존재할때

   ====> video/ogg; codecs="theora, vorbis" 라고 표현해준다.

더 깊게 들어가면 복잡하다. 여기서는 이정도만 알아두자.


덧글

댓글 입력 영역


통계 위젯 (화이트)

1522
132
358625

red 210