initial commit

1 files changed, 144 insertions, 0 deletions

diff --git a/files/zh-tw/web/api/mediasource/index.html b/files/zh-tw/web/api/mediasource/index.html
new file mode 100644
index 0000000000..0006121f46
--- /dev/null
+++ b/files/zh-tw/web/api/mediasource/index.html
@@ -0,0 +1,144 @@
+---
+title: MediaSource
+slug: Web/API/MediaSource
+translation_of: Web/API/MediaSource
+---
+<p>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</p>
+
+<p><a href="/en-US/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions API</a> 的 <strong><code>MediaSource</code></strong> 介面代表 {{domxref("HTMLMediaElement")}} 物件的媒體資料來源。一個 <code>MediaSource</code> 物件可以被附加到一個 {{domxref("HTMLMediaElement")}} 以被用戶代理 (user agent) 播放。</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="建構子_Constructor">建構子 (Constructor)</h2>
+
+<dl>
+ <dt>{{domxref("MediaSource.MediaSource", "MediaSource()")}}</dt>
+ <dd>建構且回傳一個新的 <code>MediaSource</code> 物件但不與任何來源緩衝 (source buffers) 關聯 (associate)。</dd>
+</dl>
+
+<h2 id="屬性_Properties">屬性 (Properties)</h2>
+
+<dl>
+ <dt>{{domxref("MediaSource.sourceBuffers")}} {{readonlyInline}}</dt>
+ <dd>回傳一個含有與此 <code>MediaSource</code> 關聯的 {{domxref("SourceBuffer")}} 物件串列的 {{domxref("SourceBufferList")}} 物件。</dd>
+ <dt>{{domxref("MediaSource.activeSourceBuffers")}} {{readonlyInline}}</dt>
+ <dd>回傳一個 {{domxref("SourceBufferList")}} 物件，含有 {{domxref("SourceBuffers")}} 的子集合 {{domxref("SourceBuffer")}} 物件 — 物件的串列提供被選擇的影片軌 (video track), 啟用的音軌 (audio tracks), 以及顯示或隱藏的字軌。</dd>
+ <dt>{{domxref("MediaSource.readyState")}} {{readonlyInline}}</dt>
+ <dd>回傳一個列舉類型表示目前 <code>MediaSource</code> 的狀態：沒有附加到媒體元件 (<code>closed</code>)，已經附加且可以接收 {{domxref("SourceBuffer")}} 物件 (<code>open</code>)，已經附加但是串流已經經由 {{domxref("MediaSource.endOfStream()")}} 結束 (<code>ended</code>)。</dd>
+ <dt>{{domxref("MediaSource.duration")}}</dt>
+ <dd>取得或設置現在正被表示的媒體的時間長度。</dd>
+ <dt>
+ <h3 id="事件處理函數_Event_handlers">事件處理函數 (Event handlers)</h3>
+
+
+ </dt>
+ <dt>{{domxref("MediaSource.onsourceclose")}}</dt>
+ <dd><code>sourceclose</code> 事件的事件處理函數。</dd>
+ <dt>{{domxref("MediaSource.onsourceended")}}</dt>
+ <dd><code>sourceended</code> 事件的事件處理函數。</dd>
+ <dt>{{domxref("MediaSource.onsourceopen")}}</dt>
+ <dd><code>sourceopen</code> 事件的事件處理函數。</dd>
+</dl>
+
+<dl>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="方法_Methods">方法 (Methods)</h2>
+
+<p><em>從親介面 (parent interface) {{domxref("EventTarget")}} 繼承屬性。</em></p>
+
+<dl>
+ <dt>{{domxref("MediaSource.addSourceBuffer()")}}</dt>
+ <dd>依據指定的 MIME 類型建立一個新的 {{domxref("SourceBuffer")}} 且將其加入 <code>MediaSource</code> 的 {{domxref("SourceBuffers")}} 串列。</dd>
+ <dt>{{domxref("MediaSource.clearLiveSeekableRange()")}}</dt>
+ <dd>清除先前藉由呼叫 <code>setLiveSeekableRange()</code> 所設定的可尋找範圍。</dd>
+ <dt>{{domxref("MediaSource.endOfStream()")}}</dt>
+ <dd>示意串流的結束。</dd>
+ <dt>{{domxref("MediaSource.removeSourceBuffer()")}}</dt>
+ <dd>從與此 <code>MediaSource</code> 物件關聯的 {{domxref("SourceBuffers")}} 串列移除指定的 {{domxref("SourceBuffer")}}。</dd>
+ <dt>{{domxref("MediaSource.setLiveSeekableRange()")}}</dt>
+ <dd>設定使用者可以在媒體元素中的可尋找範圍。</dd>
+</dl>
+
+<h2 id="靜態方法_Static_methods">靜態方法 (Static methods)</h2>
+
+<dl>
+ <dt>{{domxref("MediaSource.isTypeSupported()")}}</dt>
+ <dd>回傳一個 {{domxref("Boolean")}} 值表示指定的 MIME 類型是否被現在的用戶代理支援 — 意即可否成功的為該 MIME 類型建立 {{domxref("SourceBuffer")}} 物件。</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<p>以下簡單的範例儘快的載入一個個影片塊 (chunk) 且儘快的播放。這個範例是由 Nick Desaulniers 所撰寫且可以<a href="http://nickdesaulniers.github.io/netfix/demo/bufferAll.html">在此實際觀看</a>（您也可以<a href="https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html">下載原始碼</a>以更進一步研究）</p>
+
+<pre class="brush: js notranslate">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="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註釋</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Source Extensions', '#mediasource', 'MediaSource')}}</td>
+   <td>{{Spec2('Media Source Extensions')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="相容性表格">相容性表格</h2>
+
+<div>{{Compat("api.MediaSource")}}</div>
+
+<h2 id="相關資料">相關資料</h2>
+
+<ul>
+ <li>{{domxref("SourceBuffer")}}</li>
+ <li>{{domxref("SourceBufferList")}}</li>
+</ul>