HTMLVideoElement

この記事は翻訳作業中です。

HTMLVideoElement インターフェースは、ビデオオブジェクトを操作するための特別なプロパティとメソッドを提供します。また、HTMLMediaElementHTMLElement のプロパティとメソッドを継承します。

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

Properties

その先祖のインターフェースである HTMLMediaElementHTMLElement からプロパティを継承します。

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

Gecko-specific properties

HTMLVideoElement.mozParsedFrames  読取専用
Returns an unsigned long with the count of video frames that have been parsed from the media resource.
HTMLVideoElement.mozDecodedFrames  読取専用
Returns an unsigned long with the count of parsed video frames that have been decoded into images.
HTMLVideoElement.mozPresentedFrames  読取専用
Returns an unsigned long with the count of decoded frames that have been presented to the rendering pipeline for painting.
HTMLVideoElement.mozPaintedFrames  読取専用
Returns an unsigned long with the count of presented frames which were painted on the screen.
HTMLVideoElement.mozFrameDelay  読取専用
Returns an double with the time which the last painted video frame was late by, in seconds.
HTMLVideoElement.mozHasAudio  読取専用
Returns a boolean indicating 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

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
HTMLVideoElementChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 10.5Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
cancelVideoFrameCallback
実験的非標準
Chrome 完全対応 83Edge 完全対応 83Firefox 未対応 なしIE 未対応 なしOpera 完全対応 69Safari 未対応 なしWebView Android 完全対応 83Chrome Android 完全対応 83Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 13.0
getVideoPlaybackQuality
実験的
Chrome 完全対応 80Edge 完全対応 12Firefox 完全対応 42
完全対応 42
未対応 25 — 42
補足 無効
補足 Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42.
無効 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 完全対応 11
補足
完全対応 11
補足
補足 Only works on Windows 8+.
Opera 完全対応 67Safari 完全対応 8WebView Android 完全対応 80Chrome Android 完全対応 80Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 13.0
heightChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 10.5Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
mozDecodedFrames
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 5IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 5Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
mozFrameDelay
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 5IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 5Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
mozHasAudio
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 15IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 15Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
mozPaintedFrames
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 5IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 5Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
mozParsedFrames
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 5IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 5Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
mozPresentedFrames
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 5IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 5Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
msIsStereo3D
非標準
Chrome 未対応 なしEdge 未対応 12 — 79Firefox 未対応 なしIE 完全対応 10Opera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
posterChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 10.5Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
requestVideoFrameCallback
実験的非標準
Chrome 完全対応 83Edge 完全対応 83Firefox 未対応 なしIE 未対応 なしOpera 完全対応 69Safari 未対応 なしWebView Android 完全対応 83Chrome Android 完全対応 83Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 13.0
videoHeightChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 10.5Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
videoWidthChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 10.5Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
widthChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 10.5Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

See also