diff options
Diffstat (limited to 'files/fr/web/guide/audio_and_video_delivery')
3 files changed, 954 insertions, 0 deletions
diff --git a/files/fr/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html b/files/fr/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html new file mode 100644 index 0000000000..89be1e7ca4 --- /dev/null +++ b/files/fr/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html @@ -0,0 +1,218 @@ +--- +title: 'Mémoire tampon, position, et plages de temps' +slug: Web/Guide/Audio_and_video_delivery/buffering_seeking_time_ranges +tags: + - Apps + - Buffer + - HTML5 + - TimeRanges + - Video + - buffering + - seeking +translation_of: Web/Guide/Audio_and_video_delivery/buffering_seeking_time_ranges +--- +<div class="summary"> +<p><span class="seoSummary">Il est parfois utile de savoir combien d'{{htmlelement("audio") }} ou {{htmlelement("video") }} a été téléchargé ou peut être joué sans délai — par exemple pour afficher la barre de progression du tampon dans un lecteur audio ou vidéo. Cet article explique comment construire une barre de progrès de mise en mémoire tampon en utilisant <a href="/fr/docs/Web/API/TimeRanges">TimeRanges</a>, et d'autres fonctionnalités de l'API Media.</span></p> +</div> + +<h2 id="Buffered">Buffered</h2> + +<p>L'attribut <code>buffered</code> indique quelles parties du média ont été téléchargées. Il retourne un objet {{ domxref("TimeRanges") }}, qui indique tous les morceaux téléchargés. C'est généralement contigu, mais si l'utilisateur saute à une autre position pendant que le média est en cours de chargement, il peut alors y avoir des trous.</p> + +<p>Cela fonctionne avec {{htmlelement("audio") }} et {{htmlelement("video") }}; pour l'instant, considérons un simple exemple audio:</p> + +<pre class="brush: html"><audio id="my-audio" controls src="music.mp3"> +</audio></pre> + +<p>On accède à cet attribut ainsi:</p> + +<pre class="brush: js">var myAudio = document.getElementById('my-audio'); + +var bufferedTimeRanges = myAudio.buffered;</pre> + +<h2 id="Objet_TimeRanges">Objet TimeRanges</h2> + +<p>TimeRanges est une série de plages de temps ne se chevauchant pas, avec un temps de début et de fin. (<a href="/fr/docs/Web/API/TimeRanges">en savoir plus sur TimeRanges</a>).</p> + +<p>Un objet {{ domxref("TimeRanges") }} contient les propriétés/méthodes suivantes:</p> + +<ul> + <li><code>length</code>: Le nombre de plages de temps contenus dans l'objet.</li> + <li><code>start(index)</code>: Permet de récupérer le temps du début, en seconde, d'une plage de temps.</li> + <li><code>end(index)</code>: Permet de récupérer le temps de la fin, en seconde, d'une plage de temps.</li> +</ul> + +<p>Sans interraction utilisateur il y a généralement une seule plage de temps, mais si vous sautez dans le média alors plus d'une plage de temps peut apparaître, comme illustré dans la visualisation ci-dessous. Elle représente deux plages de temps en mémoire tampon — une qui s'étend de 0 à 5 secondes et la seconde qui s'étend de 15 à 19 secondes.</p> + +<pre>------------------------------------------------------ +|=============| |===========| | +------------------------------------------------------ +0 5 15 19 21</pre> + +<p>Pour cette instance audio, l'objet {{ domxref("TimeRanges") }} associé aurait les propriétés suivantes:</p> + +<pre class="brush: js">myAudio.buffered.length; // returns 2 +myAudio.buffered.start(0); // returns 0 +myAudio.buffered.end(0); // returns 5 +myAudio.buffered.start(1); // returns 15 +myAudio.buffered.end(1); // returns 19</pre> + +<p>Pour essayer et visualiser les plages de temps en mémoire tampon, on peut écrire un peu d'HTML:</p> + +<pre class="brush: html"><p> + <audio id="my-audio" controls> + <source src="music.mp3" type="audio/mpeg"> + </audio> +</p> +<p> + <canvas id="my-canvas" width="300" height="20"> + </canvas> +</p></pre> + +<p>Et un peu de JavaScript:</p> + +<pre class="brush: js"> window.onload = function(){ + + var myAudio = document.getElementById('my-audio'); + var myCanvas = document.getElementById('my-canvas'); + var context = myCanvas.getContext('2d'); + + context.fillStyle = 'lightgray'; + context.fillRect(0, 0, myCanvas.width, myCanvas.height); + context.fillStyle = 'red'; + context.strokeStyle = 'white'; + + var inc = myCanvas.width / myAudio.duration; + + // afficher TimeRanges + + myAudio.addEventListener('seeked', function() { + for (i = 0; i < myAudio.buffered.length; i++) { + + var startX = myAudio.buffered.start(i) * inc; + var endX = myAudio.buffered.end(i) * inc; + var width = endX - startX; + + context.fillRect(startX, 0, width, myCanvas.height); + context.rect(startX, 0, width, myCanvas.height); + context.stroke(); + } + }); + }</pre> + +<p>Cela fonctionne mieux avec les morceaux audio ou vidéo un peu plus longs, mais appuyez sur play et cliquez sur la barre de progression du lecteur et vous devriez obtenir quelque chose comme ci-dessous. Chaque rectangle rouge remplissant le rectangle blanc représente une plage de temps.</p> + +<p><img alt="A simple audio player with play button, seek bar and volume control, with a series of red rectangles beneath it representing time ranges." src="https://mdn.mozillademos.org/files/7347/bufferedtimeranges.png" style="display: block; height: 89px; margin: 0px auto; width: 318px;"></p> + +<div class="note"> +<p><strong>Note</strong>: Vous pouvez voir <a href="http://jsbin.com/memazaro/1/edit">cet exemple en direct sur JS Bin</a>.</p> +</div> + +<h2 id="Seekable">Seekable</h2> + +<p>L'attribut <code>seekable</code> retourne un objet {{ domxref("TimeRanges") }} qui indique quelles parties du média peuvent être jouées sans chargement préalable. C'est indépendant du fait que la partie ait été téléchargée ou non: certaines parties peuvent être <em>seekable</em> mais non <em>buffered</em> si les requêtes de plage d'octets (byte-range requests) sont activées sur le serveur. Les requêtes de plage d'octets permettent aux parties du fichier média d'être délivrées du serveur et jouées presque immédiatement — et sont donc <em>seekable</em>.</p> + +<pre class="brush: js">var seekableTimeRanges = myAudio.seekable;</pre> + +<h2 id="Créer_notre_propre_barre_de_progrès">Créer notre propre barre de progrès</h2> + +<p>Si on voulait créer notre propre lecteur média, on pourrait vouloir afficher les parties du média prêtes à être jouées. Un bon moyen d'y arriver est d'utiliser l'attribut <code>seekable</code>.</p> + +<p>Bien qu'on ait vu que les parties ne sont pas nécessairement contigues, elles le sont généralement, et on peut utiliser une approximation de cette information pour donner à l'utilisateur une indication de la quantité de média qui peut être jouée directement. On peut trouver ce point en utilisant la ligne de code suivante:</p> + +<pre class="brush: js">var seekableEnd = myAudio.seekable.end(myAudio.seekable.length - 1);</pre> + +<div class="note"> +<p><strong>Note</strong>: <code>myAudio.seekable.end(myAudio.seekable.length - 1)</code> nous indique en fait le temps de fin de la dernière plage de temps disponible (et non toutes). En pratique, c'est suffisant, car le navigateur peut permettre ou non de requêter des plages d'octets. S'il ne le permet pas — <code>audio.seekable</code> sera l'équivalent de <code>audio.buffered</code> — on a une indication valide de la fin du média chargée. Sinon, alors cette valeur vaudra la durée du média presque instantannément.</p> +</div> + +<p>Il est peut-être préférable de donner une indication de la quantité de média effectivement téléchargée — c'est ce que les lecteurs natifs du navigateur semblent indiquer.</p> + +<p>Alors, construisons cela. Le HTML de notre lecteur ressemble à ça:</p> + +<pre class="brush: css"><audio id="my-audio" preload controls> + <source src="music.mp3" type="audio/mpeg"> +</audio> +<div class="buffered"> + <span id="buffered-amount"></span> +</div> +<div class="progress"> + <span id="progress-amount"></span> +</div> +</pre> + +<p>Nous utiliserons le CSS suivant pour styliser l'affichage de la mémoire tampon:</p> + +<pre class="brush: css">.buffered { + height: 20px; + position: relative; + background: #555; + width: 300px; +} + +#buffered-amount { + display: block; + height: 100%; + background-color: #777; + width: 0; +} + +.progress { + margin-top: -20px; + height: 20px; + position: relative; + width: 300px; +} + +#progress-amount { + display: block; + height: 100%; + background-color: #595; + width: 0; +}</pre> + +<p>Et le JavaScript suivant se charge notre fonctionnalité:</p> + +<pre class="brush: js">window.onload = function(){ + + var myAudio = document.getElementById('my-audio'); + + myAudio.addEventListener('progress', function() { + var duration = myAudio.duration; + if (duration > 0) { + for (var i = 0; i < myAudio.buffered.length; i++) { + if (myAudio.buffered.start(myAudio.buffered.length - 1 - i) < myAudio.currentTime) { + document.getElementById("buffered-amount").style.width = (myAudio.buffered.end(myAudio.buffered.length - 1 - i) / duration) * 100 + "%"; + break; + } + } + } + }); + + myAudio.addEventListener('timeupdate', function() { + var duration = myAudio.duration; + if (duration > 0) { + document.getElementById('progress-amount').style.width = ((myAudio.currentTime / duration)*100) + "%"; + } + }); +}</pre> + +<p>L'événement <code>progress</code> est déclenché au fur et à mesure que les données sont téléchargées, cela nous permet de réagir pour afficher la progression du téléchargement ou de la mise en mémoire tampon.</p> + +<p>L'événement <code>timeupdate</code> est declénché 4 fois par seconde au fur et à mesure que le média est joué et c'est là qu'on incrémente notre barre de progrès.</p> + +<p>Cela devrait vous donner des résultats similaires à ce qui suit, où la barre gris clair représente la progression de la mise en mémoire tampon et la barre verte montre la progression de la lecture:</p> + +<p><img alt="A simple audio player with play button, seek bar and volume control, with a bar below it. The bar has a red portion to show played video, and a dark gray bar to show how much has been buffered." src="https://mdn.mozillademos.org/files/7349/bufferedprogress.png" style="display: block; height: 67px; margin: 0px auto; width: 311px;"></p> + +<div class="note"> +<p><strong>Note</strong>: Voir pouvez <a href="http://jsbin.com/badimipi/1/edit">voir l'exemple en direct sur JS Bin</a>.</p> +</div> + +<h2 id="Un_petit_mot_sur_Played">Un petit mot sur Played</h2> + +<p>Il vaut la peine de mentionner la propriété <code>played</code> — elle nous indique quelles plages de temps ont été jouées dans le média. Par exemple:</p> + +<pre class="brush: js">var played = audio.played; // returns a TimeRanges object</pre> + +<p>Ce peut être utile pour récupérer les parties du média qui sont les plus écoutées ou regardées.</p> diff --git a/files/fr/web/guide/audio_and_video_delivery/index.html b/files/fr/web/guide/audio_and_video_delivery/index.html new file mode 100644 index 0000000000..277cd9546b --- /dev/null +++ b/files/fr/web/guide/audio_and_video_delivery/index.html @@ -0,0 +1,448 @@ +--- +title: Intégration Audio et Vidéo +slug: Web/Guide/Audio_and_video_delivery +tags: + - Audio + - HTML5 + - Media + - Video +translation_of: Web/Guide/Audio_and_video_delivery +--- +<div class="summary"> +<p>On peut délivrer de l'audio et vidéo sur le web de plusieurs manières, du fichier média statique au live stream (flux en direct) adaptatif. Cet article se veut être le point de départ pour explorer les différents mécanismes de diffusion de média sur le web et la compatiblité avec les navigateurs populaires.</p> +</div> + +<h2 id="Les_éléments_Audio_et_Vidéo">Les éléments Audio et Vidéo</h2> + +<p>Que l'on traite des fichiers audio pré-enregistrés ou des live streams, le mécanisme pour les rendre disponibles à travers un navigateur reste à peu près le même — via les éléments {{ htmlelement("audio")}} et {{ htmlelement("video")}}. Actuellement, pour supporter tous les navigateurs, il est nécessaire de définir deux formats — bien qu'avec l'adoption des formats MP3 et MP4 dans Firefox et Opera, cela change rapidement. Vous pouvez trouver les informations de compatibilité des navigateurs aux endroits suivants:</p> + +<ul> + <li><a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Audio_Codec_Support">Table de compatibilité des Codecs Audio</a></li> + <li><a href="/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility">Table de compatibilité des Codecs Audio/Video</a></li> +</ul> + +<p>Pour délivrer du contenu audio et vidéo, le procédé général est comme suit:</p> + +<ol> + <li>Vérifier quels formats sont pris en charge par le navigateur via la détection de fonctionnalité</li> + <li>Si le navigateur ne lit pas nativement les formats fournis, utiliser un contenu de secours (comme une version Flash.)</li> + <li>Définir comment vous voulez jouer/instancier le média (par exemple un élément {{ htmlelement("video") }}, ou peut-être <code>document.createElement('video')</code>)</li> + <li>Ajouter le fichier média au lecteur.</li> +</ol> + +<h3 id="Audio_HTML">Audio HTML</h3> + +<pre class="brush: html"><audio controls preload="auto"> + <source src="audiofile.mp3" type="audio/mpeg"> + + <!-- fallback pour les navigateurs qui ne supportent pas mp3 --> + <source src="audiofile.ogg" type="audio/ogg"> + + <!-- fallback pour les navigateurs qui ne supportent pas la balise audio --> + <a href="audiofile.mp3">download audio</a> +</audio></pre> + +<p>Le code ci-dessus va créer un lecteur audio qui tente de précharger autant d'audio que possible pour une lecteur fluide.</p> + +<div class="note"> +<p><strong>Note</strong>: L'attribut <code>preload</code> peut être ignoré par certains navigateurs mobiles.</p> +</div> + +<p>Pour plus d'informations voir <a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#HTML5_audio_in_detail">Les bases de l'Audio multi-navigateur (Audio HTML5 en détail)</a></p> + +<h3 id="Vidéo_HTML">Vidéo HTML</h3> + +<pre class="brush: html"><video controls width="640" height="480" poster="initialimage.png" autoplay muted> + <source src="videofile.mp4" type="video/mp4"> + + <!-- fallback pour les navigateurs qui ne supportent pas mp4 --> + <source src="videofile.webm" type="video/webm"> + + <!-- spécifie les fichiers de sous-titres --> + <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> + <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"> + + <!-- fallback pour les navigateurs qui ne supportent pas la balise video --> + <a href="videofile.mp4">download video</a> +</video></pre> + +<p>Le code ci-dessus crée un lecteur vidéo de dimensions 640x480 pixels, affichant une image poster jusqu'à ce que la vidéo soit lue. On demande à la vidéo de passer en <code>autoplay</code> (jouer automatiquement) mais d'être <code>muted</code> (en sourdine) par défaut.</p> + +<div class="note"> +<p><strong>Note</strong>: L'attribut <code>autoplay</code> peut être ignoré par certains navigateurs mobiles.</p> +</div> + +<p>Pour plus d'informations voir {{ htmlelement("video", "l'élément vidéo") }} et <a href="/fr/Apps/Build/Manipulating_media/cross_browser_video_player">Créer un lecteur vidéo multi-navigateur</a>.</p> + +<h3 id="Contenu_de_secours_Audio_et_Vidéo">Contenu de secours Audio et Vidéo</h3> + +<p>On peut créer un contenu de secours en utilisant Flash. <a href="https://github.com/mediaelement/mediaelement/tree/master/build">Utiliser mediaelement.js</a> par exemple.</p> + +<pre class="brush: html"><audio controls> + <source src="audiofile.mp3" type="audio/mpeg"> + <source src="audiofile.ogg" type="audio/ogg"> + <!-- fallback pour les navigateurs qui ne supportent pas le tag audio --> + <a href="audiofile.mp3">download audio</a> + <object width="320" height="30" type="application/x-shockwave-flash" data="mediaelement-flash-audio.swf"> + <param name="movie" value="mediaelement-flash-audio.swf" /> + <param name="flashvars" value="controls=true&file=audiofile.mp3" /> + </object> +</audio></pre> + +<p>Le procédé est très similaire avec {{ htmlelement("video") }} — il faut juste changer le SWF utilisé.<br> + <br> + <a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Fallbacks">Plus d'option de Fallbacks</a>.</p> + +<h3 id="Audio_JavaScript">Audio JavaScript</h3> + +<pre class="brush: js">var myAudio = document.createElement('audio'); + +if (myAudio.canPlayType('audio/mpeg')) { + myAudio.setAttribute('src','audiofile.mp3'); +} else if (myAudio.canPlayType('audio/ogg')) { + myAudio.setAttribute('src','audiofile.ogg'); +} + +myAudio.currentTime = 5; +myAudio.play();</pre> + +<p>On définit la source de l'audio en fonction du type de fichier audio pris en charge par le navigateur, puis on place la tête de lecture à 5 secondes et essayons de lire le fichier.</p> + +<div class="note"> +<p><strong>Note</strong>: <code>Play()</code> sera ignoré par certains navigateurs mobiles à moins que l'événement ne soit initié par une action utilisateur.</p> +</div> + +<p>Il est également possible de donner un fichier WAV encodé en base64 à l'élément {{ htmlelement("audio") }}, permettant ainsi de générer de l'audio à la volée:</p> + +<pre class="brush: html"><audio id="player" src="data:audio/x-wav;base64,UklGRvC..."></audio></pre> + +<p><a href="https://github.com/kripken/speak.js/">Speak.js</a> emploie cette technique. <a href="http://speak-demo.herokuapp.com">Essayez la démo</a>.</p> + +<h3 id="Vidéo_JavaScript">Vidéo JavaScript</h3> + +<pre class="brush: js">var myVideo = document.createElement('video'); + +if (myVideo.canPlayType('video/mp4')) { + myVideo.setAttribute('src','videofile.mp4'); +} else if (myVideo.canPlayType('video/webm')) { + myVideo.setAttribute('src','videofile.webm'); +} + +myVideo.width = 480; +myVideo.height = 320;</pre> + +<p>On définit la source de la vidéo en fonction du type de fichier vidéo pris en charge par le navigateur, puis on définit la largeur et la hauteur de la vidéo.</p> + +<h2 id="API_Web_Audio">API Web Audio</h2> + +<pre class="brush: js"> var context; + var request; + var source; + + try { + context = new (window.AudioContext || window.webkitAudioContext)(); + request = new XMLHttpRequest(); + request.open("GET","http://jplayer.org/audio/mp3/RioMez-01-Sleep_together.mp3",true); + request.responseType = "arraybuffer"; + + request.onload = function() { + context.decodeAudioData(request.response, function(buffer) { + source = context.createBufferSource(); + source.buffer = buffer; + source.connect(context.destination); + // auto play + source.start(0); // start was previously noteOn + }); + }; + + request.send(); + + } catch(e) { + alert('web audio api not supported'); + }</pre> + +<p>Dans cet exemple, on récupère un fichier MP3 via XHR, on le charge et on le lit (<a href="http://jsbin.com/facutone/1/edit?js">Essayez par vous-même</a>). Pour en savoir plus sur l'API Web Audio voir <a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a>.</p> + +<h2 id="getUserMedia_Stream_API">getUserMedia / Stream API</h2> + +<p>Il est également possible de récupérer un live stream de la webcam et/ou du microphone de l'utilisateur avec <code>getUserMedia</code> et l'API Stream. Cela fait partie d'une technologie plus large connue sous le nom de WebRTC (Web Real-Time Communications) et est compatible avec les dernières versions de Chrome, Firefox et Opera.</p> + +<p>Pour récupérer un flux de la webcam, commencez par créer un élément {{htmlelement("video")}}:</p> + +<pre class="brush: html"><video id="webcam" width="480" height="360"></video></pre> + +<p>Ensuite, si cette opération est prise en charge, connectez la webcam à l'élément video:</p> + +<pre class="brush: js">navigator.getUserMedia || + (navigator.getUserMedia = navigator.mozGetUserMedia || + navigator.webkitGetUserMedia || navigator.msGetUserMedia); + +window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL; + +if (navigator.getUserMedia) { + navigator.getUserMedia({ + video: true, + audio: false + }, onSuccess, onError); +} else { + alert('getUserMedia is not supported in this browser.'); +} + +function onSuccess(stream) { + var video = document.getElementById('webcam'); + video.autoplay = true; + video.src = window.URL.createObjectURL(stream); +} + +function onError() { + alert('There has been a problem retreiving the streams - are you running on file:/// or did you disallow access?'); +}</pre> + +<p>Pour en savoir plus, lisez la page <a href="/fr/docs/NavigatorUserMedia.getUserMedia">Navigator.getUserMedia</a>.</p> + +<h2 id="Mediastream_Recording">Mediastream Recording</h2> + +<p>De nouveaux standards sont en cours de déploiement pour permettre au navigateur de récupérer le flux du micro ou de la webcam — en utilisant <code>getUserMedia</code> — et l'enregistrer directement avec la nouvelle API MediaRecorder. Pour ce faire, on prend le stream retourné par <code>getUserMedia</code>, on le donne en paramètre à un objet <code>MediaRecorder</code>, puis on utilise le résultat obtenu comme source audio ou video.<br> + <br> + Le principe de base est décrit ci-dessus:</p> + +<pre class="brush: js">var onSuccess = function(stream) { + + var mediaRecorder = new MediaRecorder(stream); + + mediaRecorder.ondataavailable = function(e) { + var audio = document.createElement('audio'); + audio.src = window.URL.createObjectURL(e.data); + } +} + +navigator.getUserMedia({audio:true}, onSuccess);</pre> + +<p>Voir <a href="/fr/docs/Web/API/MediaRecorder_API">MediaRecorder API</a> pour plus de détails.</p> + +<div class="note"> +<p><strong>Note</strong>: MediaRecorder est actuellement uniquement supporté par Firefox et uniquement pour l'audio, mais il existe des solutions pour contourner ce problème, comme la bibliothèque <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC">RecordRTC</a>.</p> +</div> + +<h2 id="Extensions_de_Source_Media">Extensions de Source Media</h2> + +<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html">Media Source Extensions</a> (MSE) est un brouillon de travail de W3C qui prévoit d'étendre {{domxref("HTMLMediaElement")}} pour permettre à JavaScript de générer des flux média pour la lecture. Permettre à JavaScript de générer des streams facilite toute une variété de cas d'utilisations comme le straming adaptatif et le décalage temporel des live streams.</p> + +<h3 id="Extensions_Media_Encrypté_(EME)">Extensions Media Encrypté (EME)</h3> + +<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/encrypted-media/encrypted-media.html">Encrypted Media Extensions</a> est une proposition de W3C d'étendre {{domxref("HTMLMediaElement")}} en fournissant des APIs pour contrôler la lecture de contenu protégé.<br> + <br> + L'API supporte divers cas d'utiilisation, allant de la simple décryption par clé aux vidéos protégées par DRM (pourvu que le navigateur implémente ce système). L'échange de licence/clé est contrôlé par l'application, facilitant ainsi le développement d'applications de lecture robustes et qui supportent tout une gamme de technologies de décryptage et de protection de contenu.<br> + <br> + Un des principal usage d'EME est de permettre au navigateur d'implémenter le gestion des DRM (<a href="https://fr.wikipedia.org/wiki/Gestion_des_droits_num%C3%A9riques">Digital Rights Management</a>), rendant inutiles les modules extérieurs de type Flash ou Silverlight.</p> + +<div class="note"> +<p><strong>Note</strong>: Un DRM est un système permettant de restreindre l'accès à une ressource (particulièrement les vidéos), ce qui aide à en empêcher la copie.</p> +</div> + +<h3 id="Streaming_adaptatif">Streaming adaptatif</h3> + +<p>De nouveaux formats et protocoles ont été (et sont encore) deployés pour faciliter le streaming adaptatif. Un <em>streaming adaptatif</em> est un flux en direct qui s'adapte à la bande passante disponible de l'utilisateur, typiquement, la qualité du stream peut changer en temps réel pour utiliser plus ou moins de bande passante. Le streaming adaptatif est souvent utilisé en conjonction avec le live streaming, où une diffusion fluide de l'audio et vidéo est primordiale.</p> + +<p>Les principaux encodages utilisés pour le streaming adaptatif sont <a href="/fr/Apps/Build/Audio_and_video_delivery/Live_streaming_web_audio_and_video#HLS">HLS</a> et <a href="/fr/Apps/Build/Audio_and_video_delivery/Live_streaming_web_audio_and_video#MPEG-DASH">MPEG-DASH</a>. MSE a été conçu avec DASH en tête, il définit les flux d'octets selon <a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/isobmff-byte-stream-format.html">ISOBMFF</a> et <a href="http://en.wikipedia.org/wiki/M2ts">M2TS</a> (deux formats supportés par DASH, et le dernier par HLS aussi). Si vous êtes interessé par les différents standards, de manière générale, que vous cherchiez une certaine flexibilité ou souhaitiez supporter la plupart des navigateurs modernes, DASH est probablement la meilleure solution.</p> + +<div class="note"> +<p><strong>Note</strong>: Actuellement, Safari ne prend pas en charge DASH, cependant dash.js marche sur les nouvelles versions de Safari prévues pour être publiées avec OSX Yosemite.</p> +</div> + +<p>DASH fournit également un certain nombre de profils, y compris des profils <em>à la demande</em> simples, sans pré-traitement ni splitting des fichiers multimédia. Il existe un certain nombre de services en ligne qui vous permettront de convertir vos média en HLS ou DASH.<br> + <br> + Pour plus d'informations, voir <a href="/fr/Apps/Build/Audio_and_video_delivery/Live_streaming_web_audio_and_video">Live streaming web Audio et Vidéo</a>.</p> + +<h2 id="Débugger_les_problèmes_Audio_Vidéo">Débugger les problèmes Audio / Vidéo</h2> + +<p>Vous avez des problèmes de lecture audio ou vidéo? Essayez la checklist suivante.</p> + +<h3 id="Est-ce_que_le_navigateur_prend_en_charge_les_formats_fournis">Est-ce que le navigateur prend en charge les formats fournis?</h3> + +<p>Utilisez les fichiers suivants pour vérifier le support de votre format:</p> + +<ul> + <li>Audio MP3 (<code>type="audio/mpeg"</code>):<a href="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"> http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3</a> (<a href="http://jsbin.com/gekatoge/1/edit">audio MP3 en direct</a>.)</li> + <li>Audio MP4 (<code>type="audio/mp4"</code>):<a href="http://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a"> http://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a</a> (<a href="http://jsbin.com/gekatoge/2/edit">audio MP4 en direct</a>.)</li> + <li>Audio Ogg (<code>type="audio/ogg"</code>):<a href="http://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg"> http://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg</a> (<a href="http://jsbin.com/gekatoge/4/edit">audio OGG en direct</a>.)</li> + <li>Video MP4 (<code>type="video/mp4"</code>):<a href="http://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"> http://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v</a> (<a href="http://jsbin.com/gekatoge/5/edit">vidéo MP4 en direct</a>.)</li> + <li>Video WebM (<code>type="video/webm"</code>):<a href="http://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm"> http://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm</a> (<a href="http://jsbin.com/gekatoge/6/edit">vidéo WebM en direct</a>.)</li> + <li>Video Ogg (<code>type="video/ogg"</code>):<a href="http://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv"> http://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv</a> (<a href="http://jsbin.com/gekatoge/7/edit">vidéo OGG en direct</a>.)</li> +</ul> + +<p>Si un de ces fichier n'est pas lu, c'est que le navigateur que vous testez ne prend pas en charge le format correspondant. Considérez utiliser un format différent ou un contenu de secours (Flash).<br> + <br> + Si ces fichiers fonctionnent mais que votre fichier ne fonctionne pas, il y a deux problèmes possibles:</p> + +<h3 id="Le_serveur_ne_fournit_pas_le_type_MIME_correct_du_fichier">Le serveur ne fournit pas le type MIME correct du fichier</h3> + +<p>Bien que les serveurs les prennent généralement en charge, vous allez peut-être avoir besoin d'ajouter ce qui suit à votre fichier <code>.htaccess</code>:</p> + +<pre># AddType TYPE/SUBTYPE EXTENSION + +AddType audio/mpeg mp3 +AddType audio/mp4 m4a +AddType audio/ogg ogg +AddType audio/ogg oga + +AddType video/mp4 mp4 +AddType video/mp4 m4v +AddType video/ogg ogv +AddType video/webm webm +AddType video/webm webmv</pre> + +<h3 id="Votre_fichier_n'est_pas_encodé_correctement">Votre fichier n'est pas encodé correctement</h3> + +<p>Votre fichier n'a peut-être pas été encodé correctement — essayez de l'encoder en utilisant un des outils souivants, qui se sont avérés être généralement fiables:</p> + +<ul> + <li><a href="http://audacity.sourceforge.net/">Audacity</a> - Éditeur et enregistreur audio gratuit</li> + <li><a href="http://www.getmiro.com/">Miro</a> - Lecteur audio et vidéo open-source et gratuit</li> + <li><a href="http://handbrake.fr/">Handbrake</a> - Transcodeur vidéo open-source</li> + <li><a href="http://firefogg.org/">Firefogg</a> - Encodage audio et vidéo pour Firefox</li> + <li><a href="https://www.ffmpeg.org/">FFmpeg2</a> - Encodeur en ligne de commande complet</li> + <li><a href="https://libav.org/">Libav</a> - Encodeur en ligne de commande complet</li> + <li><a href="http://m.vid.ly/">Vid.ly</a> - Video player,transcoding and delivery</li> + <li><a href="https://archive.org/">Internet Archive</a> - Transcodage et stockage gratuit</li> +</ul> + +<h2 id="Customiser_votre_Lecteur_Media">Customiser votre Lecteur Media</h2> + +<p>Vous pouvez vouloir un lecteur audio ou vidéo qui ait le même aspect sur tous les navigateurs, ou simplement vouloir l'adapter à votre site. La technique générale pour y parvenir est d'omettre l'attribut <code>controls</code> afin que les contrôles par défaut du navigateur ne s'affichent pas, et de créer vos propres contrôles en HTML et CSS, avec du JavaScript pour lier vos contrôles à l'API audio/vidéo.</p> + +<p>Si vous avez besoin de quelque chose en plus, il est possible d'ajouter des fonctionnalités qui ne sont pas présentes par défaut dans les lecteurs, tels que la vitesse de lecture, le choix de la qualité ou mêmes les spectres audio. Vous pouvez également décider de rendre votre lecteur responsive — par exemple, vous pouvez enlever la barre de progrès sous certaines conditions.</p> + +<p>Vous pouvez détecter les événements de clic, de toucher et/ou de clavier pour déclencher des actions telles que lecture, pause et stop. Il est souvent souhaitable d'ajouter des raccourcis clavier pour plus de commodité et d'accessibilité pour l'utilisateur.</p> + +<p>Un exemple rapide — d'abord, configurez votre audio et vos contrôles personnalisés en HTML:</p> + +<pre class="brush: html"> <audio id="my-audio" src="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"></audio> + <button id="my-control">play</button></pre> + +<p>Ensuite, ajoutez un peu de JavaScript pour détecter les événements afin de lire et de mettre en pause l'audio:</p> + +<pre class="brush: js">window.onload = function() { + + var myAudio = document.getElementById('my-audio'); + var myControl = document.getElementById('my-control'); + + function switchState() { + if (myAudio.paused == true) { + myAudio.play(); + myControl.innerHTML = "pause"; + } else { + myAudio.pause(); + myControl.innerHTML = "play"; + } + } + + function checkKey(e) { + if (e.keycode == 32 ) { //spacebar + switchState(); + } + } + + myControl.addEventListener('click', function() { + switchState(); + }, false); + + window.addEventListener( "keypress", checkKey, false ); +}</pre> + +<p>Vous pouvez <a href="http://jsbin.com/jujeladu/2/edit">essayer cet exemple ici</a>. Pour plus d'informations, voir <a href="https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Creating_your_own_custom_audio_player">Customiser votre propre lecteur audio</a>.</p> + +<h2 id="Bibliothèques_JavaScript_AudioVidéo">Bibliothèques JavaScript Audio/Vidéo</h2> + +<p>Un certain nombre de bibliothèques JavaScript audio et vidéo existent. Les plus populaires permettent de choisir un design de lecteur cohérent sur tous les navigateurs et fournissent un contenu de secours pour les navigateurs qui ne prennent pas en charge l'audio et vidéo nativement. Le contenu de secours utilise souvent les plugins Adobe Flash ou Microsoft Silverlight. D'autres fonctionnalités telles que les éléments {{htmlelement("track")}} pour les sous-titres peuvent également être fournies par les bibliothèques média.</p> + +<h3 id="Audio_uniquement">Audio uniquement</h3> + +<ul> + <li><a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager</a></li> +</ul> + +<h3 id="Vidéo_uniquement">Vidéo uniquement</h3> + +<ul> + <li><a href="https://flowplayer.org/">flowplayer</a>: Gratuit, avec un watermark du logo flowplayer. Open source (licence GPL.)</li> + <li><a href="http://www.jwplayer.com">JWPlayer</a>: Nécessite de s'inscrire pour télécharger. Édition Open Source (Liecence Creative Commons.)</li> + <li><a href="http://www.sublimevideo.net/">SublimeVideo</a>: Nécessite de s'inscrire. Configuration par formulaire avec lien vers des bibliothèques hébergées via CDN.</li> + <li><a href="http://www.videojs.com/">Video.js</a>: Gratuit et Open Source (Licence Apache 2.)</li> +</ul> + +<h3 id="Audio_et_Vidéo">Audio et Vidéo</h3> + +<ul> + <li><a href="http://jPlayer.org">jPlayer</a>: Gratuit et Open Source (Licence MIT.)</li> + <li><a href="http://mediaelementjs.com/">mediaelement.js</a>: Gratuit et Open Source (Licence MIT.)</li> +</ul> + +<h3 id="Web_Audio_API">Web Audio API</h3> + +<ul> + <li><a href="https://github.com/cwilso/AudioContext-MonkeyPatch">AudioContext monkeypatch</a>: Un polyfill pour les anciennes versions de Web Audio API; Open Source (Licence Apache 2.)</li> +</ul> + +<h2 id="Tutoriels_Basiques">Tutoriels Basiques</h2> + +<dl> + <dt><a href="/en-US/Apps/Build/Manipulating_media/cross_browser_video_player">Creating a cross-browser video player</a></dt> + <dd>A guide to creating a basic cross browser video player using the {{ htmlelement ("video") }} element.</dd> + <dt><a href="/en-US/Apps/Build/Manipulating_media/Video_player_styling_basics">Video player styling basics</a></dt> + <dd>With the cross-browser video player put in place in the previous article, this article now looks at providing some basic, reponsive styling for the player.</dd> + <dt><a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics">Cross-browser audio basics</a></dt> + <dd> + <div> + <p>This article provides a basic guide to creating an HTML5 audio player that works cross browser, with all the associated attributes, properties and events explained, and a quick guide to custom controls created using the Media API.</p> + </div> + </dd> + <dt><a href="/en-US/Apps/Build/Manipulating_media/buffering_seeking_time_ranges">Media buffering, seeking, and time ranges</a></dt> + <dd>Sometimes it's useful to know how much {{ htmlelement("audio") }} or {{ htmlelement("video") }} has downloaded or is playable without delay — a good example of this is the buffered progress bar of an audio or video player. This article discusses how to build a buffer/seek bar using <a href="/en-US/docs/Web/API/TimeRanges">TimeRanges</a>, and other features of the media API.</dd> + <dt><a href="/en-US/Apps/Build/Manipulating_media/HTML5_playbackRate_explained">HTML5 playbackRate explained</a></dt> + <dd>The <code>playbackRate</code> property allows us to change the speed or rate at which a piece of web audio or video is playing. This article explains it in detail.</dd> + <dt><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></dt> + <dd>Explains the basics of using the Web Audio API to grab, manipulate and play back an audio source.</dd> +</dl> + +<h2 id="Tutoriels_Streaming_de_médias">Tutoriels Streaming de médias</h2> + +<dl> + <dt><a href="/en-US/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video">Live streaming web audio and video</a></dt> + <dd>Live streaming technology is often employed to relay live events such as sports, concerts and more generally TV and Radio programmes that are output live. Often shortened to just streaming, live streaming is the process of transmitting media 'live' to computers and devices. This is a fairly complex and nascent subject with a lot of variables, so in this article we'll introduce you to the subject and let you know how you can get started.</dd> + <dt><a href="/en-US/Apps/Build/Manipulating_media/Setting_up_adaptive_streaming_media_sources">Setting up adaptive streaming media sources</a></dt> + <dd>Let's say you want to set up an adaptive streaming media source on a server, to be consumed inside an HTML5 media element. How would you do that? This article explains how, looking at two of the most common formats: MPEG-DASH and HLS (HTTP Live Streaming.)</dd> + <dt><a href="/en-US/docs/Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video">DASH Adaptive Streaming for HTML 5 Video</a></dt> + <dd>Details how to set up adaptive streaming using DASH and WebM.</dd> +</dl> + +<h2 id="Tutoriels_Advancés">Tutoriels Advancés</h2> + +<dl> + <dt><a href="/en-US/Apps/Build/Manipulating_media/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a></dt> + <dd>This article explains how to add captions and subtitles to HTML5 {{ htmlelement("video") }}, using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Video_Text_Tracks_Format" title="WebVTT is a format for displaying timed text tracks (e.g. subtitles) with the <track> element. The primary purpose of WebVTT files is to add subtitles to a <video>.">Web_Video_Text_Tracks_Format</a> and the {{ htmlelement("track") }} element.</dd> + <dt><a href="/en-US/docs/Web/Apps/Developing/Manipulating_media/Web_Audio_API_cross_browser" title="/en-US/docs/Web/Apps/Developing/Manipulating_media/Web_Audio_API_cross_browser">Writing Web Audio API code that works in every browser</a></dt> + <dd>A guide to writing cross browser Web Audio API code.</dd> + <dt><a href="/en-US/Apps/Developing/Manipulating_media/H.264_support_in_Firefox">H.264 support in Firefox</a></dt> + <dd>This article explains the state of support for the H.264 video format in Firefox/Firefox OS, including code examples, tips and tricks.</dd> + <dt><a href="https://hacks.mozilla.org/2014/06/easy-audio-capture-with-the-mediarecorder-api/">Easy audio capture with the MediaRecorder API</a></dt> + <dd>Explains the basics of using the MediaRecorder API to directly record a media stream.</dd> +</dl> + +<div class="note"> +<p><strong>Note</strong>: Les versions de Firefox OS 1.3 et plus supportent le protocole <a href="http://en.wikipedia.org/wiki/Real_Time_Streaming_Protocol" title="http://en.wikipedia.org/wiki/Real_Time_Streaming_Protocol">RTSP</a> pour diffuser des vidéos en streaming. Une solution de secours pour les anciennes versions serait d'utiliser <code><video></code> avec un format pris en charge par Gecko (comme WebM).</p> +</div> + +<h2 id="Réferences">Réferences</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Element/video">The video element</a></li> + <li><a href="/en-US/docs/Web/Guide/Events/Media_events">Media events API</a></li> + <li><a href="/en-US/docs/Web/API/HTMLVideoElement">HTMLVideoElement API</a></li> + <li><a href="/en-US/docs/Web/API/MediaSource">MediaSource API</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li> + <li><a href="/en-US/docs/Web/API/MediaRecorder_API">MediaRecorder API</a></li> + <li><a href="/en-US/docs/Web/API/Navigator.getUserMedia">getUserMedia</a></li> +</ul> + +<p> </p> diff --git a/files/fr/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.html b/files/fr/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.html new file mode 100644 index 0000000000..46c17d9604 --- /dev/null +++ b/files/fr/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.html @@ -0,0 +1,288 @@ +--- +title: Live streaming web Audio et Vidéo +slug: Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video +tags: + - Guide + - Streaming adaptatif +translation_of: Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video +--- +<div class="summary"> +<p><span class="seoSummary">La technologie de <em>live streaming</em> (diffusion en direct) est souvent utilisée pour relayer des événements en direct, tels que le sport, les concerts, ou de manière plus générale les programmes TV et radio en direct. Souvent raccourci au simple terme de <em>streaming</em>, le live streaming est le processus de transmissions d'un média <em>live</em> (c'est à dire dynamique et non statique) aux ordinateurs et aux périphériques. C'est un sujet assez complexe et nouveau avec beaucoup de variables à prendre en considération, dans cet article nous allons vous introduire le sujet et vous donner des clés pour démarrer.</span></p> +</div> + +<p>La première chose à avoir en tête quand on diffuse un live stream à un navigateur est le fait que, plutôt que de jouer un fichier fini, on relaie un fichier qui est créé à la volée et qui n'a pas de début ou de fin prédéterminé.</p> + +<h2 id="Principales_différences_entre_media_en_stream_et_statique">Principales différences entre media en stream et statique</h2> + +<p>Un média statique est un média stocké dans un fichier, comme un fichier mp3 ou webm. Ce fichier se trouve sur un serveur et peut être délivré — comme la plupart des types de fichier — au navigateur. Le navigateur peut commencer à jouer le média avant de l'avoir reçu en intégralité, c'est ce qu'on appelle un <em>téléchargement progressif</em>.</p> + +<p>Un média en <em>live stream</em> n'a pas de temps de début et de fin finis comme un fichier statique, c'est un flux de données que le serveur transmet au navigateur et qui est souvent adaptatif (explication ci-dessous). Habituellement, il est nécessaire d'utiliser des formats différents et des logiciles spéciaux côté serveur pour y parvenir.</p> + +<h2 id="Streaming_adaptatif">Streaming adaptatif</h2> + +<p>Une des principale priorité du live streaming est de garder le lecteur du client synchronisé avec le flux envoyé par le serveur: le streaming adaptatif est une technique qui le permet, qui s'adapte en cas de bande passante faible. Le taux de transfert des données est contrôlé, et, s'il semble être en retard, utilise un flux qui demande moins de bande passante (et donc de qualité inférieure).</p> + +<p>Pour que ce soit possible, on doit utiliser des formats qui facilitent cette opération. Les formats de live streaming autorisent généralement une diffusion adaptative en divisant le flux en série de petits segments, et en rendant ces segments disponibles à différents qualités et débits binaires.</p> + +<h2 id="Streaming_Audio_et_Vidéo_à_la_demande">Streaming Audio et Vidéo à la demande</h2> + +<p>La technologie de streaming n'est pas utilisée exclusivement pour les live streams. Elle peut également être utilisée à la place de la méthode traditionnelle de téléchargement progressif, pour diffuser des fichiers audio et vidéo à la demande. Il y a plusieurs avantages à ça:</p> + +<ul> + <li>La latence est généralement plus faible, les médias peuvent démarrer plus rapidement</li> + <li>Le streaming adaptatif donne une meilleure expérience utilisateur sur une variété d'appareils, y compris à faible débit</li> + <li>Le média est téléchargé juste à temps, ce qui utilise la bande passante plus efficacement</li> +</ul> + +<h2 id="Protocoles_de_Streaming">Protocoles de Streaming</h2> + +<p>Tandis que les médias statiques sont généralement servis avec HTTP, il existe plusieurs protocoles pour servir un stream adaptatif; voyons les différentes options.</p> + +<h3 id="HTTP">HTTP</h3> + +<p>Pour l'instant, HTTP est de loin le protocole le plus couramment utilisé pour transférer des médias à la demande ou en stream.</p> + +<h3 id="RTMP">RTMP</h3> + +<p>Real Time Messaging Protocol (RTMP) est un protocole propriétaire développée par Macromedia (maintenant Adobe) et supporté par le plugin Adobe Flash. RTMP est disponible en plusieurs variantes, notamment RTMPE (Encrypté), RTMPS (Securisé sur SSL/TLS) et RTMPT (encapsulé dans des requêtes HTTP).</p> + +<h3 id="RTSP">RTSP</h3> + +<p>Real Time Streaming Protocol (RTSP) contrôle les sessions média entre les entités et il est souvent utilisé en combinaison avec Real-time Transport Protocol (RTP) et Real-time Control Protocol (RTCP) pour délivrer des flux média. Utiliser RTP avec RTCP permet un streaming adaptatif. Il n'est pas encore suporté nativement par la plupart des navigateurs, mais <a href="http://www.mozilla.org/en-US/firefox/os/notes/1.3/">Firefox OS 1.3 supporte RTSP</a>.</p> + +<div class="note"><strong>Note</strong>: Certains fournisseurs implémentent des protocoles de transfert propriétaires, tel que RealNetworks et leur Real Data Transport (RDT).</div> + +<h3 id="RTSP_2.0">RTSP 2.0</h3> + +<p>RTSP 2.0 est actuellement en cours de développement, il n'est pas rétro-compatible avec RTSP 1.0.</p> + +<div class="warning"> +<p><strong>Important</strong>: Bien que les balises {{ htmlelement("audio") }} et {{ htmlelement("video") }} soient agnostiques de tout protocole, aucun navigateur ne supporte actuellement autre chose que HTTP sans nécessiter de plugin, bien que cela semble être parti pour changer. De plus, les protocoles autres que HTTP peuvent être bloqués par des pare-feu et des serveurs proxy.</p> +</div> + +<h2 id="Utiliser_des_protocoles_de_streaming">Utiliser des protocoles de streaming</h2> + +<p>Le procédé pour utiliser différents protocoles vous sera familier si vous avez l'habitude de travailler avec les média sur HTTP — il suffit de spécifier le protocole.</p> + +<p>Par exemple:</p> + +<pre class="brush: html"><video src="rtsp://myhost.com/mymedia.format"> + <!-- Fallback here --> +</video></pre> + +<h2 id="Extensions_de_Sources_Média_(MSE)">Extensions de Sources Média (MSE)</h2> + +<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html">Media Source Extensions</a> est un brouillon de travail de W3C qui prévoit d'étendre {{ domxref("HTMLMediaElement") }} pour permettre à JavaScript de générer des flux média pour la lecture. Permettre à JavaScript de générer des streams facilite toute une variété de cas d'utilisations comme le streaming adaptatif et le décalage temporel des live streams.<br> + <br> + Par exemple, <a href="http://msopentech.com/blog/2014/01/03/streaming_video_player/">vous pourriez implémenter MPEG-DASH en utilisant JavaScript tout en laissant le décodage à la charge de MSE</a>.</p> + +<div class="note"> +<p><strong>Note</strong>: Le décalage temporel est le processus de lire un live stream quelque temps après qu'il ait été diffusé.</p> +</div> + +<h2 id="Formats_de_fichiers_Vidéo_en_Streaming">Formats de fichiers Vidéo en Streaming</h2> + +<p>Quelques formats de vidéo en live streaming HTTP commençent à être pris en charge parmi les navigateurs.</p> + +<div class="note"> +<p><strong>Note</strong>: Vous pouvez trouver un guide pour encoder HLS et MPEG-DASH pour une utilisation sur le web sur <a href="/fr/Apps/Build/Manipulating_media/Setting_up_adaptive_streaming_media_sources">Configuration de sources multimédia en streaming adaptatif</a>.</p> +</div> + +<h3 id="MPEG-DASH">MPEG-DASH</h3> + +<p>DASH est l'acronyme de Dynamic Adaptive Streaming over HTTP, c'est un nouveau format dont le support a récemment été ajouté à Chrome, et Internet Explorer 11 sous Windows 8.1. Il est supporté via les Extensions de Sources Media, qui sont utilisées par les bibliothèques JavaScript comme <a href="https://github.com/Dash-Industry-Forum/dash.js/">DASH.js</a>.</p> + +<p>Cette approche permet de télécharger des segments de flux vidéo en utilisant XHR et en "ajoutant" le segment au flux en cours de lecture par l'élément {{ htmlelement("video") }}. Ainsi, par exemple, si l'on détecte que le réseau est lent, on peut demander des segments de moins bonne qualité (plus petits) en cours de route. Cette technologie permet également d'ajouter/insérer un segment publicitaire dans le flux.</p> + +<div class="note"> +<p><strong>Note</strong>: Vous pouvez également <a href="http://wiki.webmproject.org/adaptive-streaming/webm-dash-specification">utiliser WebM avec le système de streaming adaptatif MPEG DASH</a>.</p> +</div> + +<h3 id="HLS">HLS</h3> + +<p>HLS (HTTP Live Streaming) est un protocole inventé par Apple Inc et il est pris en charge par iOS, Safari et les dernières versions du navigateur Android / Chrome. HLS est également adaptatif.<br> + <br> + HLS peut également être décodé en utilisant JavaScript, ce qui signifie que l'on peut supporter les dernières versions de Firefox, Chrome et Internet Explorer 10+. Voir ce <a href="https://github.com/dailymotion/hls.js">lecteur JavaScript HTTP Live Streaming</a>.<br> + <br> + Au début de la session de streaming, une <a href="http://en.wikipedia.org/wiki/M3U8#Extended_M3U_directives">playlist M3U étendue (m3u8)</a> est téléchargée. Elle contient les metadonnées des différents sous-fux fournis.</p> + +<h3 id="Suport_de_formats_de_fichiers_en_Streaming">Suport de formats de fichiers en Streaming</h3> + +<table> + <thead> + <tr> + <th>Navigateur</th> + <th>DASH</th> + <th>HLS</th> + <th>Opus (Audio)</th> + </tr> + </thead> + <tbody> + <tr> + <td>Firefox 32</td> + <td>✓ [1]</td> + <td>✓ [2]</td> + <td>✓ 14+</td> + </tr> + <tr> + <td>Safari 6+</td> + <td> </td> + <td>✓</td> + <td> </td> + </tr> + <tr> + <td>Chrome 24+</td> + <td>✓ [1]</td> + <td>✓</td> + <td> </td> + </tr> + <tr> + <td>Opera 20+</td> + <td>✓ [1]</td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>Internet Explorer 10+</td> + <td>✓ 11</td> + <td>✓ [2]</td> + <td> </td> + </tr> + <tr> + <td>Firefox Mobile</td> + <td>✓</td> + <td>✓</td> + <td>✓</td> + </tr> + <tr> + <td>Safari iOS6+</td> + <td> </td> + <td>✓</td> + <td> </td> + </tr> + <tr> + <td>Chrome Mobile</td> + <td>✓</td> + <td>✓ [2]</td> + <td> </td> + </tr> + <tr> + <td>Opera Mobile</td> + <td>✓ [1]</td> + <td>✓</td> + <td> </td> + </tr> + <tr> + <td>Internet Explorer Mobile</td> + <td>✓ 11</td> + <td>✓ [2]</td> + <td> </td> + </tr> + <tr> + <td>Android</td> + <td>✓</td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> + +<p>[1] Via JavaScript et MSE</p> + +<p>[2] Via JavaScript et un Proxy CORS</p> + +<h3 id="Video_de_secours">Video de secours</h3> + +<p>Entre DASH et HLS, on peut couvrir une partie importante des navigateurs modernes mais il faut encore une solution de secours si on veut supporter le reste.<br> + <br> + Une approche populaire est d'utiliser Flash en solution de secours, qui prend en charge RTMP. Bien sûr, le problème est qu'il nous faut alors encoder dans trois formats de données différents.</p> + +<h2 id="Formats_de_fichiers_Audio_en_Streaming">Formats de fichiers Audio en Streaming</h2> + +<p>Il y a également quelques formats audio qui commençent à pris en charge par les navigateurs.</p> + +<h3 id="Opus">Opus</h3> + +<p>Opus est un format libre de droit et open source qui permet d'optimiser la qualité de différents débits binaires pour différents types audio. La musique et la parole peuvent être optimisées de différentes manières et Opus utilise les codecs SILK et CELT pour y parvenir.<br> + <br> + Actuellement, Opus est supporté par Firefox (bureau et mobile) ainsi que les dernières versions de Chrome bureau et Opera.</p> + +<div class="note"> +<p><strong>Note</strong>: <a href="http://tools.ietf.org/html/draft-ietf-rtcweb-audio-05">Opus est un format obligatoire</a> pour les implémentations navigateur de WebRTC.</p> +</div> + +<h3 id="MP3_AAC_Ogg_Vorbis">MP3, AAC, Ogg Vorbis</h3> + +<p>Les formats audio les plus courants peuvent être diffusés en stream en utilisant des technologies spécifiques côté serveur.</p> + +<div class="note"> +<p><strong>Note</strong>: Il est plus facile de diffuser de l'audio en stream en utilisant des formats qui n'ont pas été conçu pour car, contrairement aux vidéos, il n'y a pas de keyframes.</p> +</div> + +<h2 id="Technologies_de_Streaming_côté_serveur">Technologies de Streaming côté serveur</h2> + +<p>Pour diffuser de l'audio ou vidéo en live stream, vous devez exécuter un logiciel de streaming sur votre serveur ou utiliser un service tiers.</p> + +<h3 id="GStreamer">GStreamer</h3> + +<p><a href="http://gstreamer.freedesktop.org/">GStreamer</a> est un framework multimédia open source et multi-platforme qui permet de créer une variété de composants pour gérer les médias, y compris des composants de streaming. À travers son système de plugin, GStreamer fournit un support pour plus d'une centaine de codecs (dont MPEG-1, MPEG-2, MPEG-4, H.261, H.263, H.264, RealVideo, MP3, WMV, et FLV.)</p> + +<p>Des plugins GStreamer existent, tels que <a href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-plugin-soup.html">souphttpclientsink</a> et <a href="https://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good/html/gst-plugins-good-plugins-shout2send.html">shout2send</a>, pour diffuser en stream des médias sur HTTP. Vous pouvez également intégrer le framework Python Twisted ou utiliser quelque chose comme <a href="http://www.flumotion.net/features/">Flumotion</a> (logiciel de streaming open source).</p> + +<p>Pour le transfert RTMP, vous pouvez utiliser le <a href="https://github.com/arut/nginx-rtmp-module">module Nginx RTMP</a>.</p> + +<h3 id="SHOUTcast">SHOUTcast</h3> + +<p><a href="http://en.wikipedia.org/wiki/SHOUTcast">SHOUTcast</a> est une technologie propriétaire multi-plateforme pour diffuser des médias en streaming. Développé par Nullsoft, elle permet de diffuser du contenu audio au format MP3 ou AAC en broadcast. Pour utilisation sur le web, les streams SHOUTcast sont transmis sur HTTP.</p> + +<div class="note"> +<p><strong>Note</strong>: <a href="http://stackoverflow.com/questions/2743279/how-could-i-play-a-shoutcast-icecast-stream-using-html5">Les urls SHOUTcast peuvent nécessiter l'ajout d'un point-virgule à la fin</a>.</p> +</div> + +<h3 id="Icecast">Icecast</h3> + +<p>Le serveur <a href="http://www.icecast.org/">Icecast</a> est une technologie open source pour diffuser des média en streaming. Maintenu par <a href="http://www.xiph.org/">Xiph.org Foundation</a>, il diffuse les formats Ogg Vorbis/Theora ainsi que MP3 et AAC via le protocole SHOUTcast.</p> + +<div class="note"> +<p><strong>Note</strong>: SHOUTcast et Icecast font partie des technologies les plus répandues et les plus populaires, mais il existe de nombreux <a href="http://en.wikipedia.org/wiki/List_of_streaming_media_systems#Servers">autres systèmes de diffusion en streaming disponibles</a>.</p> +</div> + +<h3 id="Services_de_Streaming">Services de Streaming</h3> + +<p>Bien que vous ayez la possibilité d'installer des logiciels tels que GStreamer, SHOUTcast et Icecast, vous pouvez également trouver de nombreux <a href="http://en.wikipedia.org/wiki/Comparison_of_streaming_media_systems">services de streaming tiers</a> qui feront le travail pour vous.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul class="task-list"> + <li><a href="http://en.wikipedia.org/wiki/HTTP_Live_Streaming">HTTP Live Streaming</a></li> + <li><a href="http://www.jwplayer.com/html5/hls/">HLS Browser Support</a></li> + <li><a href="https://github.com/RReverser/mpegts">HTTP Live Streaming JavaScript player</a></li> + <li><a href="http://www.larryjordan.biz/app_bin/wordpress/archives/2369">The Basics of HTTP Live Streaming</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/DASH_Adaptive_Streaming_for_HTML_5_Video">DASH Adaptive Streaming for HTML 5 Video</a></li> + <li><a href="http://en.wikipedia.org/wiki/Dynamic_Adaptive_Streaming_over_HTTP">Dynamic Adaptive Streaming over HTTP (MPEG-DASH)</a></li> + <li><a href="http://dash-mse-test.appspot.com/media.html">MPEG-DASH Media Source Demo</a></li> + <li><a href="http://dashif.org/reference/players/javascript/1.0.0/index.html">DASH Reference Client</a></li> + <li><a href="http://en.wikipedia.org/wiki/Dynamic_Adaptive_Streaming_over_HTTP">Dynamic Streaming over HTTP</a></li> + <li><a href="http://www.streamingmediaglobal.com/Articles/Editorial/Featured-Articles/The-State-of-MPEG-DASH-Deployment-96144.aspx">The State of MPEG-DASH Deployment</a></li> + <li><a href="http://www.bbc.co.uk/rd/blog/2014/03/media-source-extensions">Look, no plugins: Live streaming to the browser using Media Source Extensions and MPEG-DASH</a></li> + <li><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html">Media Source Extensions (W3C)</a></li> + <li><a href="http://en.wikipedia.org/wiki/Icecast">Icecast</a></li> + <li><a href="http://en.wikipedia.org/wiki/Shoutcast">SHOUTcast</a></li> + <li><a href="http://en.wikipedia.org/wiki/GStreamer">GStreamer</a></li> + <li><a href="https://coaxion.net/blog/2013/10/streaming-gstreamer-pipelines-via-http/">Streaming GStreamer Pipelines Via HTTP</a></li> + <li><a href="http://www.svesoftware.com/passkeeper/cms/article/streaming-media-using-gstreamer-web/">Streaming media using gstreamer on the web</a></li> + <li><a href="http://nginx-rtmp.blogspot.it/2013/07/gstreamer-and-raspberry-pi.html">GStreamer and Raspberry Pi</a></li> + <li><a href="http://msopentech.com/blog/2014/01/09/acceptance-media-source-extensions-w3c-candidate-recommendation-will-accelerate-adoption-dash-js/">Acceptance of Media Source Extensions as W3C Candidate Recommendation will accelerate adoption of dash.js</a></li> + <li><a href="http://en.wikipedia.org/wiki/Comparison_of_streaming_media_systems">Comparison of Streaming Media Systems</a></li> +</ul> + +<p><br> + </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> |