HTML 사전

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 지원        

참고

댓글

댓글 본문
작성자
비밀번호
  1. engfordev
    네넵.. 요소 이름은 영문으로 써주는게 좋을 것 같네요 ^^
    대화보기
    • Albert.q.park
      1. 재수정하며 고민하다가 "동영상 요소(video)나 음성 요소(audio)" 가 읽기 편하지만 "video(동영상) 요소나 audio(음성) 요소"로 계속 적습니다. video와 audio가 영어가 아닌 HTML언어로 사용되었기 때문입니다.
      대화보기
      • engfordev
        아참.. 멀티미디어 resource는 용어사전에 문의를 구해뒀어요~
        https://docs.google.com/spread...
      • engfordev
        수고하셨습니다~
        1. 설명 부분을 약간 다르게 써봤어요~
        >> source 요소는 동영상 요소(video)나 음성 요소(audio) 등의 멀티미디어 자료의 위치를 지정하기 위해 사용하는 요소이다. source 요소 안에는 내용이 들어가지 않는다.
        2. src
        저도 자료의 주소.. 가 좋을 것 같은데요?
        3. 유형..
        자원 >> 멀티미디어 파일의 MIME-type을 가리킨다. 추가로 코덱관련 매개변수를 넣을 수도 있다.
        4. 미디어
        Media query of the resource's intended media.
        요부분은 저도 잘 이해가 잘 안되네요 ㅎㅎ 다른 분의 도움을 구해볼게요~(뒤에 내용을 읽어보니 이런 내용이 아닌가 해요, 미디어 자료의 type값을 알아내기 위해 서버로 보내는 질의어.. 같은.. )
        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.
        type 속성이 지정이 안되어 있으면, 웹브라우저는 서버로부터 미디어의 type값을 구한다. (이 과정에서, 서버로부터 미디어의 type값을 구할 때 query를 사용한다는 의미일까요? --a)그리고 겍코에서 그 미디어파일을 재생할 수 있는지 확인한다. 재생할 수 없으면, 다음 source로 넘어가서 확인한다.
        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.
        반면에 type 속성이 지정되어 있는 경우에는, 이 값을 겍코가 재생할 수 있는 type들과 비교해서, 재생할 수 있는 type이 아니라면, 웹브라우저는 서버로 미디어의 type을 알아내는 query를 보내지 않는다. 대신에 바로 다음번 source 요소로 넘어간다.
      버전 관리
      큐즈
      현재 버전
      선택 버전
      graphittie 자세히 보기