목차
- <source> 예제 - 미디어 소스 불러오기
- <source> 정의
- <source> 속성
<source> 예제 - 미디어 소스 불러오기
[오디오]
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
<source src="music.wav" type="audio/wav">
댁 브라우저가 후져서, audio 태그 지원 안 함. ㅡㅡ;
</audio>
[비디오]
<
video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm type="video/webm">
<source src="movie.ogg" type="video/ogg">
댁 브라우저가 후져서, video 태그 지원 안 함. ㅡㅡ;
</video>
<source> 정의
음성 파일이나 비디오 파일 소스 불러오기.
1.
- (<audio>/<video>) 태그 안에서 미디어 파일 불러올 때 사용.
- <source> 태그 단독으로 사용하면, (오디오/비디오) 재생 X
- src(미디어파일소스URL)와 type(파일형식/코덱정보) 속성 필요.
- 미디어가 여러 확장자 파일 존재 시, 여러 <source> 사용 가능.
- 위에 있을수록 우선 재생되며, 재생이 안 되면 텍스트 메시지 뜸.
- HTML5에 새로 추가됨.
2.
IE 9 이상 주요 최신 브라우저 지원.
3.
주요 브라우저 기본 CSS : none
<source> 속성
속성 |
속성값 |
설명 |
src |
URL |
<audio> 및 <video>에서 <source>를 사용할 때 필요.
미디어 파일의 URL 지정. (속성값 리스트) |
srcset |
URL |
<picture>에서 <source>를 사용할 때 필요.
다른 상황에서 사용할 이미지의 URL을 지정. |
media |
media_query |
일반적으로 CSS에 정의된 유효한 미디어 쿼리를 허용. |
sizes |
|
다른 페이지 레이아웃에 대한 이미지 크기를 지정. |
type |
MIME-type
※ 영상 파일 경우 video/mp4
video/ogg
video/webm
※ 음성 파일 경우
audio/mpeg
audio/wav
audio/ogg
|
리소스의 MIME 유형을 지정. |
<source> 태그는 전역속성・이벤트속성 지원.