4 files changed, 306 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/timeranges/end/index.html b/files/zh-cn/web/api/timeranges/end/index.html
new file mode 100644
index 0000000000..9bd1ac8b14
--- /dev/null
+++ b/files/zh-cn/web/api/timeranges/end/index.html
@@ -0,0 +1,72 @@
+---
+title: TimeRanges.end()
+slug: Web/API/TimeRanges/end
+translation_of: Web/API/TimeRanges/end
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>返回指定时间范围的结束偏移量。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>endTime</em> = TimeRanges.end(index)
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<ul>
+ <li><code>index</code> 想要检索的时间范围的索引值。</li>
+</ul>
+
+<h3 id="异常">异常</h3>
+
+<dl>
+ <dt>INDEX_SIZE_ERR</dt>
+ <dd>如果不存在指定索引值的时间范围，抛出 <code>DOMException</code> 异常。</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<p>假定页面中存在一个ID为“myVideo”的 video 元素：</p>
+
+<pre class="brush: js">var v = document.getElementById("myVideo");
+
+var buf = v.buffered;
+
+var numRanges = buf.length;
+
+if (buf.length == 1) {
+  // only one range
+  if (buf.start(0) == 0 &amp;&amp; buf.end(0) == v.duration) {
+    // The one range starts at the beginning and ends at
+    // the end of the video, so the whole thing is loaded
+  }
+}
+</pre>
+
+<p>这个例子演示了如何通过 <code>TimeRanges</code> 来判断 video 是否已经完全加载。</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#dom-timeranges-end", "TimeRanges.end()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.TimeRanges.end")}}</p>
diff --git a/files/zh-cn/web/api/timeranges/index.html b/files/zh-cn/web/api/timeranges/index.html
new file mode 100644
index 0000000000..f6cf419d4b
--- /dev/null
+++ b/files/zh-cn/web/api/timeranges/index.html
@@ -0,0 +1,103 @@
+---
+title: TimeRanges
+slug: Web/API/TimeRanges
+translation_of: Web/API/TimeRanges
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div> <code>TimeRanges</code> 接口用来表示一组时间范围，主要目的是跟踪供{{HTMLElement("audio")}} 和 </div>
+
+<div>{{HTMLElement("video")}} 元素加载使用的媒体哪些部分已经被缓冲。  </div>
+
+<p>一个 <code>TimeRanges</code> 对象包括一个或多个时间范围，其中每个都由一个开始偏移量和结束偏移量指定。你可以将你想要检索的时间范围的索引值传递给 <code>start()</code> 和 <code>end()</code> 方法来引用每个时间范围。</p>
+
+<p>术语"<a class="external" href="http://www.w3.org/TR/html5/the-iframe-element.html#normalized-timeranges-object">normalized TimeRanges object</a>"指出这种对象中的范围时有序的，不重叠的，不为空并且不接触的（相邻范围被折叠成更大的范围）。</p>
+
+<h2 id="属性">属性</h2>
+
+<dl>
+ <dt>{{domxref("TimeRanges.length")}} {{ReadOnlyInline}}</dt>
+ <dd>返回一个 <code>unsigned long</code> 类型的数字。表示由time range对象表示的time ranges的数量。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("TimeRanges.start()")}}</dt>
+ <dd>返回具有指定索引的范围的开始时间。</dd>
+ <dt>{{domxref("TimeRanges.end()")}}</dt>
+ <dd>返回指定范围的结束时间。</dd>
+</dl>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "embedded-content.html#time-ranges", "TimeRanges")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-cn/web/api/timeranges/length/index.html b/files/zh-cn/web/api/timeranges/length/index.html
new file mode 100644
index 0000000000..1fac25738a
--- /dev/null
+++ b/files/zh-cn/web/api/timeranges/length/index.html
@@ -0,0 +1,59 @@
+---
+title: TimeRanges.length
+slug: Web/API/TimeRanges/length
+translation_of: Web/API/TimeRanges/length
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>只读属性 <strong><code>TimeRanges.length</code></strong> 返回对象中时间范围的个数。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>length</em> = <em>TimeRanges</em>.length;
+</pre>
+
+<h2 id="示例">示例</h2>
+
+<p>假定页面中存在一个ID为“myVideo”的 video 元素：</p>
+
+<pre class="brush: js">var v = document.GetElementById("myVideo");
+
+var buf = v.buffered;
+
+var numRanges = buf.length;
+
+if (buf.length == 1) {
+  // Only one range
+  if (buf.start(0) == 0 &amp;&amp; buf.end(0) == v.duration) {
+    // The one range starts at the beginning and ends at
+    // the end of the video, so the whole thing is loaded
+  }
+}
+</pre>
+
+<p>这个例子演示了如何通过 <code>TimeRanges</code> 来判断 video 是否已经完全加载。</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#dom-timeranges-length", "TimeRanges.length()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.TimeRanges.length")}}</p>
diff --git a/files/zh-cn/web/api/timeranges/start/index.html b/files/zh-cn/web/api/timeranges/start/index.html
new file mode 100644
index 0000000000..48f53a9a02
--- /dev/null
+++ b/files/zh-cn/web/api/timeranges/start/index.html
@@ -0,0 +1,72 @@
+---
+title: TimeRanges.start()
+slug: Web/API/TimeRanges/start
+translation_of: Web/API/TimeRanges/start
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>{{gecko_minversion_header("2.0")}}</p>
+
+<p>返回指定时间范围的开始偏移量。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>startTime</em> = TimeRanges.start(index)
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<ul>
+ <li><code>index</code> 想要检索的时间范围的索引值。</li>
+</ul>
+
+<h3 id="异常">异常</h3>
+
+<dl>
+ <dt>INDEX_SIZE_ERR</dt>
+ <dd>如果不存在指定索引值的时间范围，抛出 <code>DOMException</code> 异常。</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<p>假定页面中存在一个ID为“myVideo”的 video 元素：</p>
+
+<pre class="brush: js">var v = document.getElementById("myVideo");
+
+var buf = v.buffered;
+
+var numRanges = buf.length;
+
+if (buf.length == 1) {
+  // only one range
+  if (buf.start(0) == 0 &amp;&amp; buf.end(0) == v.duration) {
+    // The one range starts at the beginning and ends at
+    // the end of the video, so the whole thing is loaded
+  }
+}
+</pre>
+
+<p>这个例子演示了如何通过 <code>TimeRanges</code> 来判断 video 是否已经完全加载。</p>
+
+<h2 id="规范">规范</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("HTML WHATWG", "#dom-timeranges-start", "TimeRanges.start()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.TimeRanges.start")}}</p>