initial commit

2 files changed, 209 insertions, 0 deletions

diff --git a/files/fr/web/api/mediasource/index.html b/files/fr/web/api/mediasource/index.html
new file mode 100644
index 0000000000..5c3c303bdd
--- /dev/null
+++ b/files/fr/web/api/mediasource/index.html
@@ -0,0 +1,155 @@
+---
+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 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 &amp;&amp; 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>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.MediaSource")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("SourceBuffer")}}</li>
+ <li>{{domxref("SourceBufferList")}}</li>
+</ul>
diff --git a/files/fr/web/api/mediasource/mediasource/index.html b/files/fr/web/api/mediasource/mediasource/index.html
new file mode 100644
index 0000000000..dac8c3d8ee
--- /dev/null
+++ b/files/fr/web/api/mediasource/mediasource/index.html
@@ -0,0 +1,54 @@
+---
+title: MediaSource.MediaSource()
+slug: Web/API/MediaSource/MediaSource
+translation_of: Web/API/MediaSource/MediaSource
+---
+<div>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</div>
+
+<p>Le constructeur <code><strong>MediaSource()</strong></code> de l'interface {{domxref("MediaSource")}} construit et retourne un nouvel object <code>MediaSource</code> sans buffer associé</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var mediaSource = new MediaSource();</pre>
+
+<h3 id="Paramèteres">Paramèteres</h3>
+
+<p>Aucun.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>Le fragement de code suivant est tiré d'un exemple simple écrit par par Nick Desaulniers (<a href="http://nickdesaulniers.github.io/netfix/demo/bufferAll.html">voir la démonstration complète</a>, ou <a href="https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html">télécharger les sources</a> pour une meilleure compréhention.)</p>
+
+<pre class="brush: js">var video = document.querySelector('video');
+
+var assetURL = 'frag_bunny.mp4';
+// A besoin d'être spécifique, Blink (moteur de rendu Chrome) demande le codec
+// ./mp4info frag_bunny.mp4 | grep Codec
+var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
+
+if ('MediaSource' in window &amp;&amp; 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);
+}
+
+...
+</pre>
+
+<h2 id="Compatibilitée_des_navigateurs">Compatibilitée des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.MediaSource.MediaSource")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("SourceBuffer")}}</li>
+ <li>{{domxref("SourceBufferList")}}</li>
+</ul>