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

<p><strong><code>HTMLVideoElement</code></strong> インターフェースは、ビデオオブジェクトを操作するための特別なプロパティとメソッドを提供します。また、{{domxref("HTMLMediaElement")}} と {{domxref("HTMLElement")}} のプロパティとメソッドを継承します。</p>

<p><a href="/ja/docs/Web/Media/Formats">サポートされているメディアフォーマット</a>のリストは、ブラウザによって異なります。関連するすべてのブラウザがサポートする単一のフォーマットで動画を提供するか、またはサポートする必要のあるすべてのブラウザがカバーするように、複数の動画ソースを十分に異なるフォーマットで提供する必要があります。</p>

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

<h2 id="Properties">Properties</h2>

<p><em>その先祖のインターフェースである {{domxref("HTMLMediaElement")}} と {{domxref("HTMLElement")}} からプロパティを継承します。</em></p>

<dl>
 <dt>{{domxref("HTMLVideoElement.height")}}</dt>
 <dd>{{htmlattrxref("height", "video")}} を反映した {{domxref("DOMString")}} です。表示領域の高さを CSS ピクセルで指定する HTML 属性です。</dd>
 <dt>{{domxref("HTMLVideoElement.poster")}}</dt>
 <dd>{{htmlattrxref("poster", "video")}} を反映した {{domxref("DOMString")}} です。HTML 属性で、動画データがないときに表示する画像を指定します。</dd>
 <dt>{{domxref("HTMLVideoElement.videoHeight")}} {{readonlyInline}}</dt>
 <dd>リソースの固有の高さを示す符号なし整数値をCSSピクセル、または、まだ利用可能なメディアがない場合は 0 を返します。</dd>
 <dt>{{domxref("HTMLVideoElement.videoWidth")}} {{readonlyInline}}</dt>
 <dd>リソースの本質的な幅を示す符号なし整数値をCSSピクセル、または、まだ利用可能なメディアがない場合は 0 を返します。</dd>
 <dt>{{domxref("HTMLVideoElement.width")}}</dt>
 <dd>{{htmlattrxref("width", "video")}} を反映した{{domxref("DOMString")}} です。表示領域の幅を CSS ピクセルで指定する HTML 属性です。</dd>
 <dt>{{DOMxRef("HTMLVideoElement.autoPictureInPicture")}}</dt>
 <dd><code>autoPictureInPicture</code> 属性は、ユーザがタブやアプリケーションを切り替えると、自動的にビデオ要素のピクチャ・イン・ピクチャモードに入ったり、抜けたりします。</dd>
 <dt>{{DOMxRef("HTMLVideoElement.disablePictureInPicture")}}</dt>
 <dd><code>disablePictureInPicture</code> プロパティは、ユーザーにピクチャ・イン・ピクチャを提案しないか、または自動的に要求するように、ユーザーエージェントにヒントを与えます。</dd>
</dl>

<h3 id="Gecko-specific_properties">Gecko-specific properties</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>秒</code>単位で返します。</dd>
 <dt>{{domxref("HTMLVideoElement.mozHasAudio")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
 <dd>動画に音声があるかどうかを示す {{JSxRef("Boolean", "真偽値")}} を返します。</dd>
</dl>

<h3 id="Microsoft_Extensions">Microsoft Extensions</h3>

<dl>
 <dt>{{DOMxRef("HTMLVideoElement.msFrameStep()")}} {{Non-standard_Inline}}</dt>
 <dd>ビデオを1フレーム前または1フレーム後ろにステップさせます。</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>動画をより効率的にレンダリングできるかどうかを示します。</dd>
 <dt>{{DOMxRef("HTMLVideoElement.msIsStereo3D")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
 <dd>読み込まれたビデオソースがステレオ 3D であるとシステムが判断するかどうかを決定します。true に設定された値は、ソースがステレオ 3D であることを示します。</dd>
 <dt>{{DOMxRef("HTMLVideoElement.msZoom")}} {{Non-standard_Inline}}</dt>
 <dd>ビデオフレームをビデオディスプレイに合わせてトリミングするかどうかを制御します。</dd>
</dl>

<h2 id="Methods">Methods</h2>

<p><em>親である {{domxref("HTMLMediaElement")}} とその先祖である {{domxref("HTMLElement")}} からメソッドを継承します。</em></p>

<dl>
 <dt>{{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} {{experimental_inline}}</dt>
 <dd>現在の再生メトリクスを含む {{domxref("VideoPlaybackQuality")}} オブジェクトを返します。この情報には、ドロップされたフレーム数や破損したフレーム数、総フレーム数などが含まれます。</dd>
 <dt>{{DOMxRef("HTMLVideoElement.requestPictureInPicture()")}}</dt>
 <dd>ユーザーエージェントがピクチャーインピクチャーモードに入るようにビデオを作成することをリクエストします。</dd>
</dl>

<h2 id="Event_Handlers">Event Handlers</h2>

<p><em>親である {{domxref("HTMLMediaElement")}} とその先祖である {{domxref("HTMLElement")}} からイベントハンドラを継承します。</em></p>

<dl>
 <dt>{{DOMxRef("HTMLVideoElement.onenterpictureinpicture")}}</dt>
 <dd>動画がピクチャインピクチャモードになったときに {{DOMxRef("HTMLVideoElement")}} に送られる {{Event("enterpictureinpicture")}} イベントのイベントハンドラです。</dd>
 <dt>{{Event("leavepictureinpicture")}}</dt>
 <dd>文書がピクチャインピクチャモードを終了したときに {{DOMxRef("HTMLVideoElement")}} に送信される {{Event("leavepictureinpicture")}} イベントのイベントハンドラです。このハンドラは、{{DOMxRef("PictureInPictureWindow")}} 全体が提示されたときにのみ呼び出されます。</dd>
</dl>

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

<p><em>親である {{domxref("HTMLMediaElement")}} およびその祖先である {{domxref("HTMLElement")}} からイベントを継承します。</em><code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>を使用するか、このインターフェイスの <code>on<em>eventname</em></code> プロパティにイベントリスナーを割り当てることで、これらのイベントをリッスンします。</p>

<dl>
 <dt>{{Event("enterpictureinpicture")}}</dt>
 <dd>ピクチャーインピクチャーモードになったときに {{DOMxRef("HTMLVideoElement")}} に送信されます。</dd>
 <dt>{{Event("leavepictureinpicture")}}</dt>
 <dd>ピクチャーインピクチャーモードになったときに {{DOMxRef("HTMLVideoElement")}} に送信されます。</dd>
</dl>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">ステータス</th>
   <th scope="col">コメント</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "#htmlvideoelement", "HTMLVideoElement")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

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

<h2 id="See_also">See also</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="/ja/docs/Web/Media/Formats">サポートされているメディアフォーマット</a></li>
</ul>