blob: b9fab966e4dc939ea3c190fdb050a0004035e072 (
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
137
138
139
140
141
142
143
144
145
146
147
148
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>
|
