---
title: HTMLVideoElement
slug: Web/API/HTMLVideoElement
translation_of: Web/API/HTMLVideoElement
---
<div>{{APIRef("HTML DOM")}}</div>

<p><strong><code>HTMLVideoElement</code></strong> 인터페이스는 Video object를 조작하는데 필요한 프로퍼티와 메소드를 제공합니다. {{domxref("HTMLMediaElement")}}와 {{domxref("HTMLElement")}}를 상속합니다.</p>

<p><a href="/en-US/docs/HTML/Supported_media_formats">지원하는 미디어 포맷</a> 목록은 브라우저마다 다릅니다. 여러분은 적절한 범위의 브라우저에서 지원하는 한가지 비디어 포맷을 제공하던가, 지원할 모든 브라우저를 위한 여러 종류의 미디어 포맷을 제공해야 합니다.</p>

<p>{{InheritanceDiagram(600, 140)}}</p>

<h2 id="속성(Properties)">속성(Properties)</h2>

<p><em>{{domxref("HTMLMediaElement")}}와 </em><em>{{domxref("HTMLElement")}}의 속성들도 상속 받습니다.</em></p>

<dl>
 <dt>{{domxref("HTMLVideoElement.height")}}</dt>
 <dd>표시 영역의 높이를 나타내는 HTML Attribute {{htmlattrxref("height", "video")}}의 값을  {{domxref("DOMString")}}으로 반환합니다. 단위는 pixel입니다.</dd>
 <dt>{{domxref("HTMLVideoElement.poster")}}</dt>
 <dd>비디오 데이터가 없을 때 보여줄 이미지를 지정하는 HTML Attribute {{htmlattrxref("poster", "video")}}의 값을 {{domxref("DOMString")}}로 반환합니다.</dd>
 <dt>{{domxref("HTMLVideoElement.videoHeight")}} {{readonlyInline}}</dt>
 <dd>비디오의 height를 부호 없는 정수로 나타낸 값을 반환합니다. 비디오가 없는 경우 0을 반환합니다.</dd>
 <dt>{{domxref("HTMLVideoElement.videoWidth")}} {{readonlyInline}}</dt>
 <dd>비디오의 width를 부호 없는 정수로 나타낸 값을 반환합니다. 비디오가 없는 경우 0을 반환합니다.</dd>
 <dt>{{domxref("HTMLVideoElement.width")}}</dt>
 <dd>표시 영역의 높이를 나타내는 HTML Attribute {{htmlattrxref("width", "video")}}의 값을  {{domxref("DOMString")}}으로 반환합니다. 단위는 pixel입니다.</dd>
</dl>

<h3 id="Gecko_전용_속성">Gecko 전용 속성</h3>

<dl>
 <dt>{{domxref("HTMLVideoElement.mozParsedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
 <dd>미디어 소스에서 파싱된 비디오 프레임 수를 <code>unsigned long</code> 값으로 반환합니다.</dd>
 <dt>{{domxref("HTMLVideoElement.mozDecodedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
 <dd>화상으로 디코딩 된 비디오 프레임 수를 <code>unsigned long</code> 값으로 반환합니다.</dd>
 <dt>{{domxref("HTMLVideoElement.mozPresentedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
 <dd>렌더링 파이프 라인을 통해 출력된 디코드 프레임 수를 <code>unsigned long</code> 값으로 반환합니다.</dd>
 <dt>{{domxref("HTMLVideoElement.mozPaintedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
 <dd>화면에 그려진 프레임 수를 <code>unsigned long</code> 값으로 반환합니다.</dd>
 <dt>{{domxref("HTMLVideoElement.mozFrameDelay")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
 <dd>지연 출력된 비디오 프레임을 초 단위로 <code>double</code> 값으로 반환한다.</dd>
 <dt>{{domxref("HTMLVideoElement.mozHasAudio")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
 <dd>비디오와 연관된 오디오 존재 여부를 {{JSxRef("Boolean","boolean")}} 값으로 반환한다.</dd>
</dl>

<h3 id="Microsoft_확장_속성">Microsoft 확장 속성</h3>

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

<h2 id="메소드">메소드</h2>

<p><em>{{domxref("HTMLMediaElement")}}와 {{domxref("HTMLElement")}}의 메소드도 상속 받습니다.</em></p>

<dl>
 <dt>{{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} {{experimental_inline}}</dt>
 <dd>현재 재생 결과를 담고 있는 {{domxref("VideoPlaybackQuality")}} 객체를 반환합니다. 전체 프레임 중 drop 되거나 손실된 프레임 등 재생 정보를 포함합니다.</dd>
</dl>

<h2 id="Events">Events</h2>

<p><em>{{domxref("HTMLMediaElement")}}와 {{domxref("HTMLElement")}}의 이벤트를 상속합니다. </em><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> 메소드 또는 <code>on<em>eventname</em></code> 프로퍼티에 리스너를 전달하여 이벤트를 수신합니다.</p>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Media Source Extensions', '#idl-def-HTMLVideoElement', 'Extensions to HTMLVideoElement')}}</td>
   <td>{{Spec2("Media Source Extensions")}}</td>
   <td><code>getVideoPlaybackQuality()</code> 메소드 추가.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "#htmlvideoelement", "HTMLVideoElement")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-video-element", "HTMLVideoElement")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>초기 정의.</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<p>{{Compat("api.HTMLVideoElement")}}</p>

<h2 id="더_보기">더 보기</h2>

<ul>
 <li>HTML 엘리먼트 구현체: {{HTMLElement("video")}}.</li>
 <li><a class="external" href="http://people.mozilla.org/~cpearce/paint-stats-demo.html">Demo of video paint statistics</a>(링크 소멸)</li>
 <li><a href="/en-US/docs/HTML/Supported_media_formats">지원하는 미디어 포맷</a></li>
</ul>