HTML <소스> 태그
예시
두 개의 소스 파일이 있는 오디오 플레이어. 브라우저는 지원하는 첫 번째 <source>를 선택합니다.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
태그는 <video> , <audio> 및 <picture><source> 와 같은 미디어 요소에 대해 여러 미디어 리소스를 지정하는 데 사용
됩니다 .
<source>태그를 사용하면 브라우저 지원 또는 표시 영역 너비에 따라 브라우저에서 선택할 수 있는 대체 비디오/오디오/이미지 파일을 지정할 수 있습니다 . 브라우저는 <source>
지원하는 첫 번째 항목을 선택합니다.
브라우저 지원
표의 숫자는 요소를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Element | |||||
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
속성
| Attribute | Value | Description |
|---|---|---|
| media | media_query | Accepts any valid media query that would normally be defined in a CSS |
| sizes | Specifies image sizes for different page layouts | |
| src | URL | Required when <source> is used in <audio> and <video>. Specifies the URL of the media file |
| srcset | URL | Required when <source> is used in <picture>. Specifies the URL of the image to use in different situations |
| type | MIME-type | Specifies the MIME-type of the resource |
전역 속성
<source>태그는 HTML의 전역 속성도 지원 합니다 .
이벤트 속성
<source>태그는 HTML의 이벤트 속성 도 지원합니다 .
더 많은 예
예시
<video> 내에서 <source>를 사용하여 비디오를 재생합니다.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
예시
<picture> 내에서 <source>를 사용하여 뷰포트 너비에 따라 다른 이미지를 정의합니다.
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img
src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
관련 페이지
HTML 튜토리얼: HTML 비디오
HTML 튜토리얼: HTML 오디오
HTML DOM 참조: 소스 개체
기본 CSS 설정
없음.