1 files changed, 64 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/videoplaybackquality/totalvideoframes/index.html b/files/zh-cn/web/api/videoplaybackquality/totalvideoframes/index.html
new file mode 100644
index 0000000000..3eb0437b36
--- /dev/null
+++ b/files/zh-cn/web/api/videoplaybackquality/totalvideoframes/index.html
@@ -0,0 +1,64 @@
+---
+title: VideoPlaybackQuality.totalVideoFrames
+slug: Web/API/VideoPlaybackQuality/totalVideoFrames
+translation_of: Web/API/VideoPlaybackQuality/totalVideoFrames
+---
+<pre><em>videoPlaybackQuality的</em><strong>totalVideoFrames属性为一个只读属性，用于表述已经被加载的媒体资源中已经被渲染播放或者被废弃的视频帧总数</strong></pre>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>value</em> = <em>videoPlaybackQuality</em>.totalVideoFrames;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>video容器<strong>已经被加载的媒体资源中已经被渲染播放或者被废弃的视频帧总数，本质上讲，这个总数是指没有发生播放异常问题下的数目。</strong></p>
+
+<h2 id="Example">Example</h2>
+
+<p>下面的例子想要表述的是通过已经丢弃（丢帧）或者播放异常的帧数总和占totalVideoFrames的比例超过10%，则触发一个例如名为lostFramesThresholdExceeded的回调函数以反应我们当前视频资源丢帧已经播放异常的程度，从而帮助业务进行调整</p>
+
+<pre class="brush: js">var videoElem = document.getElementById("my_vid");
+var quality = videoElem.getVideoPlaybackQuality();
+
+if ((quality.corruptedVideoFrames + quality.droppedVideoFrames)/quality.totalVideoFrames &gt; 0.1) {
+  lostFramesThresholdExceeded();
+}</pre>
+
+
+
+<pre dir="ltr" id="tw-target-text">触发回调函数后，我们可以使用一些算法来尝试切换到需要较少带宽，码率低的，较低分辨率视频，以避免丢帧。</pre>
+
+
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Playback Quality', '#videoplaybackquality-interface', 'VideoPlaybackQuality.totalVideoFrames')}}</td>
+   <td>{{Spec2('Media Playback Quality')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.VideoPlaybackQuality.totalVideoFrames")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} method for constructing and returning this interface.</li>
+</ul>