HTML <video> 태그

정의와 사용법

<video> 태그는 문서에 비디오 내용(예: 영화 스포트라이트 또는 다른 비디오 스트림)을 삽입하는 데 사용됩니다.

<video> 태그는 하나 이상의 다른 비디오 소스를 포함한 <source> 태그。브라우저는 지원하는 첫 번째 소스를 선택합니다.

<video> 과 </video> 태그 사이의 텍스트는 지원되지 않을 때만 표시됩니다 <video> 요소의 브라우저에서 표시됩니다.

HTML은 세 가지 비디오 형식을 지원합니다: MP4, WebM, OGG.

브라우저 MP4 WebM Ogg
에지 지원 지원 지원
크롬 지원 지원 지원
파이어폭스 지원 지원 지원
사파리 지원 지원 지원하지 않음
오페라 지원 지원 지원

또한 참조하세요:

HTML DOM 참조 가이드:HTML Audio/Video DOM 참조서

예제

비디오 재생:

<video width="640" height="360" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  당신의 브라우저는 비디오 태그를 지원하지 않습니다.
</video>

본인이 직접 시도해 보세요

휴대폰: 팁과 주석

휴대폰:오디오 파일에 대해서는 <audio> 태그를 참조하세요.

선택 사항의 속성

속성 값 설명
autoplay autoplay 비디오가 준비되면 즉시 재생되도록 설정합니다.
controls controls 표시되어야 할 비디오 컨트롤(예: 재생/정지 버튼 등)을 정의합니다.
height 픽셀 비디오 플레이어의 높이를 설정합니다.
loop loop 비디오가 매번 끝날 때마다 다시 시작됩니다.
muted muted 비디오의 오디오 출력을 무음으로 설정합니다.
poster URL 비디오 다운로드 중이거나 사용자가 재생 버튼을 클릭하기 전에 표시되는 이미지를 정의합니다.
preload
  • auto
  • metadata
  • none
 페이지가 로드될 때 비디오가 로드되거나 어떻게 로드되어야 할지 정의합니다.
src URL 비디오 파일의 URL을 정의합니다.
width 픽셀 비디오 플레이어의 너비를 설정합니다.

全局属性

<video> 标签还支持 HTML의 전역 속성。

事件属性

<video> 标签还支持 HTML의 이벤트 속성。

CSS 설정의 기본값

无。

浏览器支持

표中的数字注明了首个完全支持该属性的浏览器版本。

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
4.0 9.0 3.5 3.1 11.5