# 비디오(Video) 요소

## \<video>

* 동영상 콘텐츠를 HTML 문서에 포함하기 위해서 사용.
* `src` 속성이나  요소을 이용해 여러 개의 동영상 소스 중 하나를 표시. (현재는 mp3, mp4가 모든 브라우저에 지원되기 때문에 `<source>`를 사용하지 않아도 괜찮다.)

## 속성

* `src` - 비디오 파일 경로
* `poster` - 포스터 이미지 경로 (`poster` 속성이 없을 경우 비디오의 첫 화면이 나옴)
* `preload` - 사용자 경험 향상(메타데이터 / 비디오 다운로드)에 관한 설정
  * none, metadata, auto(기본 값)
* `controls` - 재생 컨트롤 표시 설정
* `autoplay` - 자동 재생 설정
  * 자동재생은 가급적 사용하지 않는 것을 권장하지만 꼭 사용한다면 `muted`속성을 사용하여 음소거한다.&#x20;
* `loop` - 반복 설정
* `muted` - 음소거 설정

## 특징

* `src` : 값이 반드시 필요하다
* `preload`, `controls`, `autoplay`, `loop`, `muted` : 값이 반드시 필요하지 않다.

## 예제 &#x20;

```markup
<video src="videofile.mp4" poster="posterimage.jpg">
  HTML5 <code>video</code> 요소를 지원하지 않는 구형 웹 브라우저를 사용
  중입니다.
  <a href="http://outdatedbrowser.com/ko">최신형 브라우저로 업데이트</a> 하세요.
</video>
```

```markup
<!-- video + track -->
<video
  src="media/video/holzweiler.mp4"
  poster="media/video/holzweiler-short_cover.png"
  autoplay
  loop="true"
  muted="true"
>
  <p>
    HTML5 <code>video</code> 요소를 지원하지 않는 구형 웹 브라우저를 사용
    중입니다.
    <a href="http://outdatedbrowser.com/ko">최신형 브라우저로 업데이트</a>
    하세요.
  </p>
</video>
```

##


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shhn0509.gitbook.io/html-and-css/html/undefined-12/untitled-6.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.