当前位置：文江博客知识库简体中文文档 Web API HTMLVideoElement

HTMLVideoElement - Web API 接口参考编辑

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="/wiki/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="/wiki/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="/wiki/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/wiki/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/wiki/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="/wiki/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	Recommendation	添加了 `getVideoPlaybackQuality()` 方法。
HTML Living Standard HTMLAreaElement	Living Standard	相对于HTML5没有改变。
HTML5 HTMLAreaElement	Recommendation	最初定义

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Desktop
Mobile

特性	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]	?	?	?