HTML <source> 태그는 <audio> 및 <video> 요소에서 사용할 멀티미디어 리소스를 정의하는 데 사용됩니다. 하나의 미디어 요소 안에 여러 개의 <source>를 지정하면, 브라우저가 미디어 유형과 코덱 지원 여부를 판단해 가장 적합한 소스를 자동으로 선택합니다.
기본 예제
다음 코드를 실행하면 HTML5에서 audio 요소 내부에 미디어 리소스를 정의하는 방법을 확인할 수 있습니다.
<!Doctype html>
<html>
<head>
<title>HTML source Tag</title>
</head>
<body>
<audio controls>
<source src = "yourfile.mp3">
<p>브라우저가 이 파일을 지원하지 않습니다.</p>
</audio>
</body>
</html>위 예제에서처럼 <source> 태그 뒤에 대체 텍스트를 넣으면, 브라우저가 오디오 기능을 지원하지 않을 때 해당 메시지가 표시됩니다.
여러 개의 소스 지정하기
브라우저마다 지원하는 코덱이 다르기 때문에, 여러 형식의 파일을 함께 제공하면 호환성을 높일 수 있습니다. 브라우저는 위에서부터 순서대로 확인하며 재생 가능한 첫 번째 소스를 사용합니다.
<video controls width="480">
<source src="movie.webm" type="video/webm">
<source src="movie.mp4" type="video/mp4">
<p>이 브라우저는 HTML5 비디오를 지원하지 않습니다.</p>
</video><source> 태그의 주요 속성
HTML <source> 태그는 다음과 같은 속성을 추가로 지원합니다.
| 속성 | 값 | 설명 |
|---|---|---|
| media | media_query | 미디어 리소스의 유형(대상 디바이스나 조건)을 정의합니다. |
| src | URL | 재생할 미디어 파일의 URL을 지정합니다. |
| type | media_type | 미디어 리소스의 MIME 유형을 지정합니다. (예: video/mp4, audio/ogg) |
정리
<source> 태그는 단독으로 사용되지 않으며 반드시 <audio>, <video>, <picture> 요소 내부에 위치해야 합니다. src와 type 속성을 함께 활용하면 브라우저가 불필요하게 파일을 다운로드하는 것을 막아 페이지 로딩 성능도 개선할 수 있습니다.