initial commit

3 files changed, 320 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/sourcebuffer/appendbuffer/index.html b/files/zh-cn/web/api/sourcebuffer/appendbuffer/index.html
new file mode 100644
index 0000000000..6127a477a7
--- /dev/null
+++ b/files/zh-cn/web/api/sourcebuffer/appendbuffer/index.html
@@ -0,0 +1,64 @@
+---
+title: SourceBuffer.appendBuffer()
+slug: Web/API/SourceBuffer/appendBuffer
+translation_of: Web/API/SourceBuffer/appendBuffer
+---
+<div>{{draft}}{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</div>
+
+<div><code><strong>appendBuffer()</strong></code>方法将媒体片段数据添加到<code>SourceBuffer</code>对象中，其中媒体片段用{{domxref("ArrayBuffer")}} 或 <code>ArrayBufferView</code> 对象存储 。</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js"><em>sourceBuffer</em>.appendBuffer(<em>source</em>);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>source</code></dt>
+ <dd>一个 {{domxref("BufferSource")}} 对象（{{domxref("ArrayBufferView")}} 或 {{domxref("ArrayBuffer")}}），存储了你要添加到 SourceBuffer 中去的媒体片段数据。</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p><code>undefined</code>.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>None.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>TBD.</p>
+
+<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 Source Extensions', '#widl-SourceBuffer-appendBuffer-void-ArrayBuffer-data', 'appendBuffer()')}}</td>
+   <td>{{Spec2('Media Source Extensions')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.SourceBuffer.appendBuffer")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("MediaSource")}}</li>
+ <li>{{domxref("SourceBufferList")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/sourcebuffer/index.html b/files/zh-cn/web/api/sourcebuffer/index.html
new file mode 100644
index 0000000000..447d6f29b8
--- /dev/null
+++ b/files/zh-cn/web/api/sourcebuffer/index.html
@@ -0,0 +1,160 @@
+---
+title: SourceBuffer
+slug: Web/API/SourceBuffer
+tags:
+  - API
+  - Audio
+  - Experimental
+  - Interface
+  - MSE
+  - Media Source Extensions
+  - NeedsTranslation
+  - Reference
+  - SourceBuffer
+  - TopicStub
+  - Video
+translation_of: Web/API/SourceBuffer
+---
+<p>{{APIRef("Media Source Extensions")}}</p>
+
+<p>The <strong><code>SourceBuffer</code></strong> interface represents a chunk of media to be passed into an {{domxref("HTMLMediaElement")}} and played, via a {{domxref("MediaSource")}} object. This can be made up of one or several media segments.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("SourceBuffer.appendWindowEnd")}}</dt>
+ <dd>Controls the timestamp for the end of the append window.</dd>
+ <dt>{{domxref("SourceBuffer.appendWindowStart")}}</dt>
+ <dd>Controls the timestamp for the start of the <a href="https://w3c.github.io/media-source/#append-window">append window</a>. This is a timestamp range that can be used to filter what media data is appended to the <code>SourceBuffer</code>. Coded media frames with timestamps within this range will be appended, whereas those outside the range will be filtered out.</dd>
+ <dt>{{domxref("SourceBuffer.audioTracks")}} {{readonlyInline}}</dt>
+ <dd>A list of the audio tracks currently contained inside the <code>SourceBuffer</code>.</dd>
+ <dt>{{domxref("SourceBuffer.buffered")}} {{readonlyInline}}</dt>
+ <dd>Returns the time ranges that are currently buffered in the <code>SourceBuffer</code>.</dd>
+ <dt>{{domxref("SourceBuffer.mode")}}</dt>
+ <dd>Controls how the order of media segments in the <code>SourceBuffer</code> is handled, in terms of whether they can be appended in any order, or they have to be kept in a strict sequence.</dd>
+ <dt>{{domxref("SourceBuffer.textTracks")}} {{readonlyInline}}</dt>
+ <dd>A list of the text tracks currently contained inside the <code>SourceBuffer</code>.</dd>
+ <dt>{{domxref("SourceBuffer.timestampOffset")}}</dt>
+ <dd>Controls the offset applied to timestamps inside media segments that are subsequently appended to the <code>SourceBuffer</code>.</dd>
+ <dt>{{domxref("SourceBuffer.trackDefaults")}}</dt>
+ <dd>Specifies the default values to use if kind, label, and/or language information is not available in the <a href="https://w3c.github.io/media-source/#init-segment">initialization segment</a> of the media to be appended to the <code>SourceBuffer</code>.</dd>
+ <dt>{{domxref("SourceBuffer.updating")}} {{readonlyInline}}</dt>
+ <dd>A boolean indicating whether the <code>SourceBuffer</code> is currently being updated — i.e. whether an {{domxref("SourceBuffer.appendBuffer()")}}, {{domxref("SourceBuffer.appendStream()")}}, or {{domxref("SourceBuffer.remove()")}} operation is currently in progress.</dd>
+ <dt>{{domxref("SourceBuffer.videoTracks")}} {{readonlyInline}}</dt>
+ <dd>A list of the video tracks currently contained inside the <code>SourceBuffer</code>.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("SourceBuffer.onabort")}}</dt>
+ <dd>Fired whenever {{domxref("SourceBuffer.appendBuffer()")}} or {{domxref("SourceBuffer.appendStream()")}} is ended by a call to {{domxref("SourceBuffer.abort()")}}. {{domxref("SourceBuffer.updating")}} changes from <code>true</code> to <code>false</code>.</dd>
+ <dt>{{domxref("SourceBuffer.onerror")}}</dt>
+ <dd>Fired whenever an error occurs during {{domxref("SourceBuffer.appendBuffer()")}} or {{domxref("SourceBuffer.appendStream()")}}. {{domxref("SourceBuffer.updating")}} changes from <code>true</code> to <code>false</code>.</dd>
+ <dt>{{domxref("SourceBuffer.onupdate")}}</dt>
+ <dd>Fired whenever {{domxref("SourceBuffer.appendBuffer()")}} method or the {{domxref("SourceBuffer.remove()")}} completes. {{domxref("SourceBuffer.updating")}} changes from <code>true</code> to <code>false</code>. This event is fired before <code>onupdateend</code>.</dd>
+ <dt>{{domxref("SourceBuffer.onupdateend")}}</dt>
+ <dd>Fired whenever {{domxref("SourceBuffer.appendBuffer()")}} method or the {{domxref("SourceBuffer.remove()")}} has ended. This event is fired after <code>onupdate</code>.</dd>
+ <dt>{{domxref("SourceBuffer.onupdatestart")}}</dt>
+ <dd>Fired whenever the value of {{domxref("SourceBuffer.updating")}} transitions from <code>false</code> to <code>true</code>.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent interface, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SourceBuffer.abort()")}}</dt>
+ <dd>Aborts the current segment and resets the segment parser.</dd>
+ <dt>{{domxref("SourceBuffer.appendBuffer()")}}</dt>
+ <dd>Appends media segment data from an {{domxref("ArrayBuffer")}} or {{domxref("ArrayBufferView")}} object to the <code>SourceBuffer</code>.</dd>
+ <dt>{{domxref("SourceBuffer.appendBufferAsync()")}} {{experimental_inline}}</dt>
+ <dd>Starts the process of asynchronously appending the specified buffer to the <code>SourceBuffer</code>. Returns a {{jsxref("Promise")}} which is fulfilled once the buffer has been appended.</dd>
+ <dt>{{domxref("SourceBuffer.appendStream()")}}</dt>
+ <dd>Appends media segment data from a <code>ReadableStream</code> object to the <code>SourceBuffer</code>.</dd>
+ <dt>{{domxref("SourceBuffer.changeType()")}}</dt>
+ <dd>Changes the {{Glossary("MIME type")}} that future calls to {{domxref("SourceBuffer.appendBuffer", "appendBuffer()")}} will expect the new data to conform to.</dd>
+ <dt>{{domxref("SourceBuffer.remove()")}}</dt>
+ <dd>Removes media segments within a specific time range from the <code>SourceBuffer</code>.</dd>
+ <dt>{{domxref("SourceBuffer.removeAsync()")}} {{experimental_inline}}</dt>
+ <dd>Starts the process of asynchronously removing media segments in the specified range from the <code>SourceBuffer</code>. Returns a {{jsxref("Promise")}} which is fulfilled once all matching segments have been removed.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The following simple example loads a video chunk by chunk as fast as possible, playing it as soon as it can. This example was written by Nick Desaulniers and can be <a href="http://nickdesaulniers.github.io/netfix/demo/bufferAll.html">viewed live here</a> (you can also <a href="https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html">download the source</a> for further investigation.)</p>
+
+<pre class="brush: js">var video = document.querySelector('video');
+
+var assetURL = 'frag_bunny.mp4';
+// Need to be specific for Blink regarding codecs
+// ./mp4info frag_bunny.mp4 | grep Codec
+var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
+
+if ('MediaSource' in window &amp;&amp; MediaSource.isTypeSupported(mimeCodec)) {
+  var mediaSource = new MediaSource;
+  //console.log(mediaSource.readyState); // closed
+  video.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen);
+} else {
+  console.error('Unsupported MIME type or codec: ', mimeCodec);
+}
+
+function sourceOpen (_) {
+  //console.log(this.readyState); // open
+  var mediaSource = this;
+  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
+  fetchAB(assetURL, function (buf) {
+    sourceBuffer.addEventListener('updateend', function (_) {
+      mediaSource.endOfStream();
+      video.play();
+      //console.log(mediaSource.readyState); // ended
+    });
+    sourceBuffer.appendBuffer(buf);
+  });
+}
+
+function fetchAB (url, cb) {
+  console.log(url);
+  var xhr = new XMLHttpRequest;
+  xhr.open('get', url);
+  xhr.responseType = 'arraybuffer';
+  xhr.onload = function () {
+    cb(xhr.response);
+  };
+  xhr.send();
+}</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 Source Extensions', '#sourcebuffer', 'SourceBuffer')}}</td>
+   <td>{{Spec2('Media Source Extensions')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.SourceBuffer")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("MediaSource")}}</li>
+ <li>{{domxref("SourceBufferList")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/sourcebuffer/mode/index.html b/files/zh-cn/web/api/sourcebuffer/mode/index.html
new file mode 100644
index 0000000000..369280a54e
--- /dev/null
+++ b/files/zh-cn/web/api/sourcebuffer/mode/index.html
@@ -0,0 +1,96 @@
+---
+title: SourceBuffer.mode
+slug: Web/API/SourceBuffer/mode
+translation_of: Web/API/SourceBuffer/mode
+---
+<div>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</div>
+
+<p>{{domxref("SourceBuffer")}} 接口的 <code><strong>mode</strong></code> 属性用来控制媒体片段添加到<code>SourceBuffer</code> 时的顺序是可以任意的还是有严格顺序的。</p>
+
+<p>两个可用的值:</p>
+
+<ul>
+ <li><code>segments</code>: 媒体片段的时间戳决定段的播放顺序。这些片段可以按任意顺序添加到sourcebuffer。</li>
+ <li><code>sequence</code>: 媒体片段添加到sourcebuffer的顺序决定了它们的播放顺序。片段上的时间戳为遵守此顺序自动生成。</li>
+</ul>
+
+<p>moder的值最初是在使用mediasource.addsourcebuffer（）创建sourcebuffer时设置的。如果媒体片段上已经存在时间戳，则该值将设置为<code>segments</code>；如果没有，则该值将设置为<code>sequence</code>.</p>
+
+<p>如果mode初始值为sequence想要改为segments则会引发错误, 必须以<code>sequence</code>模式维护现有段顺序。但是，可以将值从<code>segments模式</code>改为<code>sequence模式</code>。它意味着播放顺序将被固定，并会生成新的时间戳。</p>
+
+<p>当 sourceBuffer 正在处理时mode的值无法改变，如 {{domxref("SourceBuffer.appendBuffer","appendBuffer()")}} 或 {{domxref("SourceBuffer.remove","remove()")}} .</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var myMode = sourceBuffer.mode;
+
+sourceBuffer.mode = 'sequence';
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>A {{domxref("DOMString")}}.</p>
+
+<h3 id="Errors">Errors</h3>
+
+<p>The following errors may be thrown when setting a new value for this property.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Error</th>
+   <th scope="col">Explanation</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>InvalidAccessError</code></td>
+   <td>An attempt was made to set the value to <code>segments</code> when the initial value is <code>sequence</code>.</td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>The {{domxref("SourceBuffer")}} object is being updated (i.e. its {{domxref("SourceBuffer.updating")}} property is currently <code>true</code>), the last media segment appended to <code>this </code>SourceBuffer is incomplete, or this <code>SourceBuffer</code> has been removed from the {{domxref("MediaSource")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example">Example</h2>
+
+<p>此代码段是将sourcebuffer的模式设置为“sequence”（如果当前设置为“segments”），假如原先的播放顺序为segments.</p>
+
+<pre class="brush: js">var curMode = sourceBuffer.mode;
+if (curMode == 'segments') {
+  sourceBuffer.mode = 'sequence';
+}</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 Source Extensions', '#widl-SourceBuffer-mode', 'mode')}}</td>
+   <td>{{Spec2('Media Source Extensions')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.SourceBuffer.mode")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("MediaSource")}}</li>
+ <li>{{domxref("SourceBufferList")}}</li>
+</ul>