[HTML] 멀티미디어(오디오, 비디오) 삽입하기

이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다.

---

audio 태그

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

src 속성에 오디오 파일의 위치(URL)를 넣어주면 된다.

controls 속성을 제거하면 오디오 컨트롤 패널이 보이지 않게 된다.

 

video 태그

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

src 속성에 비디오 파일의 위치(URL)를 넣어주면 된다.

controls 속성을 제거하면 비디오 컨트롤 패널이 보이지 않게 된다.

 

source 태그

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

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

 

audio 태그와 video 태그는 다양한 포맷을 지원하지만, 웹 브라우저별로 지원하는 포맷과 미디어 타입은 각각 다르다.

예를 들어 오디오에서, mp3 포맷은 모든 웹 브라우저에서 지원하지만 wav나 ogg 포맷은 지원하지 않는 웹 브라우저도 있다.

그런데 ogg 포맷을 우선 지원하고 어쩔 수 없는 경우에만  mp3 포맷을 지원해야 하는 경우에 source 태그를 사용한다.

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

 

먼저 작성한 source 태그의 파일부터 현재 웹 브라우저에서 해당 파일 포맷을 지원하는지 확인한다.

만약 웹 브라우저에서 지원하지 않는다면 그 다음에 작성된 source 태그를 확인했는데, 전부 지원하지 않는 형식이라면 마지막에 작성한 텍스트가 사용자에게 노출된다.

 

이러한 과정은 video 태그에서도 마찬가지이다.