<video> 태그의 src 속성
HTML <video> 태그 ⇒
정의 및 특징
<video> 태그의 src 속성은 비디오 파일의 위치(URL)를 명시합니다.
아래의 예제 1에서 사용된 ogg 파일은 크롬이나 파이어폭스, 오페라 브라우저에서는 정상적으로 동작할 것입니다. 하지만 인터넷 익스플로러나 사파리 브라우저는 ogg 파일을 지원하지 않으므로, <video> 요소에 ogg 파일을 사용할 수 없습니다.
따라서 인터넷 익스플로러나 사파리를 비롯한 모든 브라우저에서 <video> 요소가 정상적으로 동작하도록 설정하려면, 아래의 예제 2처럼 <video> 요소 내에 여러 개의 <source> 요소를 추가하여 서로 다른 포맷의 비디오 파일을 연결해 주어야 합니다.
이때 브라우저는 <source> 요소들을 순서대로 확인하여 가장 먼저 사용할 수 있는 비디오 파일을 사용하게 됩니다.
문법
|
<video src="URL"> |
속성값
| 속성값 | 설명 | |
|---|---|---|
|
URL |
비디오 파일의 URL
1. 절대 주소(absolute URL) ex) href=“http://www.tcpschool.com/sample.mp4” 2. 상대 주소(relative URL) ex) href=“/meida/sample.mp4” |
예제 1
<video height="180" width="288" controls>
<source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
예제 2
<video height="180" width="288" controls>
<source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
<source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
지원하는 브라우저 및 버전
| 속성명 |
|
|
|
|
|
|
|---|---|---|---|---|---|---|
| src | 3.0 | 지원함 | 9.0 | 3.5 | 3.1 | 10.5 |
HTML5에서 변경된 사항
<video> 태그는 HTML5에서 새롭게 추가된 요소입니다.
