ELEMENTS

Editing
  • account_tree
  • bug_report

<video>

비디오 미디어를 삽입한다.

  • 콘텐츠 분류

    EMBEDDED CONTENT, FLOW CONTENT, INTERACTIVE CONTENT, PALPABLE CONTENT, PHRASING CONTENT

    controls 애트리뷰트가 활성되면 인터랙티브 콘텐츠(interactive content)로 분류

  • 허용된 부모 요소 또는 위치

    EMBEDDED CONTENT

    임베디드 콘텐츠(embedded-content)가 예상되는 위치

  • 허용된 자식 요소

    <SOURCE>, <TRACK>

    • src 애트리뷰트가 명시된 경우에 0개 이상의 <track> 요소
    • src 애트리뷰트 명시되지 않은 경우에 0개 이상의 <source> 요소, 0개 이상의 <track> 요소
  • 태그 생략

    시작 태그, 종료 태그 모두 작성

  • DOM Interface

    HTMLVideoElement

    [Exposed=Window]
    interface HTMLVideoElement : HTMLMediaElement {
      [HTMLConstructor] constructor();
    
      [CEReactions] attribute unsigned long width;
      [CEReactions] attribute unsigned long height;
      readonly attribute unsigned long videoWidth;
      readonly attribute unsigned long videoHeight;
      [CEReactions] attribute USVString poster;
      [CEReactions] attribute boolean playsInline;
    };

구문

마크업 형식
<video></video>

애트리뷰트

src non-empty URL

사용할 리소스의 경로를 설정한다.

About Non-empty URL

비워있지 않은 유효한 URL을 나타내는 문자열을 나타낸다.

crossorigin enumerated attribute

교차출처(CORS) 정책에 따라 리소스를 가져올지를 나타낸다.

About Enumerated attribute

제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.

사용되는 키워드

anonymous

교차 출처(CORS) 요청을 수행하지만  별도의 자격 증명을 보내지 않고 same-origin으로 설정되어 익명으로 요청을 한다. 

use-credentials

교차 출처(CORS) 요청을 수행하면서 쿠키(cookie), X.509 인증서, HTTP Basic 인증 중 한 가지 이상의 자격 증명을 포함하는 include로 설정되어 요청을 한다. 

poster non-empty URL potentially surrounded by spaces

비디오가 재생되기 전 보여질 이미지를 명시적으로 지정한다.

About Non-empty URL potentially surrounded by spaces

문자열에서 선행 및 후행 ASCII 공백을 제거한 후 유효한 비공백 URL인 경우 문자열은 공백으로 둘러싸일 수 있는 유효한 비공백 URL을 나타낸다.

preload enumerated attribute

미디오 요소(<audio>, <video>)로 사용되는 리소스에 대한 네트워크 작업 방식을 지정한다.

About Enumerated attribute

제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.

기본값

auto
설정하지 않으면 기본 값으로 처리한다.

사용되는 키워드

auto

사용자와 관계없이 웹 문서가 로드 시 미디어 리소스를 가능한 부분까지 미리 로드한다.

metadata

미디어 리소스의 메타데이터 부분까지 미리 로드한다.

none

미디어 리소스를 미리 로드하지 않는다.

autoplay boolean attributes

비디오, 오디오 미디어에 대한 자동 재생을 설정한다.

About Boolean attributes

불리언(boolean) 값을 나타낸다. 다음 불리언 값을 갖는 애트리뷰트인 disabled를 예를 들어 다음 세 가지 값은 모두 참(true)이다.

<input disabled>, <input disabled="disabled">, <input disabled="">

이 요소에서의 특징

웹 페이지가 로드가 되면 자동 재생이 되도록 설정한다.

playsinline boolean attributes

비디오가 기본적으로 문서의 인라인(inline)으로 표시되어야 하며 전체 화면이나 독립적인 크기 조정이 가능한 창 대신 요소의 재생 영역에 제한되어 표시되어야 한다는 유저 에이전트에 대한 힌트 역할을 한다.

playsinline 애트리뷰트가 없다고 해서 비디오가 기본적으로 전체 화면으로 표시된다는 의미는 아니다. 실제로 대부분의 유저 에이전트는 기본적으로 모든 비디오를 인라인으로 재생하도록 선택했으며 이러한 유저 에이전트에서는 playsinline 애트리뷰트가 적용되지 않는다.

About Boolean attributes

불리언(boolean) 값을 나타낸다. 다음 불리언 값을 갖는 애트리뷰트인 disabled를 예를 들어 다음 세 가지 값은 모두 참(true)이다.

<input disabled>, <input disabled="disabled">, <input disabled="">

loop boolean attributes

비디오나 오디오 재생이 끝나면 처음으로 돌아가서 다시 재생한다.

About Boolean attributes

불리언(boolean) 값을 나타낸다. 다음 불리언 값을 갖는 애트리뷰트인 disabled를 예를 들어 다음 세 가지 값은 모두 참(true)이다.

<input disabled>, <input disabled="disabled">, <input disabled="">

muted boolean attributes

오디오를 출력하지 않게 한다.

About Boolean attributes

불리언(boolean) 값을 나타낸다. 다음 불리언 값을 갖는 애트리뷰트인 disabled를 예를 들어 다음 세 가지 값은 모두 참(true)이다.

<input disabled>, <input disabled="disabled">, <input disabled="">

이 요소에서의 특징

명시하지 않으면 기본 값으로 적용된다.

기본값

false
명시하지 않으면 기본 값으로 적용된다.
controls boolean attributes

비디오나 오디오를 제어하기 위한 UI를 표시한다.

About Boolean attributes

불리언(boolean) 값을 나타낸다. 다음 불리언 값을 갖는 애트리뷰트인 disabled를 예를 들어 다음 세 가지 값은 모두 참(true)이다.

<input disabled>, <input disabled="disabled">, <input disabled="">

width dimension attribute

요소의 시각적 가로 크기를 CSS의 픽셀(pixels)을 기본 단위로 해서 지정한다. 음수가 아닌 유효한 정수여야 한다.

height dimension attribute

요소의 시각적 세로 크기를 CSS의 픽셀(pixels)을 기본 단위로 해서 지정한다. 음수가 아닌 유효한 정수여야 한다.

예제

Example

글로벌 애트리뷰트

일부 글로벌 애트리뷰트는 이 요소에서 사용되지 않을 수 있다.

글로벌 이벤트 핸들러

일부 글로벌 이벤트 핸들러는 이 요소에서 사용되지 않을 수 있다. 이벤트 등록은 자바스크립트 사용을 권장한다.

외부 리소스

video 태그 브라우저, 모바일 이슈 정리 사항
웹브라우저별 비디오 자동 재생 처리를 정리했다.

버전 명세

HTML Standard
#the-video-element

지원 웹브라우저