lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

webLightPracticeChapter4Title

lesson9Title

lesson10Title

lesson11Title

webLightPracticeChapter1Title

lesson12Title

webLightPracticeChapter2Title

lesson13Title

lesson14Title

webLightPracticeChapter3Title

webLightPracticeChapter5Title

webLightPracticeChapter6Title

# HTML video 태그

`<video>` 태그를 사용하면 웹페이지에 동영상을 표시할 수 있습니다.

HTML video 태그는 `src` 속성을 활용해 동영상 파일의 경로를 지정합니다.

동영상 파일 경로는 로컬(같은 컴퓨터 내) 파일의 위치를 가리키거나, 인터넷 상의 URL 주소일 수도 있습니다.

`<video>` 태그의 내부에는 동영상이 지원되지 않을 때 표시할 대체 컨텐츠를 작성할 수 있습니다.

예를 들어, 다음과 같은 HTML 코드를 사용하면 동영상 파일의 경로를 지정할 수 있습니다.

```html title="로컬 동영상 파일"
<video src="/src/생일.mp4">생일</video>
```

<br />

```html title="인터넷 상의 URL"
<video src="https://www.my-drive.com/birthday.mp4">생일</video>
```

<br />

실제로 [http://media.w3.org/2010/05/sintel/trailer.mp4](http://media.w3.org/2010/05/sintel/trailer.mp4)와 같은 동영상 URL을 웹사이트에 표시하려면, 아래와 같이 HTML을 작성할 수 있습니다.

```html title="동영상 추가"
<video src="http://media.w3.org/2010/05/sintel/trailer.mp4">테스트 영상</video>
```

하지만 이렇게 video 태그를 활용하면 동영상을 재생하거나 멈출 수 없습니다.

재생 콘트롤을 추가하려면 video 태그에 `controls` 속성을 추가해야 합니다.

이 컨트롤은 재생/일시정지, 음량 조절과 같은 버튼과 영상 진행률을 조절하는 슬라이더로 구성되어 있습니다.

```html title="동영상 콘트롤 추가"
<video src="http://media.w3.org/2010/05/sintel/trailer.mp4" controls>
  테스트 영상
</video>
```

위와 같이 video 태그에 "controls" 속성을 추가하면, 동영상을 재생하거나 멈출 수 있습니다.