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
|
---
title: MediaSource
slug: Web/API/MediaSource
tags:
- API
- Audio
- Experimental
- Extensions
- Interface
- MSE
- Media
- MediaSource
- MediaSource Extensions
- Reference
- TopicStub
- Video
translation_of: Web/API/MediaSource
---
<p>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</p>
<p>L'interface <strong><code>MediaSource</code></strong> de l'<a href="/en-US/docs/Web/API/Media_Source_Extensions_API">API Media Source Extensions</a> représente une source de données multimédia pour un objet {{domxref("HTMLMediaElement")}}. Un objet <code>MediaSource</code> peut être attaché à un {{domxref("HTMLMediaElement")}} pour être lu dans l'agent utilisateur.</p>
<p>{{InheritanceDiagram}}</p>
<h2 id="Constructeur">Constructeur</h2>
<dl>
<dt>{{domxref("MediaSource.MediaSource", "MediaSource()")}}</dt>
<dd>Construit et renvoie un nouvel objet <code>MediaSource</code> sans tampon source associé.</dd>
</dl>
<h2 id="Propriétés">Propriétés</h2>
<dl>
<dt>{{domxref("MediaSource.sourceBuffers")}} {{readonlyInline}}</dt>
<dd>Renvoie un objet {{domxref("SourceBufferList")}} contenant la liste des objets {{domxref("SourceBuffer")}} associés à ce <code>MediaSource</code>.</dd>
<dt>{{domxref("MediaSource.activeSourceBuffers")}} {{readonlyInline}}</dt>
<dd>Renvoie un objet {{domxref("SourceBufferList")}} contenant un sous-ensemble des objets {{domxref("SourceBuffer")}} contenus dans {{domxref("MediaSource.sourceBuffers")}} — la liste des objets fournissant la piste vidéo sélectionnée, pistes audio activées et pistes de texte affichées / masquées.</dd>
<dt>{{domxref("MediaSource.readyState")}} {{readonlyInline}}</dt>
<dd>Renvoie une énumération représentant l'état de la <code>MediaSource</code> actuelle, qu'elle ne soit pas actuellement attachée à un élément multimédia (<code>fermé</code>), attachée et prête à recevoir des objets {{domxref("SourceBuffer")}} (<code>ouvert</code>), ou attachée mais le flux a été terminé via {{domxref("MediaSource.endOfStream()")}} (<code>terminé</code>).</dd>
<dt>{{domxref("MediaSource.duration")}}</dt>
<dd>Obtient et définit la durée du média actuel présenté.</dd>
</dl>
<h3 id="Gestionnaires_dévénements">Gestionnaires d'événements</h3>
<dl>
<dt>{{domxref("MediaSource.onsourceclose")}}</dt>
<dd>Le gestionnaire d'événements pour l'événement <code>sourceclose</code>.</dd>
<dt>{{domxref("MediaSource.onsourceended")}}</dt>
<dd>Le gestionnaire d'événements pour l'événement <code>sourceended</code>.</dd>
<dt>{{domxref("MediaSource.onsourceopen")}}</dt>
<dd>Le gestionnaire d'événements pour l'événement <code>sourceopen</code>.</dd>
</dl>
<h2 id="Méthodes">Méthodes</h2>
<p><em>Hérite des méthodes de son interface parente, {{domxref("EventTarget")}}.</em></p>
<dl>
<dt>{{domxref("MediaSource.addSourceBuffer()")}}</dt>
<dd>Crée un nouveau {{domxref ("SourceBuffer")}} du type MIME donné et l'ajoute à la liste {{domxref ("MediaSource.sourceBuffers")}}.</dd>
<dt>{{domxref("MediaSource.clearLiveSeekableRange()")}}</dt>
<dd>Efface un ensemble privé de plage de recherche avec un appel à <code>setLiveSeekableRange()</code>.</dd>
<dt>{{domxref("MediaSource.endOfStream()")}}</dt>
<dd>Signale la fin du flux.</dd>
<dt>{{domxref("MediaSource.removeSourceBuffer()")}}</dt>
<dd>Supprime le {{domxref ("SourceBuffer")}} donné de la liste {{domxref ("MediaSource.sourceBuffers")}}.</dd>
<dt>{{domxref("MediaSource.setLiveSeekableRange()")}}</dt>
<dd>Définit la plage que l'utilisateur peut rechercher dans l'élément multimédia.</dd>
</dl>
<h2 id="Méthodes_statiques">Méthodes statiques</h2>
<dl>
<dt>{{domxref("MediaSource.isTypeSupported()")}}</dt>
<dd>Renvoie une valeur {{domxref ("Boolean")}} indiquant si le type MIME donné est pris en charge par l'agent utilisateur actuel - c'est-à-dire s'il parvient à créer des objets {{domxref ("SourceBuffer")}} pour ce type MIME .</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<p>L'exemple simple suivant charge une vidéo avec {{domxref ("XMLHttpRequest")}} et la lit dès que possible. Cet exemple a été écrit par Nick Desaulniers et peut être <a href="http://nickdesaulniers.github.io/netfix/demo/bufferAll.html">consulté en direct ici</a> (vous pouvez aussi <a href="https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html">télécharger la source</a> pour une enquête plus approfondie).</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="Spécifications">Spécifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Statut</th>
<th scope="col">Commentaire</th>
</tr>
<tr>
<td>{{SpecName('Media Source Extensions', '#mediasource', 'MediaSource')}}</td>
<td>{{Spec2('Media Source Extensions')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("api.MediaSource")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{domxref("SourceBuffer")}}</li>
<li>{{domxref("SourceBufferList")}}</li>
</ul>
|
