blob: b7e5f1835b207d4b971cff68d119f004226f8a4b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
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">&&</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>
|
