TAGS

Draft
  • account_tree
  • bug_report

Element<video>

비디오 요소를 삽입한다.

  • DOM Interface

    HTMLVideoElement

  • 태그 생략

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

속성

autoplay Boolean

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

이 요소에서의 사용 참고 사항

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

controls 

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

crossorigin DOMString

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

height DOMString

요소의 세로 크기를 픽셀(pixels)을 기본 단위로 해서 지정한다.

loop Boolean

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

muted Boolean

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

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

이 요소에서의 사용 참고 사항

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

playsinline string

iOS 기반 웹브라우저에서 비디오 요소를 인라인으로 출력하며 자동으로 전체 화면 모드로 전환되지 않는다. 자동 재생시 지정해야 한다.

poster DOMString

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

preload DOMString

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

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

요소의 가로 크기를 픽셀(pixels)을 기본 단위로 해서 지정한다.

전역 속성

data-* DOMString

사용자 데이터를 지정하는 특별한 속성이다. DOM으로 데이터를 받아 자바스크립트 로직에 사용할 수 있다.

draggable Enumeration

요소의 드래그(drag) 가능 여부를 설정한다.

id String

요소를 식별할 수 있는 고유 값을 설정한다.

title String

요소에 마우스 포인터를 올리면 말풍선으로 내용으로 출력한다.

예제

기술 문서

자동 재생에 대한 웹브라우저별 가이드

자동 재생에 대한 웹브라우저 정책 변화

비디오의 자동 재생은 이용자 입장에서 보면 강제적인 요인이 있다. 따라서 최근에 웹브라우저들은 자동 재생에 대한 기준을 엄격하게 하고 있다. 처음에는 자동 재생 자체를 막았지만 이제는 요건에 따라 자동 재생을 허용하고 있다.

데스크탑용 웹브라우저, 안드로이드 모바일 웹브라우저의 자동 재생 정책

<video autoplay muted></video>

위와 같이 속성을 정의해 주면 자동 재생이 가능하다. 즉 음소거를 한 경우라면 자동 재생을 허용해 주고 있다.

iOS 용 웹브라우저의 자동 재생 정책

<video autoplay muted playsinline></video>

위와 같이 playsinline 속성까지 추가해주면 자동 재생을 허용한다. playsinline 속성은 자동으로 처리되는 전체화면 모드를 제한한다.

외부 리소스

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

지원 웹브라우저