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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
|
---
title: MediaSource
slug: Web/API/MediaSource
translation_of: Web/API/MediaSource
---
<p>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</p>
<p>El <strong><code>MediaSource</code></strong> interfaz representa un recurso de media en datos por un {{domxref("HTMLMediaElement")}} objeto. Un <code>MediaSource</code> objeto puede ser atribuido a un {{domxref("HTMLMediaElement")}} para ser reproducido por el usuario.</p>
<h2 id="Constructor">Constructor</h2>
<dl>
<dt>{{domxref("MediaSource.MediaSource", "MediaSource()")}}</dt>
<dd>construye y retorna un <code>MediaSource</code> objeto sin asociar un recurso con buffers.</dd>
</dl>
<h2 id="Propiedades">Propiedades</h2>
<p><em>Inherits properties from its parent interface, {{domxref("EventTarget")}}.</em></p>
<dl>
<dt>{{domxref("MediaSource.sourceBuffers")}} {{readonlyInline}}</dt>
<dd>Returns a {{domxref("SourceBufferList")}} object containing the list of {{domxref("SourceBuffer")}} objects associated with this <code>MediaSource</code>.</dd>
<dt>{{domxref("MediaSource.activeSourceBuffers")}} {{readonlyInline}}</dt>
<dd>Returns a {{domxref("SourceBufferList")}} object containing a subset of the {{domxref("SourceBuffer")}} objects contained within {{domxref("SourceBuffers")}} — the list of objects providing the selected video track, enabled audio tracks, and shown/hidden text tracks.</dd>
<dt>{{domxref("MediaSource.readyState")}} {{readonlyInline}}</dt>
<dd>Returns an enum representing the state of the current <code>MediaSource</code>, whether it is not currently attached to a media element (<code>closed</code>), attached and ready to receive {{domxref("SourceBuffer")}} objects (<code>open</code>), or attached but the stream has been ended via {{domxref("MediaSource.endOfStream()")}} (<code>ended</code>.)</dd>
<dt>{{domxref("MediaSource.duration")}}</dt>
<dd>Gets and sets the duration of the current media being presented.</dd>
</dl>
<dl>
</dl>
<dl>
</dl>
<h2 id="Methods">Methods</h2>
<p><em>Inherits properties from its parent interface, {{domxref("EventTarget")}}.</em></p>
<dl>
<dt>{{domxref("MediaSource.addSourceBuffer()")}}</dt>
<dd>Creates a new {{domxref("SourceBuffer")}} of the given MIME type and adds it to the <code>MediaSource</code>'s {{domxref("SourceBuffers")}} list.</dd>
<dt>{{domxref("MediaSource.removeSourceBuffer()")}}</dt>
<dd>Removes the given {{domxref("SourceBuffer")}} from the {{domxref("SourceBuffers")}} list associated with this <code>MediaSource</code> object.</dd>
<dt>{{domxref("MediaSource.endOfStream()")}}</dt>
<dd>Signals the end of the stream.</dd>
<dt>
<h2 id="Static_methods">Static methods</h2>
</dt>
<dt>{{domxref("MediaSource.isTypeSupported()")}}</dt>
<dd>Returns a {{domxref("Boolean")}} value indicating if the given MIME type is supported by the current user agent — this is, if it can successfully create {{domxref("SourceBuffer")}} objects for that MIME type.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<p>The following simple example loads a video chunk by chunk as fast as possible, playing it as soon as it can. This example was written by Nick Desaulniers and can be <a href="http://nickdesaulniers.github.io/netfix/demo/bufferAll.html">viewed live here</a> (you can also <a href="https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html">download the source</a> for further investigation.)</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 && 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="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</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="Browser_compatibility">Browser compatibility</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] Available after switching the <code>about:config</code> preference <code>media.mediasource.enabled</code> to <code>true</code>. In addition, support was limited to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed and Media Source Extensions was enabled by default in 42+ for all sites.</p>
<p>[2] Only works on Windows 8+.</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{domxref("SourceBuffer")}}</li>
<li>{{domxref("SourceBufferList")}}</li>
</ul>
|
