HTML <source> 태그

정의와 사용법

<source> 태그는 미디어 요소（예: <video>、<audio> 와 <picture>）다중 미디어 자원을 지정합니다.

<source> 태그는 대체 비디오/오디오/이미지 파일을 지정할 수 있으며, 브라우저는 브라우저가 지원하는 첫 번째 파일을 선택합니다. <source>.

추가로 참고하세요：

HTML 교육 과정：HTML 비디오

HTML 교육 과정：HTML 오디오

HTML DOM 참조 설명서：Source 객체

인스턴스

예제 1

이것은 두 개의 오디오 소스 파일을 가진 오디오 플레이어입니다. 브라우저는 지원하는 첫 번째 파일을 선택합니다. <source>：

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  귀하의 브라우저는 audio 태그를 지원하지 않습니다.
</audio>

직접 시험해 보세요

예제 2

<video>에서 사용 <source> 비디오를 재생하다:

<video width="640" height="400" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  귀하의 브라우저는 비디오 태그를 지원하지 않습니다.
</video>

직접 시험해 보세요

예제 3

<picture>에서 사용 <source> 뷰포트 너비에 따라 다른 이미지를 정의하기 위해 사용합니다:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

직접 시험해 보세요

속성

속성 값 설명
media 미디어 쿼리 모든 유효한 미디어 쿼리를 받아들이며, 일반적으로 CSS에서 정의됩니다.
sizes 다른 페이지 레이아웃에 이미지 크기를 지정합니다.
src URL

미디어 파일의 URL을 지정합니다.

당신이 <audio>와 <video>에 <source>를 사용할 때, 이 속성은 필수입니다.
srcset URL

다른 상황에서 사용할 이미지의 URL을 지정합니다.

<source>가 <picture>에서 사용될 때, 이 속성은 필수적입니다.
type MIME 타입 자원의 MIME 타입을 정의합니다.

전체 속성

<source> 태그는 또한 HTML에서의 전체 속성.

이벤트 속성

<source> 태그는 또한 HTML에서의 이벤트 속성.

기본 CSS 설정

없음.

브라우저 지원

표에서의 숫자는 해당 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
4.0 9.0 3.5 4.0 10.5