source

설명

The source element is used to specify multiple media resources for audio and video elements in HTML5. It is an empty element.

source 요소는 video(동영상)요소나 audio(음성) 요소등의 멀티미디어 자료의 위치를 지정하기 위해 사용하는 요소이다. source 요소 안에는 내용이 들어가지 않는다.

Usage Context

Permitted content	None; this is a void element.
Tag omission	Must have a start tag, and must not have an end tag.
Permitted parent elements	<audio>, <video>
Normative document	HTML5, section 4.8.8

속성

이 엘리먼트는 전역속성을 지원한다.

자료의 주소(src:SouRCe)

Required, address of the media resource.

필수적으로 필요하며, 멀티미디어 자료의 주소를 갖는다.

유형(type)

The MIME-type of the resource, optionally with a codecs parameter. See RFC 4281 for information about how to specify codecs.

자원의 MIME-type, 추가적으로 코덱정보. 코덱을 확인하는 방법에 대해선 RFC 4281를 참고하자.

미디어 (media)

Media query of the resource's intended media.

미디어자료(자원)에 알맞는 미디어장치를 구동시키기위한 명령어.

If the type attribute isn't specified, the media's type is retrieved from the server and checked to see if Gecko can handle it; if it can't be rendered, the next source is checked. If the type attribute is specified, it's compared against the types Gecko can play, and if it's not recognized, the server doesn't even get queried; instead, the next source element is checked at once.

유형을 선택하지 않으면, 일단 받아서 Gecko가 처리할 수 있는지 확인한다. 처리할 수 없다면 다음 소스를 받아 확인한다.
하지만, 유형을 선택하면 Gecko가 처리할 수 있는 것과 비교하고, 만약 없다면 받지않고 않고 바로 다음 소스를 확인할 수 있기 때문에 로드 시간이 절약된다. 
게코 Gecko는 브라우저 내에 미디어와 화면 배치를 처리하는 세부장치를 일컫는 말로 그냥 브라우저라고 이해하면 된다.

예제

This example demonstrates how to offer a video in Ogg format for users whose browsers support Ogg format, and a QuickTime format video for users whose browsers support that. If the audio or video element is not supported by the browser, a notice is displayed instead. If the browser supports the element but does not support any of the specified formats, an error event is raised and the default media controls (if enabled) will indicate an error.

Ogg포멧을 지원하는 브라우져와 QuickTIme 동영상포멧을 지원하는 브라우저에 모두 대응하기위한 예제이다. 만약 audio나 video 요소를 전혀 지원하지 않는 브라우져가 있다면 알림 메세지"HTML5비디오을 지원하지 않습니다."가 대신 출력된다. 만약 audio나 video 요소를 지원하지만, 사용된 모든 포멧을 지원하지 않는다면,  기본 미디어 장치로 에러가 표시된다.

<video controls>
  <source src="foo.ogg" type="video/ogg"> <!-- Picked by Firefox -->
  <source src="foo.mov" type="video/quicktime"> <!-- Picked by Safari -->
  I'm sorry; your browser doesn't support HTML5 video.
</video>

For more examples, see Using audio and video in Firefox.

DOM Interface

This element implements the HTMLSourceElement interface.

호환성

Desktop

기능	구글크롬	파이어폭스Gecko)	인터넷 익스플로러	Opera	Safari
기본적인 지원	지원	3.5 (1.9.1)	9.0	지원	지원
media attribute	지원			지원	지원

Mobile

기능	안드로이드	파이어폭스 모바일(Gecko)	인터넷 익스플로러 모바일	오페라 모바일	사파리 모바일
기본적인 지원	지원	1.0 (1.0)
media attribute	지원

참고

• https://developer.mozilla.org/en/HTML/Element/source