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
183
184
185
186
187
188
189
190
191
192
193
194
|
---
title: MediaSource
slug: Web/API/MediaSource
tags:
- Видео
- Интерфейс
- Источник
- Потоковое медиа
- Расширение
- аудио
translation_of: Web/API/MediaSource
---
<p>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</p>
<p><strong><code>MediaSource</code></strong> – это интерфейс <a href="/en-US/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions API</a> для предоставления интерактивного источника медиаданных объектам типа {{domxref("HTMLMediaElement")}}.</p>
<h2 id="Конструктор">Конструктор</h2>
<dl>
<dt>{{domxref("MediaSource.MediaSource", "MediaSource()")}}</dt>
<dd>Создаёт и возвращает новый объект <code>MediaSource</code> не имеющий подключённых буферов данных.</dd>
</dl>
<h2 id="Свойства">Свойства</h2>
<p><em>Наследует свойства родительского интерфейса , {{domxref("EventTarget")}}.</em></p>
<dl>
<dt>{{domxref("MediaSource.sourceBuffers")}} {{readonlyInline}}</dt>
<dd>Возвращает объект типа {{domxref("SourceBufferList")}} содержащий список объектов типа {{domxref("SourceBuffer")}} , связанных непосредственно с текущим <code>MediaSource</code>.</dd>
<dt>{{domxref("MediaSource.activeSourceBuffers")}} {{readonlyInline}}</dt>
<dd>Возвращает объект типа {{domxref("SourceBufferList")}} содержащий подмножество объектов типа {{domxref("SourceBuffer")}} хранящих в себе другие объекты типа {{domxref("SourceBuffers")}} — список объектов, предоставляющих доступ к выбранному видео, доступным аудиодорожкам, текстовым данным и тд.</dd>
<dt>{{domxref("MediaSource.readyState")}} {{readonlyInline}}</dt>
<dd>Возвращает enum, отображающий состояние текущего <code>MediaSource-объекта</code>, будь то отсутствие подключения к медиа-элементу(<code>closed</code>), подключённый и готовый к передаче объектов типа {{domxref("SourceBuffer")}} (<font face="consolas, Liberation Mono, courier, monospace">open</font>), или подключённый, но с завершённым потоком {{domxref("MediaSource.endOfStream()")}} (<code>ended</code>.)</dd>
<dt>{{domxref("MediaSource.duration")}}</dt>
<dd>Возвращает или устанавливает продолжительность предоставляемых медиаданных.</dd>
</dl>
<dl>
</dl>
<dl>
</dl>
<h2 id="Методы">Методы</h2>
<p><em>Наследует свойства родительского интерфейса, {{domxref("EventTarget")}}.</em></p>
<dl>
<dt>{{domxref("MediaSource.addSourceBuffer()")}}</dt>
<dd>Создаёт новый объект типа {{domxref("SourceBuffer")}}, с указанным MIME-типом и добавляет в список <code>MediaSource</code>'s {{domxref("SourceBuffers")}}.</dd>
<dt>{{domxref("MediaSource.removeSourceBuffer()")}}</dt>
<dd>Удаляет указанный {{domxref("SourceBuffer")}} из списка {{domxref("SourceBuffers")}}, связанного с текущим <code>MediaSource-объектом</code>.</dd>
<dt>{{domxref("MediaSource.endOfStream()")}}</dt>
<dd>Сигнализирует об окончании потока.</dd>
<dt>
<h2 id="Статичные_методы">Статичные методы</h2>
</dt>
<dt>{{domxref("MediaSource.isTypeSupported()")}}</dt>
<dd>Возвращает значение {{domxref("Boolean")}}, поясняющее, поддерживается ли клиентом полученный MIME-тип — если это так, то можно успешно создать объект типа {{domxref("SourceBuffer")}} для этого MIME-типа.</dd>
</dl>
<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 && 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>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{{property_prefix("-webkit")}}<br>
31</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>41.0</p>
</td>
<td>41.0</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>
|
