HTMLVideoElement

在本文章中

属性
1. Gecko特定属性
方法
规范
浏览器兼容性
另见

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/zh-CN/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/zh-CN/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/zh-CN/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/zh-CN/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/zh-CN/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/zh-CN/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;}

属性

继承了其父对象 HTMLMediaElement和HTMLElement的属性。

HTMLVideoElement.height: 表达HTML属性 height的值的一个DOMString ，以CSS pixels的单位给出了显示区域的大小。
HTMLVideoElement.poster: 表达HTML属性 poster的值的一个DOMString ，用于指定当视频无法播放时需要展示的图片。
HTMLVideoElement.videoHeight 只读: 返回一个unsigned long 值，以CSS pixels的单位给出视频资源的实际高度。这个值考虑了大小、对比度、明度、分辨率等，是由视频资源本身确定的。如果这个元素的ready state是 HAVE_NOTHING，这个属性的值为0。
HTMLVideoElement.videoWidth 只读: 返回一个unsigned long 值，以CSS pixels的单位给出视频资源的实际宽度。这个值考虑了大小、对比度、明度、分辨率等，是由视频资源本身确定的。如果这个元素的ready state是 HAVE_NOTHING，这个属性的值为0。
HTMLVideoElement.width: 表达HTML属性 width的值的一个DOMString ，以CSS pixels的单位给出了显示区域的大小。

Gecko特定属性

HTMLVideoElement.mozParsedFrames 只读: 返回一个 unsigned long 值，给出已经从媒体资源中解析的视频帧数。
HTMLVideoElement.mozDecodedFrames 只读: 返回一个 unsigned long 值，给出已经从媒体资源中解析，并解码为图像的视频帧数。
HTMLVideoElement.mozPresentedFrames 只读: 返回一个 unsigned long 值，给出被置入绘制队列(pipeline)等待绘制的视频帧数。
HTMLVideoElement.mozPaintedFrames 只读: 返回一个 unsigned long 值，给出已经被绘制的视频帧数。
HTMLVideoElement.mozFrameDelay 只读: 返回一个 double 值，表示到目前为止，距上一次绘制过去了多长时间，单位是秒。
HTMLVideoElement.mozHasAudio 只读: 返回一个Boolean值，表示这个视频是否有关联音频。

方法

继承了其父对象 HTMLMediaElement和 HTMLElement的方法。

HTMLVideoElement.getVideoPlaybackQuality(): 返回一个 VideoPlaybackQuality 对象，包含了对当前播放引擎的量度信息。

规范

规范	状态	注释
Media Source Extensions Extensions to HTMLVideoElement	Candidate Recommendation	添加了 `getVideoPlaybackQuality()` 方法。
WHATWG HTML Living Standard HTMLAreaElement	Living Standard	相对于HTML5没有改变。
HTML5 HTMLAreaElement	Recommendation	最初定义

特性	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
基本支持	(Yes)	4.0 (2.0)	9.0	10.50	(Yes)
`mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay`	未实现	5.0 (5.0)	未实现	未实现	未实现
`mozHasAudio`	未实现	15.0 (15.0)	未实现	未实现	未实现
`getVideoPlaybackQuality()`	?	25.0 (25.0)^[1]	?	?	?

特性	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
基本支持	(Yes)	4.0 (2.0)	9.0	(Yes)	(Yes)
`mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay`	未实现	5.0 (5.0)	未实现	未实现	未实现
`mozHasAudio`	未实现	15.0 (15.0)	未实现	未实现	未实现
`getVideoPlaybackQuality()`	?	25.0 (25.0)^[1]	?	?	?

[1] Gecko 的实现要求打开 media.mediasource.enabled 选项，默认值是false.

另见

HTML element implementing this interface: <video>.
Demo of video paint statistics
Supported media formats

文档标签和贡献者

另见