..

Search

src

src

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

코딩연습 ▶


지원하는 브라우저 및 버전

속성명

chrome

edge

ie

firefox

safari

opera

src 3.0 지원함 9.0 3.5 3.1 10.5

HTML5에서 변경된 사항

<video> 태그는 HTML5에서 새롭게 추가된 요소입니다.


연습문제