멀티미디어 지원

* 멀티미디어 콘텐츠 다루기

- HTML5에서는 음악이나 동영상을 처리할 수 있음.

 

음악/음성

<audio src="mewing_cat.mp3"> </audio>

 

동영상

<video src="running_cat.mp4"> </video>

 

- 이러한 기능들은 그냥 웹 페이지에 넣어서 재생만 하는 것이 아니라 속성을 지정하면 여러 가지 제어가 가능하다는 특징이 있음.

- 예를 들어 아래와 같이 지정하면 재생, 정지와 같은 컨트롤이 표시됨.

 

<video src="running_cat.mp4" controls>재생할 수 없습니다.</video>

(시작 태그와 종료 태그 사이에는 태그를 지원하지 않는 웹 브라우저를 위한 대체 콘텐츠를 작성할 수 있음.)

 

- 속성

프로퍼티명	값
preload	콘텐츠를 미리 읽어 들일 것인지를 지정함.  아래의 값을 지정함.  none : 읽어 들이지 않음.  metadata : 메타 데이터만 읽어 들임.  auto : 자동(기본값)
autoplay	이 속성을 지정하면 콘텐츠 읽기가 완료됨과 동시에 재생됨.
loop	이 속성을 지정하면 콘텐츠가 반복 재생됨.
controls	이 속성을 지정하면 재생이나 정지와 같은 버튼이 추가됨.
muted	이 속성을 지정하면 무음 상태가 됨.
mediagroup	그룹명을 지정함.
poster	[video 요소] 비디오 파일을 이용할 수 없을 때 표시할 이미지를 지정함.
width	[video 요소] 비디오의 폭을 지정함.
height	[video 요소] 비디오의 높이를 지정함.

 

 

* 코덱

- 음악이나 동영상 파일에는 여러 가지 형식(코덱)이 있음.

- HTML5에서는 표준 코덱을 정해 놓지 않고 있으며, 웹 브라우저에 따라 지원되는 형식도 제각각임.

- 다양한 웹 브라우저를 지원하기 위해 source 태그를 사용하여 여러 개의 코덱으로 된 콘텐츠를 지정할 수 있음.

- 여러 개의 source 태그가 있는 경우는 그중 재생 가능한 것이 재생됨.

 

<video control>
    <source src="running_cat.mp4">
    <source src="running_cat.ogg">
    <source src="running_cat.webm">
    <p>사용 중인 웹 브라우저에서는 동영상을 재생할 수 없습니다.
    <a href="running_cat.mp4">다운로드</a></p>
</video>
 
// 위에서부터 순서대로 평가하여 재생할 수 있는 형식이 발견되면 그것을 재생함.
    

 

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)