[HTML] 멀티미디어

 

멀티미디어

​

1. audio
2. video
3. source

​

---

 

​1. audio 

 

 

웹 문서 음악 삽입

[형식]

<audio src="오디오 파일 경로" controls></audio>

코드를 실행하면 웹 브라우저에 내장된 오디오 컨트롤 패널이 화면에 표시된다.

[속성]

src : 재생하려는 파일 경로와 이름
controls : 컨트롤러 출력
autoplay : 자동 실행
loop : 반복 실행
muted: 처음 음소거 여부 (기본값 false)

 

오디오 파일 포맷에 따른 미디어 타입

파일 포맷	미디어 타입
MP3	audio/mpeg
WebM	audio/wav
OGG	audio/ogg

 

 

---

2. vidio 

 

[형식]

<vidio src="sample.mp4" controls></vidio>

코드를 실행하면 웹 브라우저에 비디오 컨트롤 패널이 표시된다.

[속성]

src : 재생하려는 파일의 경로와 이름
type : 재생매체 타입
controls : 컨트롤러 출력
autoplay : 자동 실행
loop : 반복 실행

 

 

비디오 파일 포맷에 따른 미디어 타입

파일 포맷	미디어 타입
MP3	vidio/mp4
WAV	vidio/webm
Ogg	vidio/ogg

 

 

---

3. source

 

source 태그는 audio 태그와 vidio 태그에서 리소스(파일)의 경로와 미디어 타입을 명시하는 데 사용한다.

 

[형식]

<audio controls>
	<source src="파일 경로" type="미디어 타입">
</audio>
<vidio controls>
	<source src="파일 경로" type="미디어 타입">
</vidio>

 

source 태그는 멀티미디어 태그를 사용할 때 필수는 아니지만, 되도록 함께 사용하면 좋은 태그이다.

 

왜 함께 사용하는 것이 좋을까?

 

audio와 vidio는 다양한 포맷을 지원하지만, 웹 브라우저별로 지원하는 포맷과 미디어 타입은 각각 다르다. 예를 들어 오디오에서 MP3 포맷은 모든 웹 브라우저에서 지원하지만 WAV나 OGG 포맷은 지원하지 않는 웹 브라우저도 있다.

그런데 OGG 포맷을 우선 지원하고 어쩔 수 없는 경우에만 MP3 포맷을 지원해야 하는 경우가 생기면 어떻게 할까? 이럴 때 source 태그를 사용한다.

 

<audio controls>
	<source src="sample.wav" type="audio/wav">
	<source src="sample.mp3" type="audio/mp3">
	지원하지 않는 웹 브라우저입니다.
</audio>

 

audio 태그는 먼저 작성한 sorce 태그의 파일부터 현재 웨 브라우저에서 해당 파일 포맷을 지원하는지 확인한다. 만약 브라우저에서 지원하지 않는다면 그 다음에 작성한 source 태그의 파일을 같은 방식을 확인한다. 모든 source 태그를 확인했는데, 전부 지원하지 않는 형식이라면 마지막에 작성한 텍스트가 사용자에게 노출된다. 이 과정은 vidio 태그도 같다.

 

따라서 audio 태그나 vidio 태그를 사용할 때는 웹 접근성을 고려해 source 태그로 다양한 포맷의 멀티미디어를 등록해 두는 방식으로 사용하는 것이 좋다.