> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/html-and-css/html/undefined-12/untitled-6.md).

# 비디오(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>
```

##