비디오(Video) 요소

<video>

• 동영상 콘텐츠를 HTML 문서에 포함하기 위해서 사용.

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

속성

• src - 비디오 파일 경로

• poster - 포스터 이미지 경로 (poster 속성이 없을 경우 비디오의 첫 화면이 나옴)

• preload - 사용자 경험 향상(메타데이터 / 비디오 다운로드)에 관한 설정

  • none, metadata, auto(기본 값)

• controls - 재생 컨트롤 표시 설정

• autoplay - 자동 재생 설정

  • 자동재생은 가급적 사용하지 않는 것을 권장하지만 꼭 사용한다면 muted속성을 사용하여 음소거한다.

• loop - 반복 설정

• muted - 음소거 설정

특징

• src : 값이 반드시 필요하다

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

예제

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

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