aboutsummaryrefslogtreecommitdiff
path: root/files/zh-tw/web/api/mediasource
diff options
context:
space:
mode:
Diffstat (limited to 'files/zh-tw/web/api/mediasource')
-rw-r--r--files/zh-tw/web/api/mediasource/activesourcebuffers/index.html126
-rw-r--r--files/zh-tw/web/api/mediasource/duration/index.html149
-rw-r--r--files/zh-tw/web/api/mediasource/index.html144
-rw-r--r--files/zh-tw/web/api/mediasource/mediasource/index.html122
-rw-r--r--files/zh-tw/web/api/mediasource/readystate/index.html136
5 files changed, 677 insertions, 0 deletions
diff --git a/files/zh-tw/web/api/mediasource/activesourcebuffers/index.html b/files/zh-tw/web/api/mediasource/activesourcebuffers/index.html
new file mode 100644
index 0000000000..90777f675c
--- /dev/null
+++ b/files/zh-tw/web/api/mediasource/activesourcebuffers/index.html
@@ -0,0 +1,126 @@
+---
+title: MediaSource.activeSourceBuffers
+slug: Web/API/MediaSource/activeSourceBuffers
+translation_of: Web/API/MediaSource/activeSourceBuffers
+---
+<div>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</div>
+
+<p><code><strong>activeSourceBuffers</strong></code> 是 {{domxref("MediaSource")}} 介面的唯讀屬性，回傳一個 {{domxref("SourceBufferList")}} 物件，含有在 {{domxref("SourceBuffers")}} 之中的 {{domxref("SourceBuffer")}} 物件子集合—物件的串列提供被選擇的影片軌 (video track), 啟用的音軌 (audio tracks), 以及顯示或隱藏的字軌。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: js">var myActiveSourceBuffers = mediaSource.activeSourceBuffers;</pre>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個 {{domxref("SourceBufferList")}} 。</p>
+
+<h2 id="範例">範例</h2>
+
+<p>以下的片段基於 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 language-js"><code class="language-js"><span class="keyword token">function</span> sourceOpen <span class="punctuation token">(</span>_<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> //console.log(this.readyState); // open
+</span> <span class="keyword token">var</span> mediaSource <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">;</span>
+ <span class="keyword token">var</span> sourceBuffer <span class="operator token">=</span> mediaSource<span class="punctuation token">.</span><span class="function token">addSourceBuffer<span class="punctuation token">(</span></span>mimeCodec<span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="function token">fetchAB<span class="punctuation token">(</span></span>assetURL<span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>buf<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ sourceBuffer<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'updateend'</span><span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>_<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ mediaSource<span class="punctuation token">.</span><span class="function token">endOfStream<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;
+ console.log(mediaSource.activeSourceBuffers);
+ // will contain the source buffer that was added above,
+ // as it is selected for playing in the video player</span>
+ video<span class="punctuation token">.</span><span class="function token">play<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="comment token"> //console.log(mediaSource.readyState); // ended
+</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ sourceBuffer<span class="punctuation token">.</span><span class="function token">appendBuffer<span class="punctuation token">(</span></span>buf<span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;
+
+...</span></code></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', '#widl-MediaSource-activeSourceBuffers', 'activeSourceBuffers')}}</td>
+ <td>{{Spec2('Media Source Extensions')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="相容性表格">相容性表格</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<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>23</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoDesktop("25.0")}}<sup>[1]</sup><br>
+ {{CompatGeckoDesktop("42.0")}}</td>
+ <td>11<sup>[2]</sup></td>
+ <td>15</td>
+ <td>8</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>Firefox OS (Gecko)</th>
+ <th>IE Phone</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>4.4.4</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>
+ <p>{{CompatNo}}</p>
+ </td>
+ <td>{{CompatNo}}</td>
+ <td>11</td>
+ <td>30</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 在切換 about:config 偏好設定 media.mediasource.enabled 為 true 時可以使用。此外，支援只限於白名單內的網站，如：YouTube, Netflix, 以及其他熱門的串流網站。白名單已經被移除且 Media Source Extensions 在 42+ 對所有網站已預設為啟用。</p>
+
+<p>[2] 只在 Windows 8+ 上有效。</p>
+
+<h2 id="相關資料">相關資料</h2>
+
+<ul>
+ <li>{{domxref("SourceBuffer")}}</li>
+ <li>{{domxref("SourceBufferList")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/mediasource/duration/index.html b/files/zh-tw/web/api/mediasource/duration/index.html
new file mode 100644
index 0000000000..b9fab966e4
--- /dev/null
+++ b/files/zh-tw/web/api/mediasource/duration/index.html
@@ -0,0 +1,149 @@
+---
+title: MediaSource.duration
+slug: Web/API/MediaSource/duration
+translation_of: Web/API/MediaSource/duration
+---
+<div>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</div>
+
+<p>{{domxref("MediaSource")}} 介面的 <code><strong>duration</strong></code> 屬性用來取得以及設置正被表示的媒體時間長度。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: js">mediaSource.duration = 5.5; // 5.5 seconds
+
+var myDuration = mediaSource.duration;</pre>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>單位為秒的 double 型別。</p>
+
+<h3 id="錯誤">錯誤</h3>
+
+<p>當設置此屬性一個新的值時以下錯誤可能發生。</p>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">錯誤</th>
+ <th scope="col">解釋</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>InvalidAccessError</code></td>
+ <td>嘗試設置的時間長度是負值，或者 <code>NaN</code>。</td>
+ </tr>
+ <tr>
+ <td><code>InvalidStateError</code></td>
+ <td>{{domxref("MediaSource.readyState")}} 不是 <code>open</code>，或者 {{domxref("MediaSource.sourceBuffers")}} 中一個或多個以上的 {{domxref("SourceBuffer")}} 物件正在被更新（例如：他們的 {{domxref("SourceBuffer.updating")}} 屬性為 <code>true</code>。）</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="範例">範例</h2>
+
+<p>以下的片段基於 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 language-js"><code class="language-js"><span class="keyword token">function</span> sourceOpen <span class="punctuation token">(</span>_<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> //console.log(this.readyState); // open
+</span> <span class="keyword token">var</span> mediaSource <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">;</span>
+ <span class="keyword token">var</span> sourceBuffer <span class="operator token">=</span> mediaSource<span class="punctuation token">.</span><span class="function token">addSourceBuffer<span class="punctuation token">(</span></span>mimeCodec<span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="function token">fetchAB<span class="punctuation token">(</span></span>assetURL<span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>buf<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ sourceBuffer<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'updateend'</span><span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>_<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ mediaSource<span class="punctuation token">.</span><span class="function token">endOfStream<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;
+ mediaSource.duration = 120;</span>
+ video<span class="punctuation token">.</span><span class="function token">play<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="comment token"> //console.log(mediaSource.readyState); // ended
+</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ sourceBuffer<span class="punctuation token">.</span><span class="function token">appendBuffer<span class="punctuation token">(</span></span>buf<span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;
+
+...</span></code></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', '#widl-MediaSource-duration', 'duration')}}</td>
+ <td>{{Spec2('Media Source Extensions')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="相容性表格">相容性表格</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<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>23</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoDesktop("25.0")}}<sup>[1]</sup><br>
+ {{CompatGeckoDesktop("42.0")}}</td>
+ <td>11<sup>[2]</sup></td>
+ <td>15</td>
+ <td>8</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>Firefox OS (Gecko)</th>
+ <th>IE Phone</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>4.4.4</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>
+ <p>{{CompatNo}}</p>
+ </td>
+ <td>{{CompatNo}}</td>
+ <td>11</td>
+ <td>30</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 在切換 <code>about:config</code> 偏好設定 <code>media.mediasource.enabled</code> 為 <code>true</code>時可以使用。此外，支援只限於白名單內的網站，如：YouTube, Netflix, 以及其他熱門的串流網站。白名單已經被移除且 Media Source Extensions 在 42+ 對所有網站已預設為啟用。</p>
+
+<p>[2] 只在 Windows 8+ 上有效。</p>
+
+<h2 id="相關資料">相關資料</h2>
+
+<ul>
+ <li>{{domxref("SourceBuffer")}}</li>
+ <li>{{domxref("SourceBufferList")}}</li>
+</ul>
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>
diff --git a/files/zh-tw/web/api/mediasource/mediasource/index.html b/files/zh-tw/web/api/mediasource/mediasource/index.html
new file mode 100644
index 0000000000..54e9e6dfef
--- /dev/null
+++ b/files/zh-tw/web/api/mediasource/mediasource/index.html
@@ -0,0 +1,122 @@
+---
+title: MediaSource.MediaSource()
+slug: Web/API/MediaSource/MediaSource
+translation_of: Web/API/MediaSource/MediaSource
+---
+<div>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</div>
+
+<p>{{domxref("MediaSource")}} 介面的 <code><strong>MediaSource()</strong></code> 建構子建構且回傳一個沒有與任何來源緩衝 (source buffer) 關聯的新 <code>MediaSource</code> 物件。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: js">var mediaSource = new MediaSource();</pre>
+
+<h3 id="參數">參數</h3>
+
+<p>無。</p>
+
+<h2 id="範例">範例</h2>
+
+<p>以下的片段擷取自 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">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);
+}
+
+...
+</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>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Chrome</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari (WebKit)</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>23</td>
+ <td>{{CompatGeckoDesktop("25.0")}}<sup>[1]</sup><br>
+ {{CompatGeckoDesktop("42.0")}}</td>
+ <td>11<sup>[2]</sup></td>
+ <td>15</td>
+ <td>8</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Android</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>Firefox OS (Gecko)</th>
+ <th>IE Phone</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>4.4.4</td>
+ <td>
+ <p>{{CompatNo}}</p>
+ </td>
+ <td>{{CompatNo}}</td>
+ <td>11</td>
+ <td>30</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 在切換 <code>about:config</code> 偏好設定 <code>media.mediasource.enabled</code> 為 <code>true</code> 時可以使用。此外，支援只限於白名單內的網站，如：YouTube, Netflix, 以及其他熱門的串流網站。白名單已經被移除且 Media Source Extensions 在 42+ 對所有網站已預設為啟用。</p>
+
+<p>[2] 只在 Windows 8+ 上有效。</p>
+
+<h2 id="相關資料">相關資料</h2>
+
+<ul>
+ <li>{{domxref("SourceBuffer")}}</li>
+ <li>{{domxref("SourceBufferList")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/mediasource/readystate/index.html b/files/zh-tw/web/api/mediasource/readystate/index.html
new file mode 100644
index 0000000000..b7e5f1835b
--- /dev/null
+++ b/files/zh-tw/web/api/mediasource/readystate/index.html
@@ -0,0 +1,136 @@
+---
+title: MediaSource.readyState
+slug: Web/API/MediaSource/readyState
+translation_of: Web/API/MediaSource/readyState
+---
+<div>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</div>
+
+<p>{{domxref("MediaSource")}} 介面的唯讀屬性 <code><strong>readyState</strong></code> 回傳表示當前 <code>MediaSource</code> 狀態的列舉值。三種可能的值為：</p>
+
+<ul>
+ <li><code>closed</code>: 來源 (source) 目前沒有附加到媒體元件 (media element) 。</li>
+ <li><code>open</code>: 來源已經附加且可以接收 {{domxref("SourceBuffer")}} 物件。</li>
+ <li><code>ended</code>: 來源已經附加但是串流已經經由 {{domxref("MediaSource.endOfStream()")}} 結束。</li>
+</ul>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: js">var myReadyState = mediaSource.readyState;</pre>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個 {{domxref("DOMString")}}。</p>
+
+<h2 id="範例">範例</h2>
+
+<p>以下片段是由 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 language-js"><code class="language-js"><span class="keyword token">if</span> <span class="punctuation token">(</span><span class="string token">'MediaSource'</span> <span class="keyword token">in</span> window <span class="operator token">&amp;&amp;</span> MediaSource<span class="punctuation token">.</span><span class="function token">isTypeSupported<span class="punctuation token">(</span></span>mimeCodec<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="keyword token">var</span> mediaSource <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">MediaSource</span><span class="punctuation token">;</span>
+ <span class="comment token"> //console.log(mediaSource.readyState); // closed
+</span> video<span class="punctuation token">.</span>src <span class="operator token">=</span> URL<span class="punctuation token">.</span><span class="function token">createObjectURL<span class="punctuation token">(</span></span>mediaSource<span class="punctuation token">)</span><span class="punctuation token">;</span>
+ mediaSource<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'sourceopen'</span><span class="punctuation token">,</span> sourceOpen<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+ console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">'Unsupported MIME type or codec: '</span><span class="punctuation token">,</span> mimeCodec<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> sourceOpen <span class="punctuation token">(</span>_<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> //console.log(this.readyState); // open
+</span> <span class="keyword token">var</span> mediaSource <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">;</span>
+ <span class="keyword token">var</span> sourceBuffer <span class="operator token">=</span> mediaSource<span class="punctuation token">.</span><span class="function token">addSourceBuffer<span class="punctuation token">(</span></span>mimeCodec<span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="function token">fetchAB<span class="punctuation token">(</span></span>assetURL<span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>buf<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ sourceBuffer<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'updateend'</span><span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>_<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ mediaSource<span class="punctuation token">.</span><span class="function token">endOfStream<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ video<span class="punctuation token">.</span><span class="function token">play<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="comment token"> //console.log(mediaSource.readyState); // ended
+</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ sourceBuffer<span class="punctuation token">.</span><span class="function token">appendBuffer<span class="punctuation token">(</span></span>buf<span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></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', '#widl-MediaSource-readyState', 'readyState')}}</td>
+ <td>{{Spec2('Media Source Extensions')}}</td>
+ <td>Initial definition.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="相容性表格">相容性表格</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<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>23</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoDesktop("25.0")}}<sup>[1]</sup><br>
+ {{CompatGeckoDesktop("42.0")}}</td>
+ <td>11<sup>[2]</sup></td>
+ <td>15</td>
+ <td>8</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>Firefox OS (Gecko)</th>
+ <th>IE Phone</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>4.4.4</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>
+ <p>{{CompatNo}}</p>
+ </td>
+ <td>{{CompatNo}}</td>
+ <td>11</td>
+ <td>30</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 在切換 <code>about:config</code> preference <code>media.mediasource.enabled</code> 為 <code>true</code> 時可以使用。此外，支援只限於白名單內的網站，如：YouTube, Netflix, 以及其他熱門的串流網站。白名單已經被移除且 Media Source Extensions 在 42+ 對所有網站已預設為啟用。</p>
+
+<p>[2] 只在 Windows 8+ 上有效。</p>
+
+<h2 id="相關資料">相關資料</h2>
+
+<ul>
+ <li>{{domxref("SourceBuffer")}}</li>
+ <li>{{domxref("SourceBufferList")}}</li>
+</ul>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2024-09-25 08:33:11 +0000