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
|
---
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 && 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>
|
