diff options
Diffstat (limited to 'files/fr')
| -rw-r--r-- | files/fr/web/guide/audio_and_video_delivery/index.html | 565 |
1 files changed, 301 insertions, 264 deletions
diff --git a/files/fr/web/guide/audio_and_video_delivery/index.html b/files/fr/web/guide/audio_and_video_delivery/index.html index c52fe4bc8b..ec4ed3f773 100644 --- a/files/fr/web/guide/audio_and_video_delivery/index.html +++ b/files/fr/web/guide/audio_and_video_delivery/index.html @@ -1,36 +1,29 @@ --- -title: Intégration Audio et Vidéo +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> +<p>On peut distribuer de l'audio et de la vidéo sur le web de plusieurs manières, du fichier média statique au <i lang="en">live stream</i> (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> -<h2 id="Les_éléments_Audio_et_Vidéo">Les éléments Audio et Vidéo</h2> +<h2 id="the_audio_and_video_elements">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> +<p>Que l'on traite des fichiers audio pré-enregistrés ou des flux en directs, le mécanisme pour les rendre disponibles à travers un navigateur reste à peu près le même — via les éléments <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a> et <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>. Actuellement, pour prendre en charge 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> + <li><a href="/fr/docs/Web/Apps/Build/Manipulating_media/Cross-browser_audio_basics#audio_codec_support">Tableau de compatibilité des codecs audio</a></li> + <li><a href="/fr/docs/Web/Media/Formats/Video_codecs">Guide sur les codecs pour les vidéos</a></li> </ul> -<p>Pour délivrer du contenu audio et vidéo, le procédé général est comme suit:</p> +<p>Pour distribuer du contenu audio et vidéo, le processus général se déroule 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>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 dans un autre format ;</li> + <li>Définir la façon dont vous voulez lire/instancier le média (par exemple un élément <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>, ou peut-être via JavaScript avec <code>document.createElement('video')</code>) ;</li> <li>Ajouter le fichier média au lecteur.</li> </ol> -<h3 id="Audio_HTML">Audio HTML</h3> +<h3 id="html_audio">Audio HTML</h3> <pre class="brush: html"><audio controls preload="auto"> <source src="audiofile.mp3" type="audio/mpeg"> @@ -39,18 +32,18 @@ translation_of: Web/Guide/Audio_and_video_delivery <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> + <a href="audiofile.mp3">Télécharger l'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> +<p>Le code ci-dessus va créer un lecteur audio qui tente de précharger autant d'audio que possible pour une lecture fluide.</p> <div class="note"> -<p><strong>Note</strong>: L'attribut <code>preload</code> peut être ignoré par certains navigateurs mobiles.</p> +<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> +<p>Pour plus d'informations voir <a href="/fr/docs/Web/Apps/Build/Manipulating_media/Cross-browser_audio_basics#html5_audio_in_detail">Les bases de l'audio multi-navigateur (Audio HTML5 en détails)</a></p> -<h3 id="Vidéo_HTML">Vidéo HTML</h3> +<h3 id="html_video">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"> @@ -63,39 +56,20 @@ translation_of: Web/Guide/Audio_and_video_delivery <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> + <a href="videofile.mp4">Télécharger la vidéo</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> +<p>Le code ci-dessus crée un lecteur vidéo de dimensions 640x480 pixels, affichant une vignette 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> + <p><strong>Note :</strong> l'attribut <code>autoplay</code> peut être ignoré par certains navigateurs mobiles et est sujet à controverse lorsqu'il est utilisé à mauvais escient. Il est recommandé de lire <a href="/fr/docs/Web/Media/Autoplay_guide">le guide à ce sujet</a> pour savoir comment l'utiliser pertinemment.</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> +<p>Pour plus d'informations voir <a href="/fr/docs/Web/HTML/Element/video">l'article de référence sur l'élément <code><video></code></a> et <a href="/fr/docs/Web/Apps/Build/Manipulating_media/cross_browser_video_player">la page sur la création d'un lecteur vidéo multi-navigateur</a>.</p> -<h3 id="Audio_JavaScript">Audio JavaScript</h3> +<h3 id="javascript_audio">Audio JavaScript</h3> -<pre class="brush: js">var myAudio = document.createElement('audio'); +<pre class="brush: js">const myAudio = document.createElement('audio'); if (myAudio.canPlayType('audio/mpeg')) { myAudio.setAttribute('src','audiofile.mp3'); @@ -106,21 +80,21 @@ if (myAudio.canPlayType('audio/mpeg')) { 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> +<p>On définit la source de l'audio en fonction du type de fichier audio pris en charge par le navigateur, puis nous plaçons 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> +<p><strong>Note :</strong> <code>play()</code> sera ignoré par certains navigateurs mobiles à moins que l'événement ne soit initié par une action de la personne visitant le site.</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> +<p>Il est également possible de donner un fichier WAV encodé en base64 à l'élément <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a>, 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> +<p><a href="https://github.com/kripken/speak.js/">Speak.js</a> emploie cette technique. <a href="https://speak-demo.herokuapp.com">Essayez la démo</a>.</p> -<h3 id="Vidéo_JavaScript">Vidéo JavaScript</h3> +<h3 id="javascript_video">Vidéo JavaScript</h3> -<pre class="brush: js">var myVideo = document.createElement('video'); +<pre class="brush: js">const myVideo = document.createElement('video'); if (myVideo.canPlayType('video/mp4')) { myVideo.setAttribute('src','videofile.mp4'); @@ -133,207 +107,150 @@ 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 - }); - }; +<h2 id="web_audio_api">API Web Audio</h2> - request.send(); +<pre class="brush: js">let context; +let request; +let source; - } catch(e) { - alert('web audio api not supported'); - }</pre> +try { + context = new AudioContext(); + request = new XMLHttpRequest(); + request.open("GET","https://jplayer.org/audio/mp3/RioMez-01-Sleep_together.mp3",true); + request.responseType = "arraybuffer"; -<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> + 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 était précédemment intitulé noteOn + }); + }; -<h2 id="getUserMedia_Stream_API">getUserMedia / Stream API</h2> + request.send(); -<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> +} catch(e) { + console.error(`L'API Web Audio n'est pas prise en charge`); +}</pre> -<p>Pour récupérer un flux de la webcam, commencez par créer un élément {{htmlelement("video")}}:</p> +<p>Dans cet exemple, on récupère un fichier MP3 via XHR, on le charge et on le lit (<a href="https://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> -<pre class="brush: html"><video id="webcam" width="480" height="360"></video></pre> +<h2 id="getusermedia_stream_api">getUserMedia / Stream API</h2> -<p>Ensuite, si cette opération est prise en charge, connectez la webcam à l'élément video:</p> +<p>Il est également possible de récupérer un <i lang="en">live stream</i> de la webcam et/ou du microphone de la personne consultant le site avec <code>getUserMedia</code> et l'API Stream. Cela fait partie d'une technologie plus largement connue sous le nom de WebRTC (Web Real-Time Communications) et est compatible avec les dernières versions de Chrome, Firefox et Opera.</p> -<pre class="brush: js">navigator.getUserMedia || - (navigator.getUserMedia = navigator.mozGetUserMedia || - navigator.webkitGetUserMedia || navigator.msGetUserMedia); +<p>Pour récupérer un flux de la webcam, commençons par créer un élément <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a> :</p> -window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL; +<pre class="brush: html"><video id="webcam" width="480" height="360"></video></pre> -if (navigator.getUserMedia) { - navigator.getUserMedia({ - video: true, - audio: false - }, onSuccess, onError); -} else { - alert('getUserMedia is not supported in this browser.'); -} +<p>Ensuite, si cette opération est prise en charge, nous connectons la webcam à l'élément video :</p> -function onSuccess(stream) { - var video = document.getElementById('webcam'); +<pre class="brush: js"> +if (navigator.mediaDevices) { + navigator.mediaDevices.getUserMedia({ video: true, audio: false }) + .then(function onSuccess(stream) { + const video = document.getElementById('webcam'); video.autoplay = true; - video.src = window.URL.createObjectURL(stream); + video.srcObject = stream; + }) + .catch(function onError() { + console.error(`Problème de récupération des flux : utilisez-vous une page avec file:/// ou avez-vous décliné la permission ?`); + }); +} else { + console.error(`getUserMedia n'est pas pris en charge par ce navigateur.`); } +</pre> -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> +<p>Pour en savoir plus, lisez la page <a href="/fr/docs/Web/API/MediaDevices/getUserMedia"><code>MediaDevices.getUserMedia</code></a>.</p> -<h2 id="Mediastream_Recording">Mediastream Recording</h2> +<h2 id="mediastream_recording">Enregistrement de flux média</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> +<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.</p> -<pre class="brush: js">var onSuccess = function(stream) { +<p>Le principe de base est décrit ci-après :</p> - var mediaRecorder = new MediaRecorder(stream); +<pre class="brush: js"> +navigator.mediaDevices.getUserMedia({audio:true}) + .then(function onSuccess(stream) { + const recorder = 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> + const data = []; + recorder.ondataavailable = function(e) { + data.push(e.data); + }; + recorder.start(); + recorder.onerror = function(e) { + throw e.error || new Error(e.name); // e.name est utilisé pour Firefox + } + recorder.onstop = function(e) { + const audio = document.createElement('audio'); + audio.src = window.URL.createObjectURL(new Blob(data)); + } + setTimeout(function() { + rec.stop(); + }, 5000); + }) + .catch(function onError(error) { + console.log(error.message); + }); +</pre> -<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> +<p>Voir <a href="/fr/docs/Web/API/MediaRecorder_API">l'API MediaRecorder</a> pour plus de détails.</p> -<h2 id="Extensions_de_Source_Media">Extensions de Source Media</h2> +<h2 id="media_source_extensions_mse">Media Source Extensions (MSE)</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> +<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html">Media Source Extensions</a> (MSE ou « extensions pour les sources de média ») est un brouillon de travail (<i lang="en">Working Draft</i> en anglais) du W3C qui prévoit d'étendre <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a> pour permettre à JavaScript de générer des flux média pour la lecture. Permettre à JavaScript de générer des flux facilite différents cas d'usage comme la diffusion en direct adaptative et le décalage temporel des flux de diffusion en direct.</p> -<h3 id="Extensions_Media_Encrypté_(EME)">Extensions Media Encrypté (EME)</h3> +<h3 id="encrypted_media_extensions_eme">Encrypted Media Extensions (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> +<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/encrypted-media/encrypted-media.html">Encrypted Media Extensions</a> (EME ou « extensions pour les médias chiffrés ») est une proposition du W3C d'étendre <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a> en fournissant des API pour contrôler la lecture de contenu protégé.</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> +<p>L'API prend en charge divers cas d'utilisation, allant du simple déchiffrement 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 prennent en charge différentes technologies de déchiffrement et de protection de contenu. Un des principaux usages d'EME est de permettre au navigateur d'implémenter la gestion des DRM (<a href="https://fr.wikipedia.org/wiki/Gestion_des_droits_num%C3%A9riques"><i lang="en">Digital Rights Management</i></a>).</p> -<h3 id="Streaming_adaptatif">Streaming adaptatif</h3> +<h3 id="adaptive_streaming">Diffusion adaptative</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>De nouveaux formats et protocoles ont été (et sont encore) deployés pour faciliter la diffusion adaptative. Une diffusion adaptative est un flux en direct qui s'adapte à la bande passante disponible de la personne utilisant le site. Typiquement, la qualité du stream peut changer en temps réel pour utiliser plus ou moins de bande passante. La diffusion adaptative est souvent utilisée en conjonction avec le <i lang="en">live streaming</i>, 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> +<p>Les principaux encodages utilisés pour le streaming adaptatif sont <a href="/fr/docs/Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video#hls">HLS</a> et <a href="/fr/docs/Web/Guide/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="https://en.wikipedia.org/wiki/M2ts">M2TS</a> (deux formats pris en charge par DASH, le dernier étant également pris en charge par HLS). DASH est probablement la meilleure option en termes de compatibilité, standard et flexibilité.</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> +<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>DASH fournit également un certain nombre de profils, y compris des profils <em>à la demande</em> simples, sans pré-traitement ni séparation 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.</p> -<p>Vous avez des problèmes de lecture audio ou vidéo? Essayez la checklist suivante.</p> +<p>Pour plus d'informations, voir <a href="/fr/docs/Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video">Live streaming web Audio et Vidéo</a>.</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> +<h2 id="customizing_your_media_player">Personnaliser votre lecteur média</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>Si vous avez besoin d'aller plus loin, 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 progression 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>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 la personne utilisant le lecteur média.</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> +<pre class="brush: html"> +<audio id="my-audio" src="https://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'); + const myAudio = document.getElementById('my-audio'); + const myControl = document.getElementById('my-control'); function switchState() { if (myAudio.paused == true) { myAudio.play(); - myControl.innerHTML = "pause"; + myControl.textContent = "pause"; } else { myAudio.pause(); - myControl.innerHTML = "play"; + myControl.textContent = "play"; } } @@ -350,99 +267,219 @@ AddType video/webm webmv</pre> 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> +<p>Vous pouvez <a href="https://jsbin.com/jujeladu/2/edit">essayer cet exemple ici</a>. Pour plus d'informations, voir <a href="/fr/docs/Web/Guide/Audio_and_video_delivery/Cross-browser_audio_basics#creating_your_own_custom_audio_player">Créer votre propre lecteur audio</a>.</p> + +<h2 id="other_tips_for_audiovideo">Autres conseils pour l'audio/video</h2> -<h2 id="Bibliothèques_JavaScript_AudioVidéo">Bibliothèques JavaScript Audio/Vidéo</h2> +<h3 id="stopping_the_download_of_media">Interrompre le téléchargement d'un média</h3> -<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> +<p>Bien qu'il suffit d'utiliser la méthode <code>pause()</code> pour interrompre la lecture d'un média, le navigateur continue de télécharger le média jusqu'à ce que l'élément correspondant soit nettoyé par le ramasse-miettes.</p> -<h3 id="Audio_uniquement">Audio uniquement</h3> +<p>Voici une astuce qui permet d'arrêter le téléchargement :</p> + +<pre class="brush: js">const mediaElement = document.querySelector("#monIDdeMedia"); +mediaElement.removeAttribute("src"); +mediaElement.load(); +</pre> + +<p>En supprimant l'attribut <code>src</code> de l'élément et en invoquant la méthode <code>load()</code>, on libère les ressources associées à la vidéo, ce qui entraîne l'arrêt du téléchargement. Il est nécessaire d'invoquer <code>load()</code> après le retrait de l'attribut, car sa simple suppression ne relance pas l'algorithme chargement. Si l'élément <code><video></code> dispose également d'éléments descendants <code><source></code>, ceux-ci devraient également être supprimés avant l'appel à <code>load()</code>.</p> + +<p>Si on définit l'attribut <code>src</code> avec une chaîne vide, le navigateur considèrera la source comme un chemin relatif et cela déclenchera une tentative d'un autre téléchargement à partir d'une source qui n'est probablement pas une vidéo valide.</p> + +<h3 id="seeking_through_media">Parcourir la piste du média</h3> + +<p>Les éléments média permettent de placer le curseur de lecture à des instants spécifiques du contenu. Pour cela, on ajustera la propriété <code>currentTime</code> de l'élément (voir <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a> pour plus de détails)</p> + +<p>La propriété <code>seekable</code> de l'élément peut être utilisée afin de déterminer les intervalles disponibles pour de tels déplacements. Cette propriété renvoie un objet <a href="/fr/docs/Web/API/TimeRanges"><code>TimeRanges</code></a> contenant les intervalles temporels accessibles.</p> + +<pre class="brush: js">const mediaElement = document.querySelector('#mediaElementID'); +mediaElement.seekable.start(0); // Renvoie l'instant de départ (en secondes) +mediaElement.seekable.end(0); // Renvoie l'instant de fin (en secondes) +mediaElement.currentTime = 122; // Déplace la lecture à 122 secondes +mediaElement.played.end(0); // Renvoie le nombre de secondes lues par le navigateur +</pre> + +<h3 id="specifying_playback_range">Définir des intervalles de lecture</h3> + +<p>Lors de la définition de l'URI du média d'un élément <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a> ou <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>, il est possible d'ajouter des informations supplémentaires pour indiquer la portion du média qu'on souhaite lire. Pour cela, on ajoutera un dièse/croisillon (« # ») suivi de la description du fragment de média.</p> + +<p>Un intervalle temporel se définit avec la syntaxe suivante :</p> + +<pre>#t=[tempsdebut][,tempsfin]</pre> + +<p>La valeur temporelle peut être définie en nombre de secondes (avec une valeur décimale) ou avec un horodatage en heures/minutes/secondes avec un deux-points comme séparateur (par exemple 2:05:01 pour indiquer 2 heures, 5 minutes et 1 seconde).</p> + +<p>Voici quelques exemples :</p> + +<dl> + <dt><code>https://example.com/video.ogv#t=10,20</code></dt> + <dd>Indique que la vidéo devrait jouer l'intervalle compris entre 10 et 20 secondes.</dd> + <dt><code>https://example.com/video.ogv#t=,10.5</code></dt> + <dd>Indique que la vidéo devrait jouer l'intervalle depuis le début et jusqu'à 10,5 secondes.</dd> + <dt><code>https://example.com/video.ogv#t=,02:00:00</code></dt> + <dd>Indique que la vidéo devrait jouer depuis le début et jusqu'à deux heures.</dd> + <dt><code>https://example.com/video.ogv#t=60</code></dt> + <dd>Indique que la vidéo devrait commencer sa lecture à 60 secondes puis continuer jusqu'à la fin.</dd> +</dl> + +<h2 id="error_handling">Déboguer les problèmes audio/vidéo</h2> + +<p>Vous rencontrez des problèmes de lecture audio ou vidéo ? Vérifiez les différents points qui suivent.</p> + +<h3 id="checking_whether_the_browser_supports_the_supplied_formats">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><a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager</a></li> + <li>Audio MP3 (<code>type="audio/mpeg"</code>) : <a href="https://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"> https://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3</a> (<a href="https://jsbin.com/gekatoge/1/edit">audio MP3 en direct</a>)</li> + <li>Audio MP4 (<code>type="audio/mp4"</code>) : <a href="https://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a"> https://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a</a> (<a href="https://jsbin.com/gekatoge/2/edit">audio MP4 en direct</a>)</li> + <li>Audio Ogg (<code>type="audio/ogg"</code>) : <a href="https://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg"> https://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg</a> (<a href="https://jsbin.com/gekatoge/4/edit">audio OGG en direct</a>)</li> + <li>Video MP4 (<code>type="video/mp4"</code>) : <a href="https://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"> https://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v</a> (<a href="https://jsbin.com/gekatoge/5/edit">vidéo MP4 en direct</a>)</li> + <li>Video WebM (<code>type="video/webm"</code>) : <a href="https://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm"> https://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm</a> (<a href="https://jsbin.com/gekatoge/6/edit">vidéo WebM en direct</a>)</li> + <li>Video Ogg (<code>type="video/ogg"</code>) : <a href="https://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv"> https://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv</a> (<a href="https://jsbin.com/gekatoge/7/edit">vidéo OGG en direct</a>)</li> </ul> -<h3 id="Vidéo_uniquement">Vidéo uniquement</h3> +<p>Si un de ces fichiers n'est pas lu, c'est que le navigateur que vous testez ne prend pas en charge le format correspondant. Vous pouvez utiliser un format différent ou un contenu de secours.</p> + +<p>Si ces fichiers fonctionnent mais que votre fichier ne fonctionne pas, il y a deux explications possibles, que nous verrons ci-après.</p> + +<h4 id="1._the_media_server_is_not_delivering_the_correct_mime_types_with_the_file">1. Le serveur ne fournit pas le type MIME correct du fichier</h4> + +<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> + +<h4 id="2._Your_files_have_been_encoded_incorrectly">2. Votre fichier n'est pas encodé correctement</h4> + +<p>Votre fichier n'a peut-être pas été encodé correctement — essayez de l'encoder en utilisant un des outils suivants, qui sont plutôt fiables :</p> + +<ul> + <li><a href="https://audacity.sourceforge.net/">Audacity</a> - Éditeur et enregistreur audio gratuit</li> + <li><a href="https://www.getmiro.com/">Miro</a> - Lecteur audio et vidéo open-source et gratuit</li> + <li><a href="https://handbrake.fr/">Handbrake</a> - Transcodeur vidéo open-source</li> + <li><a href="https://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="https://m.vid.ly/">Vid.ly</a> - Lecteur Video player, transcodeur et outil de diffusion</li> + <li><a href="https://archive.org/">Internet Archive</a> - Transcodage et stockage gratuit</li> +</ul> + +<h3 id="showing_fallback_content_when_no_source_could_be_decoded">Utiliser du contenu de substitution si la source n'a pu être décodée</h3> + +<p>Il existe une autre méthode pour présenter du contenu alternatif lorsqu'aucune des ressources n'a pu être décodée par le navigateur. Celle-ci consiste à ajouter un gestionnaire d'erreur sur le dernier élément source et d'utiliser celui-ci afin de remplacer l'élément par son contenu alternatif :</p> + +<pre class="brush: html"><video controls> + <source src="dynamicsearch.mp4" type="video/mp4"></source> + <a href="dynamicsearch.mp4"> + <img src="dynamicsearch.jpg" alt="Recherche sur une application"> + </a> + <p>Cliquez sur l'image pour voir une vidéo de démonstration</p> +</video> +</pre> + +<pre class="brush: js"> +let v = document.querySelector('video'), + sources = v.querySelectorAll('source'), + lastsource = sources[sources.length-1]; +lastsource.addEventListener('error', function(ev) { + const d = document.createElement('div'); + d.innerHTML = v.innerHTML; + v.parentNode.replaceChild(d, v); +}, false); +</pre> + +<h2 id="audiovideo_javascript_libraries">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 <a href="/fr/docs/Web/HTML/Element/track"><code><track></code></a> pour les sous-titres peuvent également être fournies par les bibliothèques média.</p> + +<h3 id="audio_only">Audio uniquement</h3> + +<ul> + <li><a href="https://www.schillmania.com/projects/soundmanager2/">SoundManager</a></li> + <li><a href="https://521dimensions.com/open-source/amplitudejs">AmplitudeJS</a></li> + <li><a href="https://howlerjs.com/">HowlerJS</a></li> +</ul> + +<h3 id="video_only">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> + <li><a href="https://flowplayer.org/">flowplayer</a> : Gratuit, avec un filigrane du logo flowplayer. open source (licence GPL)</li> + <li><a href="https://www.jwplayer.com">JWPlayer</a> : Nécessite de s'inscrire pour télécharger. open source (licence Creative Commons)</li> + <li><a href="https://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="https://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> +<h3 id="audio_and_video">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> + <li><a href="https://jPlayer.org">jPlayer</a> : Gratuit et open source (Licence MIT)</li> + <li><a href="https://mediaelementjs.com/">mediaelement.js</a> : Gratuit et open source (Licence MIT)</li> </ul> -<h3 id="Web_Audio_API">Web Audio API</h3> +<h3 id="web_audio_api_2">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> + <li><a href="https://github.com/cwilso/AudioContext-MonkeyPatch">AudioContext monkeypatch</a> : Une prothèse open source (licence Apache 2) pour les anciennes versions de l'API Web Audio</li> </ul> -<h2 id="Tutoriels_Basiques">Tutoriels Basiques</h2> +<h2 id="basic_tutorials">Tutoriels pour apprendre les bases</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> + <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/cross_browser_video_player">Créer un lecteur vidéo fonctionnant sur tous les navigateurs (en anglais)</a></dt> + <dd>Guide pour créer un lecteur vidéo simple et fonctionnant sur tous les navigateurs en utilisant l'élément <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a></dd> + <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/Video_player_styling_basics">Bases concernant la mise en forme des lecteurs vidéo (en anglais)</a></dt> + <dd>À l'aide du lecteur vidéo mis en place sur l'article précédent, cet article montre comment fournir une mise en forme basique et responsive (en anglais)</dd> + <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/Cross-browser_audio_basics">Les bases pour créer un lecteur audio fonctionnant sur tous les navigateurs (en anglais)</a></dt> + <dd>Cet article propose un guide de base pour créer un lecteur audio HTML5 qui fonctionne sur tous les navigateurs, avec une explication pour tous les attributs, propriétés et évènements associés, ainsi qu'un guide introduisant rapidement les contrôles personnalisés créés avec l'API Media (en anglais)</dd> + <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/buffering_seeking_time_ranges">Mise en tampon des fichiers médias, recherche et gestion des intervales de temps</a></dt> + <dd>Parfois, il est utile de savoir le temps de téléchargment et de lecture des éléments <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a> ou <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a> sans attendre — un bon exemple d'application est la barre de progression mise en mémoire tampon d'un fichier audio ou vidéo. Cet article présente la construction d'une barre de recherche et mise en mémoire tampon en utilisant l'API <a href="/fr/docs/Web/API/TimeRanges">TimeRanges</a> ainsi que d'autres fonctionnalités de l'API <code>Media</code>.</dd> + <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/HTML5_playbackRate_explained">Explications concernant la propriété <code>playbackRate</code> proposée par HTML5</a></dt> + <dd>La propriété <code>playbackRate</code> permet de modifier la vitesse ou la fréquence à laquelle un morceau de fichier audio ou vidéo est joué. Cet article l'explique en détails.</dd> + <dt><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utilisation de l'API Web Audio</a></dt> + <dd>Explique les bases de l'API Web Audio, afin de pouvoir atteindre, manipuler et jouer une ressource audio.</dd> </dl> -<h2 id="Tutoriels_Streaming_de_médias">Tutoriels Streaming de médias</h2> +<h2 id="streaming_media_tutorials">Tutoriels concernant la diffusion en direct (streaming)</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> + <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video">Diffusion en direct de fichiers audio et vidéo sur le web</a></dt> + <dd>Les technologies de diffusion en direct sont souvent employées pour diffuser en direct des évènements sportifs, des concerts et plus généralement des programmes télévisuels ou radiophoniques qui se déroulent en direct. Le terme est souvent raccourci en parlant de « direct » ou en anglais de <i lang="en">streaming</i> ou de <i lang="en">live</i>. Il s'agit du processus de transmission en direct d'une source média. Cela est plutôt complexe et sujet à de nombreux paramètres. Cet article fait une présentation générale du sujet et indique comment débuter.</dd> + <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/Setting_up_adaptive_streaming_media_sources">Mettre en place une ressource média diffusée en direct adaptative</a></dt> + <dd>Si vous avez besoin de mettre en place une ressource média diffusée en direct et adaptative sur un serveur, et que cette ressource doit être consommée au sein d'un élément média HTML5, cet article explique comment faire. Il détaille les deux principaux formats, MPEG-DASH et HLS (<i lang="en">HTTP Live Streaming</i>)</dd> + <dt><a href="/fr/docs/Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video">Diffusion en direct et adaptative DASH pour les vidéos HTML5</a></dt> + <dd>Informations concernant la mise en place d'une diffusion en direct adaptative avec les formats DASH et WebM.</dd> </dl> -<h2 id="Tutoriels_Advancés">Tutoriels Advancés</h2> +<h2 id="advanced_tutorials">Tutoriels avancé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> + <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/Adding_captions_and_subtitles_to_HTML5_video">Ajout de légendes et de sous-titres aux vidéos HTML5</a></dt> + <dd>Cet article explique comment ajouter des légendes et des sous-titres à l'élément HTML5 <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>, en utilisant le format <a href="/fr/docs/Web/API/WebVTT_API">VTT (<i lang="en">Video Text Tracks</i>)</a> et l'élément <a href="/fr/docs/Web/HTML/Element/track"><code><track></code></a>.</dd> + <dt><a href="/fr/docs/Web/Apps/Developing/Manipulating_media/Web_Audio_API_cross_browser">Utiliser l'API Audio de façon compatible</a></dt> + <dd>Un guide pour utiliser l'API Audio de façon compatible sur tous les navigateurs.</dd> + <dt><a href="https://hacks.mozilla.org/2014/06/easy-audio-capture-with-the-mediarecorder-api/">Capture audio simplifiée avec l'API MediaRecorder</a></dt> + <dd>Cet article montre les bases de l'utilisation de l'API MediaRecorder, utilisée afin d'enregistrer un flux média.</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">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> +<h2 id="references">Références</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> + <li><a href="/fr/docs/Web/HTML/Element/video">L'élément <code><video></code></a></li> + <li><a href="/fr/docs/Web/API/HTMLVideoElement">L'API <code>HTMLVideoElement</code></a></li> + <li><a href="/fr/docs/Web/API/MediaSource">L'API <code>MediaSource</code></a></li> + <li><a href="/fr/docs/Web/API/Web_Audio_API">L'API Web Audio</a></li> + <li><a href="/fr/docs/Web/API/MediaStream_Recording_API">L'API <code>MediaRecorder</code></a></li> + <li><a href="/fr/docs/Web/API/MediaDevices/getUserMedia"><code>getUserMedia()</code></a></li> + <li><a href="/fr/docs/Web/Events#media">Référence des évènements relatifs aux médias</a></li> </ul> - -<p> </p> |