목차
<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> 태그는 전역속성・이벤트속성 지원.
주소 복사
랜덤 이동