[Html] 멀티미디어 설정하기

audio 태그

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

항상 src 속성과 함게 사용하며, src 속성값에는 삽입하려고 하는 오디오 파일의 경로 적어줌

오디오 컨트롤 패널이 웹 브라우저에 노출 되도록 controls 속성 설정

ex)

<audio src = "Bourree =Joel Cummins.mp3" controls></audio>

지원 파일 포맷과 미디어 타입

오디오 파일 포맷별 미디어 타입

지원 파일 포맷과 미디어 타입
-> 웹 브라우저마다 제공하는 오디오 파일 포맷이 다름

video 태그

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

비디오 파일 포맷

웹 브라우저별로 지원한는 비디오 파일 포맷

source 태그

source 태그는 audio 태그와 video 태그에서 리소스의 경로와 미디어 타입을 명시할 때 사용

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

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

사용 이유

웹 접근성을 고려해 source 태그로 다양한 포맷의 멀티미디어를 등록해 두는 방식으로 사용

ex)

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

audio 태그는 먼저 작성한 source 태그의 파일부터 현재 웹 브라우저에서 해당 파일 포맷을 지원하는지 확인
-> 지원하지 않는다면 그 다음 작성된 source 태그 파일을 확인
-> 모든 source 태그를 확인했는데, 전부 지원하지 않는 형식이라면 마지막에 작성한 텍스트가 노출됨
-> video 태그도 같은 방식으로 동작