HTMLVideoElement 인터페이스는 Video object를 조작하는데 필요한 프로퍼티와 메소드를 제공합니다. HTMLMediaElement와 HTMLElement를 상속합니다.

지원하는 미디어 포맷 목록은 브라우저마다 다릅니다. 여러분은 적절한 범위의 브라우저에서 지원하는 한가지 비디어 포맷을 제공하던가, 지원할 모든 브라우저를 위한 여러 종류의 미디어 포맷을 제공해야 합니다.

속성(Properties)

HTMLMediaElement와 HTMLElement의 속성들도 상속 받습니다.

HTMLVideoElement.height
표시 영역의 높이를 나타내는 HTML Attribute height의 값을  DOMString으로 반환합니다. 단위는 pixel입니다.
HTMLVideoElement.poster
비디오 데이터가 없을 때 보여줄 이미지를 지정하는 HTML Attribute poster의 값을 DOMString로 반환합니다.
HTMLVideoElement.videoHeight Read only
비디오의 height를 부호 없는 정수로 나타낸 값을 반환합니다. 비디오가 없는 경우 0을 반환합니다.
HTMLVideoElement.videoWidth Read only
비디오의 width를 부호 없는 정수로 나타낸 값을 반환합니다. 비디오가 없는 경우 0을 반환합니다.
HTMLVideoElement.width
표시 영역의 높이를 나타내는 HTML Attribute width의 값을  DOMString으로 반환합니다. 단위는 pixel입니다.

Gecko 전용 속성

HTMLVideoElement.mozParsedFrames  Read only
미디어 소스에서 파싱된 비디오 프레임 수를 unsigned long 값으로 반환합니다.
HTMLVideoElement.mozDecodedFrames  Read only
화상으로 디코딩 된 비디오 프레임 수를 unsigned long 값으로 반환합니다.
HTMLVideoElement.mozPresentedFrames  Read only
렌더링 파이프 라인을 통해 출력된 디코드 프레임 수를 unsigned long 값으로 반환합니다.
HTMLVideoElement.mozPaintedFrames  Read only
화면에 그려진 프레임 수를 unsigned long 값으로 반환합니다.
HTMLVideoElement.mozFrameDelay  Read only
지연 출력된 비디오 프레임을 초 단위로 double 값으로 반환한다.
HTMLVideoElement.mozHasAudio  Read only
비디오와 연관된 오디오 존재 여부를 boolean 값으로 반환한다.

Microsoft 확장 속성

HTMLVideoElement.msFrameStep() 
프레임 단위로 앞/뒤로 이동합니다.
HTMLVideoElement.msHorizontalMirror 
비디오의 좌/우 반전 시키거나 반전된 상태를 반환합니다.
HTMLVideoElement.msInsertVideoEffect() 
미디어 파이프라인에 특정 비디오 효과를 추가합니다.
HTMLVideoElement.msIsLayoutOptimalForPlayback  Read only
더 효과적인 비디오 렌더링이 가능하면 true를 반환합니다.
HTMLVideoElement.msIsStereo3D  Read only
시스템이 비디오를 stereo 3-D로 판단하였는지 여부를 반환합니다. 값을 true로 지정한다면 video를 stereo 3-D로 인식합니다..
HTMLVideoElement.msZoom 
비디오 프레임을 출력부에 딱 맞게 트림합니다.

메소드

HTMLMediaElement와 HTMLElement의 메소드도 상속 받습니다.

HTMLVideoElement.getVideoPlaybackQuality()
현재 재생 결과를 담고 있는 VideoPlaybackQuality 객체를 반환합니다. 전체 프레임 중 drop 되거나 손실된 프레임 등 재생 정보를 포함합니다.

Events

HTMLMediaElement와 HTMLElement의 이벤트를 상속합니다. addEventListener() 메소드 또는 oneventname 프로퍼티에 리스너를 전달하여 이벤트를 수신합니다.

명세

Specification Status Comment
Media Source Extensions
The definition of 'Extensions to HTMLVideoElement' in that specification.
Recommendation getVideoPlaybackQuality() 메소드 추가.
HTML Living Standard
The definition of 'HTMLVideoElement' in that specification.
Living Standard
HTML5
The definition of 'HTMLVideoElement' in that specification.
Recommendation 초기 정의.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
HTMLVideoElementChrome Full support YesEdge Full support YesFirefox Full support 4IE Full support 9Opera Full support 10.5Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
getVideoPlaybackQuality
Experimental
Chrome Full support 23Edge Full support 12Firefox Full support 42
Full support 42
No support 25 — 42
Notes Disabled
Notes Limited support to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed when Media Source Extensions was enabled by default in Firefox 42.
Disabled From version 25 until version 42 (exclusive): this feature is behind the media.mediasource.enabled preference. To change preferences in Firefox, visit about:config.
IE Full support 11
Notes
Full support 11
Notes
Notes Only works on Windows 8+.
Opera Full support 15Safari Full support 8WebView Android Full support 4.4.3Chrome Android ? Firefox Android No support NoOpera Android Full support 14Safari iOS No support NoSamsung Internet Android ?
heightChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 10.5Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
mozDecodedFrames
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox Full support 5IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 5Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
mozFrameDelay
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox Full support 5IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 5Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
mozHasAudio
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox Full support 15IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 15Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
mozPaintedFrames
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox Full support 5IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 5Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
mozParsedFrames
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox Full support 5IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 5Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
mozPresentedFrames
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox Full support 5IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 5Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
msIsStereo3D
Non-standard
Chrome No support NoEdge Full support YesFirefox No support NoIE Full support 10Opera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
posterChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 10.5Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
videoHeightChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 10.5Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
videoWidthChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 10.5Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
widthChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 10.5Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

더 보기

문서 태그 및 공헌자

이 페이지의 공헌자: ahnzaz
최종 변경자: ahnzaz,