この記事は翻訳作業中です。
HTMLVideoElement インターフェースは、ビデオオブジェクトを操作するための特別なプロパティとメソッドを提供します。また、HTMLMediaElement と HTMLElement のプロパティとメソッドを継承します。
サポートされているメディアフォーマットのリストは、ブラウザによって異なります。関連するすべてのブラウザがサポートする単一のフォーマットで動画を提供するか、またはサポートする必要のあるすべてのブラウザがカバーするように、複数の動画ソースを十分に異なるフォーマットで提供する必要があります。
<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/HTMLElement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLElement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#D4DDE4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#D4DDE4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#D4DDE4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLMediaElement</text></a><polyline points="331,89 321,84 321,94 331,89" stroke="#D4DDE4" fill="none"/><line x1="321" y1="89" x2="291" y2="89" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/HTMLVideoElement" target="_top"><rect x="131" y="65" width="160" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text x="211" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLVideoElement</text></a></svg></div>
a:hover text { fill: #0095DD; pointer-events: all;}
Properties
その先祖のインターフェースである HTMLMediaElement と HTMLElement からプロパティを継承します。
HTMLVideoElement.heightheightを反映したDOMStringです。表示領域の高さを CSS ピクセルで指定する HTML 属性です。HTMLVideoElement.posterposterを反映したDOMStringです。HTML 属性で、動画データがないときに表示する画像を指定します。HTMLVideoElement.videoHeight読取専用- リソースの固有の高さを示す符号なし整数値をCSSピクセル、または、まだ利用可能なメディアがない場合は 0 を返します。
HTMLVideoElement.videoWidth読取専用- リソースの本質的な幅を示す符号なし整数値をCSSピクセル、または、まだ利用可能なメディアがない場合は 0 を返します。
HTMLVideoElement.widthwidthを反映したDOMStringです。表示領域の幅を CSS ピクセルで指定する HTML 属性です。HTMLVideoElement.autoPictureInPictureautoPictureInPicture属性は、ユーザがタブやアプリケーションを切り替えると、自動的にビデオ要素のピクチャ・イン・ピクチャモードに入ったり、抜けたりします。HTMLVideoElement.disablePictureInPicturedisablePictureInPictureプロパティは、ユーザーにピクチャ・イン・ピクチャを提案しないか、または自動的に要求するように、ユーザーエージェントにヒントを与えます。
Gecko-specific properties
HTMLVideoElement.mozParsedFrames読取専用- Returns an
unsigned longwith the count of video frames that have been parsed from the media resource. HTMLVideoElement.mozDecodedFrames読取専用- Returns an
unsigned longwith the count of parsed video frames that have been decoded into images. HTMLVideoElement.mozPresentedFrames読取専用- Returns an
unsigned longwith the count of decoded frames that have been presented to the rendering pipeline for painting. HTMLVideoElement.mozPaintedFrames読取専用- Returns an
unsigned longwith the count of presented frames which were painted on the screen. HTMLVideoElement.mozFrameDelay読取専用- Returns an
doublewith the time which the last painted video frame was late by, in seconds. HTMLVideoElement.mozHasAudio読取専用- Returns a
booleanindicating if there is some audio associated with the video.
Microsoft Extensions
HTMLVideoElement.msFrameStep()- Steps the video by one frame forward or one frame backward.
HTMLVideoElement.msHorizontalMirror- Gets or sets whether a video element is flipped horizontally in the display.
HTMLVideoElement.msInsertVideoEffect()- Inserts the specified video effect into the media pipeline.
HTMLVideoElement.msIsLayoutOptimalForPlayback読取専用- Indicates whether the video can be rendered more efficiently.
HTMLVideoElement.msIsStereo3D読取専用- Determines whether the system considers the loaded video source to be stereo 3-D or not. Value set to true indicates source is stereo 3D.
HTMLVideoElement.msZoom- Controls whether the video frame is trimmed to fit the video display.
Methods
親である HTMLMediaElement とその先祖である HTMLElement からメソッドを継承します。
HTMLVideoElement.getVideoPlaybackQuality()- 現在の再生メトリクスを含む
VideoPlaybackQualityオブジェクトを返します。この情報には、ドロップされたフレーム数や破損したフレーム数、総フレーム数などが含まれます。 HTMLVideoElement.requestPictureInPicture()- ユーザーエージェントがピクチャーインピクチャーモードに入るようにビデオを作成することをリクエストします。
Event Handlers
親である HTMLMediaElement とその先祖である HTMLElement からイベントハンドラを継承します。
HTMLVideoElement.onenterpictureinpicture- 動画がピクチャインピクチャモードになったときに
HTMLVideoElementに送られるenterpictureinpictureイベントのイベントハンドラです。 leavepictureinpicture- 文書がピクチャインピクチャモードを終了したときに
HTMLVideoElementに送信されるleavepictureinpictureイベントのイベントハンドラです。このハンドラは、PictureInPictureWindow全体が提示されたときにのみ呼び出されます。
Events
親である HTMLMediaElement およびその祖先である HTMLElement からイベントを継承します。addEventListener()を使用するか、このインターフェイスの oneventname プロパティにイベントリスナーを割り当てることで、これらのイベントをリッスンします。
enterpictureinpicture- ピクチャーインピクチャーモードになったときに
HTMLVideoElementに送信されます。 leavepictureinpicture- ピクチャーインピクチャーモードになったときに
HTMLVideoElementに送信されます。
Specifications
| 仕様書 | ステータス | コメント |
|---|---|---|
| HTML Living Standard HTMLVideoElement の定義 |
現行の標準 |
Browser compatibility
このページの互換性表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。
Update compatibility data on GitHub
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
HTMLVideoElement | Chrome 完全対応 あり | Edge 完全対応 12 | Firefox 完全対応 4 | IE 完全対応 9 | Opera 完全対応 10.5 | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
cancelVideoFrameCallback | Chrome 完全対応 83 | Edge 完全対応 83 | Firefox 未対応 なし | IE 未対応 なし | Opera 完全対応 69 | Safari 未対応 なし | WebView Android 完全対応 83 | Chrome Android 完全対応 83 | Firefox Android 未対応 なし | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 完全対応 13.0 |
getVideoPlaybackQuality | Chrome 完全対応 80 | Edge 完全対応 12 | Firefox
完全対応
42
| IE
完全対応
11
| Opera 完全対応 67 | Safari 完全対応 8 | WebView Android 完全対応 80 | Chrome Android 完全対応 80 | Firefox Android 未対応 なし | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 完全対応 13.0 |
height | Chrome 完全対応 あり | Edge 完全対応 12 | Firefox 完全対応 4 | IE 完全対応 9 | Opera 完全対応 10.5 | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
mozDecodedFrames | Chrome 未対応 なし | Edge 未対応 なし | Firefox 完全対応 5 | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 完全対応 5 | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
mozFrameDelay | Chrome 未対応 なし | Edge 未対応 なし | Firefox 完全対応 5 | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 完全対応 5 | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
mozHasAudio | Chrome 未対応 なし | Edge 未対応 なし | Firefox 完全対応 15 | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 完全対応 15 | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
mozPaintedFrames | Chrome 未対応 なし | Edge 未対応 なし | Firefox 完全対応 5 | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 完全対応 5 | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
mozParsedFrames | Chrome 未対応 なし | Edge 未対応 なし | Firefox 完全対応 5 | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 完全対応 5 | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
mozPresentedFrames | Chrome 未対応 なし | Edge 未対応 なし | Firefox 完全対応 5 | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 完全対応 5 | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
msIsStereo3D | Chrome 未対応 なし | Edge 未対応 12 — 79 | Firefox 未対応 なし | IE 完全対応 10 | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 未対応 なし | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
poster | Chrome 完全対応 あり | Edge 完全対応 12 | Firefox 完全対応 4 | IE 完全対応 9 | Opera 完全対応 10.5 | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
requestVideoFrameCallback | Chrome 完全対応 83 | Edge 完全対応 83 | Firefox 未対応 なし | IE 未対応 なし | Opera 完全対応 69 | Safari 未対応 なし | WebView Android 完全対応 83 | Chrome Android 完全対応 83 | Firefox Android 未対応 なし | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 完全対応 13.0 |
videoHeight | Chrome 完全対応 あり | Edge 完全対応 12 | Firefox 完全対応 4 | IE 完全対応 9 | Opera 完全対応 10.5 | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
videoWidth | Chrome 完全対応 あり | Edge 完全対応 12 | Firefox 完全対応 4 | IE 完全対応 9 | Opera 完全対応 10.5 | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
width | Chrome 完全対応 あり | Edge 完全対応 12 | Firefox 完全対応 4 | IE 完全対応 9 | Opera 完全対応 10.5 | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 実装ノートを参照してください。
- 実装ノートを参照してください。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
See also
- このインターフェイスを実装した HTML 要素
<video>です - Demo of video paint statistics
- Supported media formats