diff options
Diffstat (limited to 'files/fr/learn/accessibility/multimedia/index.html')
| -rw-r--r-- | files/fr/learn/accessibility/multimedia/index.html | 227 |
1 files changed, 109 insertions, 118 deletions
diff --git a/files/fr/learn/accessibility/multimedia/index.html b/files/fr/learn/accessibility/multimedia/index.html index d16e2a3bc0..e957ae2002 100644 --- a/files/fr/learn/accessibility/multimedia/index.html +++ b/files/fr/learn/accessibility/multimedia/index.html @@ -18,55 +18,51 @@ original_slug: Apprendre/a11y/Multimedia <div>{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}</div> -<p class="summary"><span class="tlid-translation translation"><span title="">Le multimédia est une autre catégorie de contenu susceptible de créer des problèmes d'accessibilité: les contenus vidéo, audio et images doivent disposer de solutions de remplacement textuelles appropriées pour être compris par les technologies d'assistance et leurs utilisateurs.</span> <span title="">Cet article montre comment.</span></span></p> +<p>Le multimédia est une autre catégorie de contenu susceptible de créer des problèmes d'accessibilité: les contenus vidéo, audio et images doivent disposer de solutions de remplacement textuelles appropriées pour être compris par les technologies d'assistance et leurs utilisateurs. Cet article montre comment.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> - <th scope="row"><span class="tlid-translation translation"><span title="">Conditions</span></span> requise:</th> - <td><span class="tlid-translation translation"><span title="">Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension de</span></span> <a href="/fr/docs/Apprendre/a11y/What_is_accessibility"> Qu'est ce que l'accessibilité?</a></td> + <th scope="row">Conditions requise:</th> + <td>Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension de <a href="/fr/docs/Apprendre/a11y/What_is_accessibility"> Qu'est ce que l'accessibilité?</a></td> </tr> <tr> <th scope="row">Objectif:</th> - <td><span class="tlid-translation translation"><span title="">Comprendre les problèmes d'accessibilité derrière le multimédia et comment les résoudre</span></span> .</td> + <td>Comprendre les problèmes d'accessibilité derrière le multimédia et comment les résoudre .</td> </tr> </tbody> </table> -<h2 id="Multimédia_et_accessibilité"><span class="tlid-translation translation"><span title="">Multimédia et accessibilité</span></span></h2> +<h2 id="Multimédia_et_accessibilité">Multimédia et accessibilité</h2> -<p><span class="tlid-translation translation"><span title="">Jusqu'ici, dans ce module, nous avons examiné une variété de contenus et ce qui doit être fait pour en assurer l'accessibilité, du simple contenu textuel aux tableaux de données, en passant par les images, les contrôles natifs tels que les éléments de formulaire et les boutons, et des structures de balisage encore plus complexes.</span> <span title="">(avec</span></span> <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> l'attribut).</p> +<p>Jusqu'ici, dans ce module, nous avons examiné une variété de contenus et ce qui doit être fait pour en assurer l'accessibilité, du simple contenu textuel aux tableaux de données, en passant par les images, les contrôles natifs tels que les éléments de formulaire et les boutons, et des structures de balisage encore plus complexes. (avec <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> l'attribut).</p> -<p><span class="tlid-translation translation"><span title="">Cet article, par contre, examine une autre catégorie générale de contenu pour laquelle il est difficile d’assurer l’accessibilité au multimédia.</span> <span title="">Les images, les vidéos, les éléments {{htmlelement ("canvas")}} les animations Flash, etc. ne sont pas aussi faciles à comprendre par les lecteurs d'écran ou à naviguer au clavier, et nous devons leur donner un coup de main.</span></span></p> +<p>Cet article, par contre, examine une autre catégorie générale de contenu pour laquelle il est difficile d’assurer l’accessibilité au multimédia. Les images, les vidéos, les éléments {{htmlelement ("canvas")}} les animations Flash, etc. ne sont pas aussi faciles à comprendre par les lecteurs d'écran ou à naviguer au clavier, et nous devons leur donner un coup de main.</p> -<p><span class="tlid-translation translation"><span title="">Mais ne désespérez pas - nous vous aiderons ici à naviguer parmi les techniques disponibles pour rendre le multimédia plus accessible.</span></span></p> +<p>Mais ne désespérez pas - nous vous aiderons ici à naviguer parmi les techniques disponibles pour rendre le multimédia plus accessible.</p> <h2 id="Simple_images">Simple images</h2> -<p><span class="tlid-translation translation"><span title="">Nous avons déjà couvert des alternatives textuelles simples pour les images HTML dans notre article</span></span> <a href="/fr/docs/Apprendre/a11y/HTML"> HTML : une bonne base pour l'accessibilité</a> — <span class="tlid-translation translation"><span title=""> vous pouvez vous y référer pour plus de détails.</span> <span title="">En bref, vous devez vous assurer que, dans la mesure du possible, le contenu visuel dispose d’un texte alternatif que les lecteurs d’écran peuvent lire et lire à leurs utilisateurs.</span></span></p> +<p>Nous avons déjà couvert des alternatives textuelles simples pour les images HTML dans notre article <a href="/fr/docs/Apprendre/a11y/HTML"> HTML : une bonne base pour l'accessibilité</a> — vous pouvez vous y référer pour plus de détails. En bref, vous devez vous assurer que, dans la mesure du possible, le contenu visuel dispose d’un texte alternatif que les lecteurs d’écran peuvent lire et lire à leurs utilisateurs.</p> -<p> </p> - -<div class="text-wrap tlid-copy-target"> -<div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation"><span title="">Par exemple</span></span>:</div> -</div> +<p>Par exemple:</p> <pre class="brush: html"><img src="dinosaur.png" - alt=" <span class="tlid-translation translation"><span title="">Un Tyrannosaure Rex rouge: Un dinosaure a deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tete avec beaucoup de dents acerees</span></span> ."> + alt=" Un Tyrannosaure Rex rouge: Un dinosaure a deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tete avec beaucoup de dents acerees ."> </pre> -<h2 id="Commandes_audio_et_vidéo_accessibles"><span class="tlid-translation translation"><span title="">Commandes audio et vidéo accessibles</span></span></h2> +<h2 id="Commandes_audio_et_vidéo_accessibles">Commandes audio et vidéo accessibles</h2> -<p><span class="tlid-translation translation"><span title="">La mise en œuvre de contrôles audio / vidéo sur le Web ne devrait pas poser de problème, n'est-ce pas?</span> <span title="">Enquêtons</span></span> .</p> +<p>La mise en œuvre de contrôles audio / vidéo sur le Web ne devrait pas poser de problème, n'est-ce pas? Enquêtons .</p> -<h3 id="Le_problème_avec_les_contrôles_HTML5_natifs"><span class="tlid-translation translation"><span title="">Le problème avec les contrôles HTML5 natifs</span></span></h3> +<h3 id="Le_problème_avec_les_contrôles_HTML5_natifs">Le problème avec les contrôles HTML5 natifs</h3> -<p><span class="tlid-translation translation"><span title="">Les instances audio et vidéo HTML5 sont même fournies avec un ensemble de commandes intégrées vous permettant de contrôler le contenu multimédia directement.</span> <span title="">Par exemple (voir</span></span> <code>native-controls.html</code> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/native-controls.html">code source</a> et <a href="https://mdn.github.io/learning-area/accessibility/multimedia/native-controls.html">en direct</a>):</p> +<p>Les instances audio et vidéo HTML5 sont même fournies avec un ensemble de commandes intégrées vous permettant de contrôler le contenu multimédia directement. Par exemple (voir <code>native-controls.html</code> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/native-controls.html">code source</a> et <a href="https://mdn.github.io/learning-area/accessibility/multimedia/native-controls.html">en direct</a>):</p> <pre class="brush: html"><audio controls> <source src="viper.mp3" type="audio/mp3"> <source src="viper.ogg" type="audio/ogg"> - <p> <span class="tlid-translation translation"><span title="">Votre navigateur ne supporte pas l\'audio HTML5.</span> <span title="">Voici un</span></span> <a href="viper.mp3"> <span class="tlid-translation translation"><span title="">lien vers l\'audio</span></span> </a> <span class="tlid-translation translation"><span title="">au lieu</span></span> .</p> + <p> Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="viper.mp3"> lien vers l\'audio </a> au lieu .</p> </audio> <br> @@ -74,43 +70,43 @@ original_slug: Apprendre/a11y/Multimedia <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> - <p><span class="tlid-translation translation"><span title="">Votre navigateur ne supporte pas l\'audio HTML5.</span> <span title="">Voici un</span></span> <a href="rabbit320.mp4"><span class="tlid-translation translation"><span title="">lien vers la</span></span> video</a> instead.</p> + <p>Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="rabbit320.mp4">lien vers la video</a> instead.</p> </video></pre> -<p><span class="tlid-translation translation"><span title="">L'attribut controls comporte des boutons de lecture / pause, une barre de recherche, etc. - les commandes de base que vous êtes en droit d'attendre d'un lecteur multimédia.</span> <span title="">Il semble que dans Firefox et Chrome</span></span> :</p> +<p>L'attribut controls comporte des boutons de lecture / pause, une barre de recherche, etc. - les commandes de base que vous êtes en droit d'attendre d'un lecteur multimédia. Il semble que dans Firefox et Chrome :</p> -<p><img alt="Screenshot of Video Controls in Firefox" src="https://mdn.mozillademos.org/files/14440/native-controls-firefox.png" style="display: block; height: 361px; margin: 0px auto; width: 400px;"></p> +<p><img alt="Screenshot of Video Controls in Firefox" src="native-controls-firefox.png"></p> -<p><img alt="Screenshot of Video Controls in Chrome" src="https://mdn.mozillademos.org/files/14438/native-controls-chrome.png" style="display: block; height: 344px; margin: 0px auto; width: 400px;"></p> +<p><img alt="Screenshot of Video Controls in Chrome" src="native-controls-chrome.png"></p> -<p><span class="tlid-translation translation"><span title="">Cependant, il y a des problèmes avec ces contrôles</span></span> :</p> +<p>Cependant, il y a des problèmes avec ces contrôles :</p> <ul> - <li><span class="tlid-translation translation"><span title="">Ils ne sont pas accessibles au clavier, dans aucun navigateur, sauf Opera.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Différents navigateurs donnent aux contrôles natifs un style et des fonctionnalités différents. Ils ne sont pas stylables, ce qui signifie qu'ils ne peuvent pas être facilement conçus pour suivre un guide de style du site.</span></span> .</li> + <li>Ils ne sont pas accessibles au clavier, dans aucun navigateur, sauf Opera.</li> + <li>Différents navigateurs donnent aux contrôles natifs un style et des fonctionnalités différents. Ils ne sont pas stylables, ce qui signifie qu'ils ne peuvent pas être facilement conçus pour suivre un guide de style du site. .</li> </ul> -<p><span class="tlid-translation translation"><span title="">Pour remédier à cela, nous pouvons créer nos propres contrôles personnalisés.</span> <span title="">Regardons comment.</span></span></p> +<p>Pour remédier à cela, nous pouvons créer nos propres contrôles personnalisés. Regardons comment.</p> -<h3 id="Création_de_contrôles_audio_et_vidéo_personnalisés"><span class="tlid-translation translation"><span title="">Création de contrôles audio et vidéo personnalisés</span></span></h3> +<h3 id="Création_de_contrôles_audio_et_vidéo_personnalisés">Création de contrôles audio et vidéo personnalisés</h3> -<p><span class="tlid-translation translation"><span title="">La vidéo et l'audio HTML5 partagent une API - HTML Media Element - qui vous permet de mapper des fonctionnalités personnalisées à des boutons et à d'autres commandes, que vous définissez vous-même.</span></span> .</p> +<p>La vidéo et l'audio HTML5 partagent une API - HTML Media Element - qui vous permet de mapper des fonctionnalités personnalisées à des boutons et à d'autres commandes, que vous définissez vous-même. .</p> -<p><span class="tlid-translation translation"><span title="">Prenons l'exemple vidéo ci-dessus et ajoutons-leur des contrôles personnalisés</span></span> .</p> +<p>Prenons l'exemple vidéo ci-dessus et ajoutons-leur des contrôles personnalisés .</p> <h4 id="Basic_setup">Basic setup</h4> -<p><span class="tlid-translation translation"><span title="">Tout d'abord, prenez une copie de notre</span></span> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls-start.html">custom-controls-start.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls.css">custom-controls.css</a>, <a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.mp4">rabbit320.mp4</a>, et <a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.webm">rabbit320.webm</a> <span class="tlid-translation translation"><span title="">fichiers et enregistrez-les dans un nouveau répertoire sur votre disque dur</span></span> .</p> +<p>Tout d'abord, prenez une copie de notre <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls-start.html">custom-controls-start.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls.css">custom-controls.css</a>, <a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.mp4">rabbit320.mp4</a>, et <a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.webm">rabbit320.webm</a> fichiers et enregistrez-les dans un nouveau répertoire sur votre disque dur .</p> -<p><span class="tlid-translation translation"><span title="">Créez un nouveau fichier appelé main.js et enregistrez-le dans le même répertoire</span></span> .</p> +<p>Créez un nouveau fichier appelé main.js et enregistrez-le dans le même répertoire .</p> -<p><span class="tlid-translation translation"><span title="">Tout d’abord, regardons le code HTML pour le lecteur vidéo, dans le code HTML:</span></span></p> +<p>Tout d’abord, regardons le code HTML pour le lecteur vidéo, dans le code HTML:</p> <pre class="brush: html"><section class="player"> <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> - <p><span class="tlid-translation translation"><span title="">Votre navigateur ne supporte pas l\'audio HTML5.</span> <span title="">Voici un</span></span> <a href="rabbit320.mp4"><span class="tlid-translation translation"><span title="">lien vers la</span></span> video</a> instead.</p> + <p>Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="rabbit320.mp4">lien vers la video</a> instead.</p> </video> <div class="controls"> @@ -124,9 +120,9 @@ original_slug: Apprendre/a11y/Multimedia <h4 id="JavaScript_basic_setup">JavaScript basic setup</h4> -<p><span class="tlid-translation translation"><span title="">Nous avons inséré quelques boutons de commande simples sous notre vidéo.</span> <span title="">Bien sûr, ces contrôles ne feront rien par défaut;</span> <span title="">pour ajouter des fonctionnalités, nous allons utiliser JavaScript</span></span> .</p> +<p>Nous avons inséré quelques boutons de commande simples sous notre vidéo. Bien sûr, ces contrôles ne feront rien par défaut; pour ajouter des fonctionnalités, nous allons utiliser JavaScript .</p> -<p><span class="tlid-translation translation"><span title="">Nous devrons d’abord stocker les références à chacun des contrôles - ajoutez ce qui suit en haut de votre fichier JavaScript:</span></span></p> +<p>Nous devrons d’abord stocker les références à chacun des contrôles - ajoutez ce qui suit en haut de votre fichier JavaScript:</p> <pre class="brush: js">var playPauseBtn = document.querySelector('.playpause'); var stopBtn = document.querySelector('.stop'); @@ -134,21 +130,21 @@ var rwdBtn = document.querySelector('.rwd'); var fwdBtn = document.querySelector('.fwd'); var timeLabel = document.querySelector('.time');</pre> -<p><span class="tlid-translation translation"><span title="">Ensuite, nous devons saisir une référence au lecteur vidéo / audio lui-même - ajoutez cette ligne sous les lignes précédentes:</span></span></p> +<p>Ensuite, nous devons saisir une référence au lecteur vidéo / audio lui-même - ajoutez cette ligne sous les lignes précédentes:</p> <pre class="brush: js">var player = document.querySelector('video');</pre> -<p><span class="tlid-translation translation"><span title="">Ceci contient une référence à un objet {{domxref ("HTMLMediaElement")}} qui possède plusieurs propriétés et méthodes utiles disponibles qui peuvent être utilisées pour connecter des fonctionnalités à nos boutons.</span></span></p> +<p>Ceci contient une référence à un objet {{domxref ("HTMLMediaElement")}} qui possède plusieurs propriétés et méthodes utiles disponibles qui peuvent être utilisées pour connecter des fonctionnalités à nos boutons.</p> -<p><span class="tlid-translation translation"><span title="">Avant de passer à la création de notre fonctionnalité de bouton, supprimons les contrôles natifs afin qu'ils ne gênent pas nos contrôles personnalisés.</span> <span title="">Ajoutez ce qui suit, encore une fois au bas de votre JavaScript:</span></span></p> +<p>Avant de passer à la création de notre fonctionnalité de bouton, supprimons les contrôles natifs afin qu'ils ne gênent pas nos contrôles personnalisés. Ajoutez ce qui suit, encore une fois au bas de votre JavaScript:</p> <pre class="brush: js">player.removeAttribute('controls');</pre> -<p><span class="tlid-translation translation"><span title="">Le fait de procéder ainsi plutôt que de ne pas inclure les attributs de contrôle en premier lieu présente l'avantage que si notre JavaScript échoue pour une raison quelconque, l'utilisateur dispose toujours de certains contrôles.</span></span></p> +<p>Le fait de procéder ainsi plutôt que de ne pas inclure les attributs de contrôle en premier lieu présente l'avantage que si notre JavaScript échoue pour une raison quelconque, l'utilisateur dispose toujours de certains contrôles.</p> -<h4 id="Câbler_nos_boutons"><span class="tlid-translation translation"><span title="">Câbler nos boutons</span></span></h4> +<h4 id="Câbler_nos_boutons">Câbler nos boutons</h4> -<p><span class="tlid-translation translation"><span title="">Commençons par configurer le bouton lecture / pause.</span> <span title="">Nous pouvons le faire basculer entre lecture et pause avec une simple fonction conditionnelle, comme ci-dessous.</span> <span title="">Ajoutez-le à votre code, en bas:</span></span></p> +<p>Commençons par configurer le bouton lecture / pause. Nous pouvons le faire basculer entre lecture et pause avec une simple fonction conditionnelle, comme ci-dessous. Ajoutez-le à votre code, en bas:</p> <pre class="brush: js">playPauseBtn.onclick = function() { if(player.paused) { @@ -160,7 +156,7 @@ var timeLabel = document.querySelector('.time');</pre> } };</pre> -<p><span class="tlid-translation translation"><span title="">Ensuite, ajoutez ce code en bas, qui contrôle le bouton d'arrêt:</span></span></p> +<p>Ensuite, ajoutez ce code en bas, qui contrôle le bouton d'arrêt:</p> <pre class="brush: js">stopBtn.onclick = function() { player.pause(); @@ -168,9 +164,9 @@ var timeLabel = document.querySelector('.time');</pre> playPauseBtn.textContent = 'Play'; };</pre> -<p><span class="tlid-translation translation"><span title="">Il n'y a pas de fonction</span></span> <code>stop()</code> <span class="tlid-translation translation"><span title="">disponible sur</span></span> {{domxref("HTMLMediaElement")}}s, <span class="tlid-translation translation"><span title="">nous le mettons donc en</span></span> <code>pause()</code> <span class="tlid-translation translation"><span title="">et, dans le même temps, définissons la valeur</span></span> <code>currentTime</code> sur 0.</p> +<p>Il n'y a pas de fonction <code>stop()</code> disponible sur {{domxref("HTMLMediaElement")}}s, nous le mettons donc en <code>pause()</code> et, dans le même temps, définissons la valeur <code>currentTime</code> sur 0.</p> -<p><span class="tlid-translation translation"><span title="">Ensuite, nos boutons de rembobinage et d’avance rapide - ajoutez les blocs suivants au bas de votre</span></span> code:</p> +<p>Ensuite, nos boutons de rembobinage et d’avance rapide - ajoutez les blocs suivants au bas de votre code:</p> <pre class="brush: js">rwdBtn.onclick = function() { player.currentTime -= 3; @@ -185,11 +181,11 @@ fwdBtn.onclick = function() { } };</pre> -<p><span class="tlid-translation translation"><span title="">Celles-ci sont très simples, il suffit d’ajouter ou de soustraire 3 secondes à </span></span> <code>currentTime</code> <span class="tlid-translation translation"><span title="">chaque fois qu’on clique dessus.</span> <span title="">Dans un vrai lecteur vidéo, vous voudrez probablement une barre de recherche plus élaborée, ou similaire.</span></span></p> +<p>Celles-ci sont très simples, il suffit d’ajouter ou de soustraire 3 secondes à <code>currentTime</code> chaque fois qu’on clique dessus. Dans un vrai lecteur vidéo, vous voudrez probablement une barre de recherche plus élaborée, ou similaire.</p> -<p><span class="tlid-translation translation"><span title="">Notez que nous vérifions également si la durée</span></span> <code>currentTime</code> <span class="tlid-translation translation"><span title="">est supérieure à la durée totale du support ou si le support n'est pas en cours de lecture lorsque le bouton Fwd est enfoncé.</span> <span title="">Si l'une ou l'autre de ces conditions est vraie, nous arrêtons simplement la vidéo pour éviter que l'interface utilisateur ne se détériore si elle tente d'effectuer une avance rapide lorsque la vidéo n'est pas en cours de lecture ou si la fin de la vidéo est terminée.</span></span> .</p> +<p>Notez que nous vérifions également si la durée <code>currentTime</code> est supérieure à la durée totale du support ou si le support n'est pas en cours de lecture lorsque le bouton Fwd est enfoncé. Si l'une ou l'autre de ces conditions est vraie, nous arrêtons simplement la vidéo pour éviter que l'interface utilisateur ne se détériore si elle tente d'effectuer une avance rapide lorsque la vidéo n'est pas en cours de lecture ou si la fin de la vidéo est terminée. .</p> -<p><span class="tlid-translation translation"><span title="">Enfin, ajoutez ce qui suit à la fin du code pour contrôler l’affichage du temps écoulé:</span></span></p> +<p>Enfin, ajoutez ce qui suit à la fin du code pour contrôler l’affichage du temps écoulé:</p> <pre class="brush: js">player.ontimeupdate = function() { var minutes = Math.floor(player.currentTime / 60); @@ -213,105 +209,105 @@ fwdBtn.onclick = function() { timeLabel.textContent = mediaTime; };</pre> -<p><span class="tlid-translation translation"><span title="">Chaque fois que l'heure est mise à jour (une fois par seconde), nous activons cette fonction.</span> <span title="">Il calcule le nombre de minutes et de secondes à partir de la valeur actuelle donnée en secondes, ajoute un 0 au début si la valeur de minute ou de seconde est inférieure à 10, puis crée la lecture d'affichage et l'ajoute à l'étiquette de temps.</span></span></p> +<p>Chaque fois que l'heure est mise à jour (une fois par seconde), nous activons cette fonction. Il calcule le nombre de minutes et de secondes à partir de la valeur actuelle donnée en secondes, ajoute un 0 au début si la valeur de minute ou de seconde est inférieure à 10, puis crée la lecture d'affichage et l'ajoute à l'étiquette de temps.</p> -<h4 id="Lectures_complémentaires"><span class="tlid-translation translation"><span title="">Lectures complémentaires</span></span></h4> +<h4 id="Lectures_complémentaires">Lectures complémentaires</h4> -<p><span class="tlid-translation translation"><span title="">Cela vous donne une idée de base sur la manière d’ajouter des fonctionnalités de lecteur personnalisées aux instances de lecteur vidéo / audio.</span> <span title="">Pour plus d'informations sur l'ajout de fonctionnalités plus complexes aux lecteurs vidéo / audio, y compris les solutions de secours Flash pour les navigateurs plus anciens, voir aussi:</span></span></p> +<p>Cela vous donne une idée de base sur la manière d’ajouter des fonctionnalités de lecteur personnalisées aux instances de lecteur vidéo / audio. Pour plus d'informations sur l'ajout de fonctionnalités plus complexes aux lecteurs vidéo / audio, y compris les solutions de secours Flash pour les navigateurs plus anciens, voir aussi:</p> <ul> - <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and video delivery</a></li> - <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player styling basics</a></li> - <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a></li> + <li><a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and video delivery</a></li> + <li><a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player styling basics</a></li> + <li><a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a></li> </ul> -<p><span class="tlid-translation translation"><span title="">Nous avons également créé un exemple avancé pour montrer comment créer un système orienté objet permettant de rechercher tous les lecteurs vidéo et audio de la page (quel que soit leur nombre) et d'y ajouter nos contrôles personnalisés.</span> <span title="">Voir</span></span> <a href="http://mdn.github.io/learning-area/accessibility/multimedia/custom-controls-OOJS/">custom-controls-oojs</a> ( <span class="tlid-translation translation"><span title="">également</span></span> <a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/custom-controls-OOJS">voir le code source</a>).</p> +<p>Nous avons également créé un exemple avancé pour montrer comment créer un système orienté objet permettant de rechercher tous les lecteurs vidéo et audio de la page (quel que soit leur nombre) et d'y ajouter nos contrôles personnalisés. Voir <a href="http://mdn.github.io/learning-area/accessibility/multimedia/custom-controls-OOJS/">custom-controls-oojs</a> ( également <a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/custom-controls-OOJS">voir le code source</a>).</p> -<h2 id="Transcriptions_audio"><span class="tlid-translation translation"><span title="">Transcriptions audio</span></span></h2> +<h2 id="Transcriptions_audio">Transcriptions audio</h2> -<p><span class="tlid-translation translation"><span title="">Pour permettre aux sourds d'accéder au contenu audio, vous devez créer des transcriptions de texte.</span> <span title="">Ceux-ci peuvent être soit inclus sur la même page que l'audio d'une manière ou d'une autre, soit inclus sur une page séparée et liés à.</span></span></p> +<p>Pour permettre aux sourds d'accéder au contenu audio, vous devez créer des transcriptions de texte. Ceux-ci peuvent être soit inclus sur la même page que l'audio d'une manière ou d'une autre, soit inclus sur une page séparée et liés à.</p> -<p><span class="tlid-translation translation"><span title="">En termes de création de la transcription, vos options sont les suivantes:</span></span></p> +<p>En termes de création de la transcription, vos options sont les suivantes:</p> <ul> - <li><span class="tlid-translation translation"><span title="">Services commerciaux - Vous pouvez payer un professionnel pour effectuer la transcription, voir par exemple des entreprises telles que</span></span> <a href="https://scribie.com/">Scribie</a>, <a href="https://castingwords.com/">Casting Words</a>, ou <a href="https://www.rev.com/">Rev</a>. <span class="tlid-translation translation"><span title="">Regardez autour de vous et demandez conseil pour vous assurer de trouver une entreprise fiable avec laquelle vous pourrez travailler efficacement.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Communauté / base / auto-transcription - Si vous faites partie d'une communauté ou d'une équipe active sur votre lieu de travail, vous pouvez leur demander de l'aide pour faire les traductions.</span> <span title="">Vous pouvez même essayer de les faire vous-même.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Services automatisés - Des services d'intelligence artificielle sont disponibles, tels que </span></span> <a href="https://trint.com">Trint</a>. <span class="tlid-translation translation"><span title="">Téléchargez un fichier vidéo / audio sur le site, qui le transcrivera automatiquement pour vous.</span> <span title="">Sur YouTube, vous pouvez choisir de générer des sous-titres / transcriptions automatisés.</span> <span title="">Selon la clarté de l'audio parlé, la qualité de la transcription résultante variera considérablement.</span></span> . </li> + <li>Services commerciaux - Vous pouvez payer un professionnel pour effectuer la transcription, voir par exemple des entreprises telles que <a href="https://scribie.com/">Scribie</a>, <a href="https://castingwords.com/">Casting Words</a>, ou <a href="https://www.rev.com/">Rev</a>. Regardez autour de vous et demandez conseil pour vous assurer de trouver une entreprise fiable avec laquelle vous pourrez travailler efficacement.</li> + <li>Communauté / base / auto-transcription - Si vous faites partie d'une communauté ou d'une équipe active sur votre lieu de travail, vous pouvez leur demander de l'aide pour faire les traductions. Vous pouvez même essayer de les faire vous-même.</li> + <li>Services automatisés - Des services d'intelligence artificielle sont disponibles, tels que <a href="https://trint.com">Trint</a>. Téléchargez un fichier vidéo / audio sur le site, qui le transcrivera automatiquement pour vous. Sur YouTube, vous pouvez choisir de générer des sous-titres / transcriptions automatisés. Selon la clarté de l'audio parlé, la qualité de la transcription résultante variera considérablement. . </li> </ul> -<p><span class="tlid-translation translation"><span title="">Comme dans la plupart des choses de la vie, vous avez tendance à avoir ce que vous payez.</span> <span title="">la précision et le temps requis pour produire la transcription varient selon les services.</span> <span title="">Si vous payez une transcription pour une entreprise digne de confiance ou un service d’AI, vous le ferez probablement rapidement et avec une qualité élevée.</span> <span title="">Si vous ne voulez pas payer pour cela, vous le ferez probablement avec une qualité inférieure et / ou lentement.</span></span></p> +<p>Comme dans la plupart des choses de la vie, vous avez tendance à avoir ce que vous payez. la précision et le temps requis pour produire la transcription varient selon les services. Si vous payez une transcription pour une entreprise digne de confiance ou un service d’AI, vous le ferez probablement rapidement et avec une qualité élevée. Si vous ne voulez pas payer pour cela, vous le ferez probablement avec une qualité inférieure et / ou lentement.</p> -<p><span class="tlid-translation translation"><span title="">Il n’est pas acceptable de publier une ressource audio mais de promettre de publier la transcription ultérieurement. De telles promesses ne sont souvent pas tenues, ce qui érodera la confiance entre vous et vos utilisateurs.</span> <span title="">Si le son que vous présentez ressemble à une réunion en face-à-face ou à une performance parlée en direct, il serait acceptable de prendre des notes pendant la performance, de les publier intégralement avec l'audio, puis de demander de l'aide pour les nettoyer par la suite.</span></span></p> +<p>Il n’est pas acceptable de publier une ressource audio mais de promettre de publier la transcription ultérieurement. De telles promesses ne sont souvent pas tenues, ce qui érodera la confiance entre vous et vos utilisateurs. Si le son que vous présentez ressemble à une réunion en face-à-face ou à une performance parlée en direct, il serait acceptable de prendre des notes pendant la performance, de les publier intégralement avec l'audio, puis de demander de l'aide pour les nettoyer par la suite.</p> -<h3 id="Exemples_de_transcription"><span class="tlid-translation translation"><span title="">Exemples de transcription</span></span></h3> +<h3 id="Exemples_de_transcription">Exemples de transcription</h3> -<p><span class="tlid-translation translation"><span title="">Si vous utilisez un service automatisé, vous devrez probablement utiliser l'interface utilisateur fournie par l'outil.</span> <span title="">Par exemple, jetez un coup d’œil à</span></span> <a href="https://www.youtube.com/watch?v=zFFBsj97Od8">Audio Transcription Sample 1</a> <em>et choisissez plus > Transcript</em>.</p> +<p>Si vous utilisez un service automatisé, vous devrez probablement utiliser l'interface utilisateur fournie par l'outil. Par exemple, jetez un coup d’œil à <a href="https://www.youtube.com/watch?v=zFFBsj97Od8">Audio Transcription Sample 1</a> <em>et choisissez plus > Transcript</em>.</p> -<p><span class="tlid-translation translation"><span title="">Si vous créez votre propre interface utilisateur pour présenter votre audio et la transcription associée, vous pouvez le faire comme bon vous semble, mais il serait peut-être judicieux de l'inclure dans un panneau pouvant être affiché / masqué;</span> <span title="">voir notre exemple</span></span> <a href="https://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/">transcription audio-ui</a> exemple (voir aussi le <a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/audio-transcript-ui">code source</a>).</p> +<p>Si vous créez votre propre interface utilisateur pour présenter votre audio et la transcription associée, vous pouvez le faire comme bon vous semble, mais il serait peut-être judicieux de l'inclure dans un panneau pouvant être affiché / masqué; voir notre exemple <a href="https://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/">transcription audio-ui</a> exemple (voir aussi le <a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/audio-transcript-ui">code source</a>).</p> -<h3 id="Descriptions_audio"><span class="tlid-translation translation"><span title="">Descriptions audio</span></span></h3> +<h3 id="Descriptions_audio">Descriptions audio</h3> -<p><span class="tlid-translation translation"><span title="">Dans les cas où des éléments visuels accompagnent votre son, vous devez fournir une description de l’audio pour décrire ce contenu supplémentaire.</span></span></p> +<p>Dans les cas où des éléments visuels accompagnent votre son, vous devez fournir une description de l’audio pour décrire ce contenu supplémentaire.</p> -<p><span class="tlid-translation translation"><span title="">Dans de nombreux cas, il s'agira simplement d'une vidéo. Dans ce cas, vous pouvez implémenter des légendes à l'aide des techniques décrites dans la section suivante de l'article.</span></span></p> +<p>Dans de nombreux cas, il s'agira simplement d'une vidéo. Dans ce cas, vous pouvez implémenter des légendes à l'aide des techniques décrites dans la section suivante de l'article.</p> -<p><span class="tlid-translation translation"><span title="">Cependant, il y a des cas extrêmes.</span> <span title="">Vous pouvez par exemple avoir un enregistrement audio d'une réunion qui fait référence à une ressource d'accompagnement telle qu'une feuille de calcul ou un graphique.</span> <span title="">Dans de tels cas, vous devez vous assurer que les ressources sont fournies avec la transcription audio +, et les lier spécifiquement aux endroits où elles sont mentionnées dans la transcription.</span> <span title="">Cela aidera évidemment tous les utilisateurs, pas seulement les sourds.</span></span></p> +<p>Cependant, il y a des cas extrêmes. Vous pouvez par exemple avoir un enregistrement audio d'une réunion qui fait référence à une ressource d'accompagnement telle qu'une feuille de calcul ou un graphique. Dans de tels cas, vous devez vous assurer que les ressources sont fournies avec la transcription audio +, et les lier spécifiquement aux endroits où elles sont mentionnées dans la transcription. Cela aidera évidemment tous les utilisateurs, pas seulement les sourds.</p> <div class="note"> -<p><strong>Note</strong>: <span class="tlid-translation translation"><span title="">Une transcription audio aidera en général plusieurs groupes d'utilisateurs.</span> <span title="">En plus de permettre aux utilisateurs sourds d'accéder aux informations contenues dans l'audio, pensez à un utilisateur disposant d'une connexion à faible bande passante et qui trouverait que le téléchargement de l'audio est gênant.</span> <span title="">Pensez également à un utilisateur dans un environnement bruyant, comme un pub ou un bar, qui tente d'accéder à l'information mais ne l'entend pas par dessus le bruit.</span></span></p> +<p><strong>Note :</strong> Une transcription audio aidera en général plusieurs groupes d'utilisateurs. En plus de permettre aux utilisateurs sourds d'accéder aux informations contenues dans l'audio, pensez à un utilisateur disposant d'une connexion à faible bande passante et qui trouverait que le téléchargement de l'audio est gênant. Pensez également à un utilisateur dans un environnement bruyant, comme un pub ou un bar, qui tente d'accéder à l'information mais ne l'entend pas par dessus le bruit.</p> </div> -<h2 id="Pistes_de_texte_vidéo"><span class="tlid-translation translation"><span title="">Pistes de texte vidéo</span></span></h2> +<h2 id="Pistes_de_texte_vidéo">Pistes de texte vidéo</h2> -<p><span class="tlid-translation translation"><span title="">Pour rendre la vidéo accessible aux sourds, aux aveugles ou même à d'autres groupes d'utilisateurs (par exemple, ceux dont la bande passante est faible ou qui ne comprennent pas la langue dans laquelle la vidéo est enregistrée), vous devez inclure des pistes de texte avec votre contenu vidéo.</span></span> .</p> +<p>Pour rendre la vidéo accessible aux sourds, aux aveugles ou même à d'autres groupes d'utilisateurs (par exemple, ceux dont la bande passante est faible ou qui ne comprennent pas la langue dans laquelle la vidéo est enregistrée), vous devez inclure des pistes de texte avec votre contenu vidéo. .</p> <div class="note"> -<p><strong>Note</strong>: <span class="tlid-translation translation"><span title="">Les pistes de texte sont également utiles pour n'importe quel utilisateur, pas seulement pour les personnes handicapées.</span> <span title="">Par exemple, certains utilisateurs peuvent ne pas être en mesure d’entendre le son car ils se trouvent dans des environnements bruyants (comme un bar bondé lorsqu’un match de sport est diffusé) ou peuvent ne pas déranger les autres s’ils sont dans un endroit calme (comme une bibliothèque).</span> <span title="">.)</span></span></p> +<p><strong>Note :</strong> Les pistes de texte sont également utiles pour n'importe quel utilisateur, pas seulement pour les personnes handicapées. Par exemple, certains utilisateurs peuvent ne pas être en mesure d’entendre le son car ils se trouvent dans des environnements bruyants (comme un bar bondé lorsqu’un match de sport est diffusé) ou peuvent ne pas déranger les autres s’ils sont dans un endroit calme (comme une bibliothèque). .)</p> </div> -<p><span class="tlid-translation translation"><span title="">Ce n'est pas un nouveau concept - les sous-titres codés sont disponibles depuis assez longtemps dans les services de télévision:</span></span></p> +<p>Ce n'est pas un nouveau concept - les sous-titres codés sont disponibles depuis assez longtemps dans les services de télévision:</p> -<p><img alt='Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"' src="https://mdn.mozillademos.org/files/14436/closed-captions.png" style="display: block; height: 240px; margin: 0px auto; width: 320px;"></p> +<p><img alt='Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"' src="closed-captions.png"></p> -<p><span class="tlid-translation translation"><span title="">Alors que de nombreux pays proposent des films en anglais avec sous-titres écrits dans leur propre langue maternelle, des sous-titres en différentes langues sont souvent disponibles sur DVD, par exemple</span></span></p> +<p>Alors que de nombreux pays proposent des films en anglais avec sous-titres écrits dans leur propre langue maternelle, des sous-titres en différentes langues sont souvent disponibles sur DVD, par exemple</p> -<p><img alt='An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"' src="https://mdn.mozillademos.org/files/14442/Subtitles_German.jpg" style="display: block; margin: 0 auto;"></p> +<p><img alt='An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"' src="Subtitles_German.jpg"></p> -<p><span class="tlid-translation translation"><span title="">Il existe différents types de pistes de texte avec des objectifs différents.</span> <span title="">Les principaux que vous rencontrerez sont:</span></span></p> +<p>Il existe différents types de pistes de texte avec des objectifs différents. Les principaux que vous rencontrerez sont:</p> <ul> - <li><span class="tlid-translation translation"><span title="">Sous-titres - pour le bénéfice des utilisateurs sourds qui ne peuvent pas entendre la piste audio, y compris les mots prononcés, et des informations contextuelles telles que le nom des personnes qui ont prononcé ces mots, si les personnes étaient en colère ou tristes et quelle ambiance la musique crée actuellement.</span> <span title="">.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Sous-titres - Inclut les traductions de la boîte de dialogue audio, pour les utilisateurs qui ne comprennent pas la langue parlée.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Descriptions - Celles-ci incluent des descriptions pour les personnes aveugles qui ne peuvent pas voir la vidéo, par exemple à quoi ressemble la scène.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Titres de chapitre - Marqueurs de chapitre destinés à aider l'utilisateur à naviguer dans la ressource multimédia.</span></span></li> + <li>Sous-titres - pour le bénéfice des utilisateurs sourds qui ne peuvent pas entendre la piste audio, y compris les mots prononcés, et des informations contextuelles telles que le nom des personnes qui ont prononcé ces mots, si les personnes étaient en colère ou tristes et quelle ambiance la musique crée actuellement. .</li> + <li>Sous-titres - Inclut les traductions de la boîte de dialogue audio, pour les utilisateurs qui ne comprennent pas la langue parlée.</li> + <li>Descriptions - Celles-ci incluent des descriptions pour les personnes aveugles qui ne peuvent pas voir la vidéo, par exemple à quoi ressemble la scène.</li> + <li>Titres de chapitre - Marqueurs de chapitre destinés à aider l'utilisateur à naviguer dans la ressource multimédia.</li> </ul> -<h3 id="Implémentation_de_pistes_de_texte_vidéo_HTML5"><span class="tlid-translation translation"><span title="">Implémentation de pistes de texte vidéo HTML5</span></span></h3> +<h3 id="Implémentation_de_pistes_de_texte_vidéo_HTML5">Implémentation de pistes de texte vidéo HTML5</h3> -<p><span class="tlid-translation translation"><span title="">Les pistes de texte à afficher avec une vidéo HTML5 doivent être écrites au format WebVTT, un format de texte contenant plusieurs chaînes de texte ainsi que des métadonnées, telles que l'heure à laquelle vous souhaitez afficher chaque chaîne de texte et même des informations de style / positionnement limitées.</span> <span title="">Ces chaînes de texte sont appelées cues</span></span> .</p> +<p>Les pistes de texte à afficher avec une vidéo HTML5 doivent être écrites au format WebVTT, un format de texte contenant plusieurs chaînes de texte ainsi que des métadonnées, telles que l'heure à laquelle vous souhaitez afficher chaque chaîne de texte et même des informations de style / positionnement limitées. Ces chaînes de texte sont appelées cues .</p> -<p><span class="tlid-translation translation"><span title="">Un fichier WebVTT typique ressemblera à ceci:</span></span></p> +<p>Un fichier WebVTT typique ressemblera à ceci:</p> <pre>WEBVTT 1 00:00:22.230 --> 00:00:24.606 - <span class="tlid-translation translation"><span title="">Ceci est le premier sous-titre.</span></span> + Ceci est le premier sous-titre. 2 00:00:30.739 --> 00:00:34.074 - <span class="tlid-translation translation"><span title="">C'est le deuxième</span></span> . + C'est le deuxième . ...</pre> -<p><span class="tlid-translation translation"><span title="">Pour que ceci soit affiché avec la lecture du média HTML, vous devez:</span></span></p> +<p>Pour que ceci soit affiché avec la lecture du média HTML, vous devez:</p> <ul> - <li><span class="tlid-translation translation"><span title="">Enregistrez-le en tant que fichier .vtt dans un endroit approprié.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Lien vers le fichier .vtt avec </span></span> <span class="tlid-translation translation"><span title="">l'élément</span></span> {{htmlelement("track")}} . <code><track></code> <span class="tlid-translation translation"><span title="">devrait être placé dans</span></span> <code><audio></code> ou <code><video></code>, <span class="tlid-translation translation"><span title="">mais après tout </span></span> <code><source></code> <span class="tlid-translation translation"><span title="">éléments</span></span> . <span class="tlid-translation translation"><span title="">Utilisez l’attribut {{htmlattrxref ("kind", "track")}} pour indiquer si les signaux sont des sous-titres, des légendes ou des descriptions.</span> <span title="">De plus, utilisez {{htmlattrxref ("srclang", "track")}} pour indiquer au navigateur la langue dans laquelle vous avez écrit les sous-titres.</span></span> .</li> + <li>Enregistrez-le en tant que fichier .vtt dans un endroit approprié.</li> + <li>Lien vers le fichier .vtt avec l'élément {{htmlelement("track")}} . <code><track></code> devrait être placé dans <code><audio></code> ou <code><video></code>, mais après tout <code><source></code> éléments . Utilisez l’attribut {{htmlattrxref ("kind", "track")}} pour indiquer si les signaux sont des sous-titres, des légendes ou des descriptions. De plus, utilisez {{htmlattrxref ("srclang", "track")}} pour indiquer au navigateur la langue dans laquelle vous avez écrit les sous-titres. .</li> </ul> -<p><span class="tlid-translation translation"><span title="">Voici un exemple:</span></span></p> +<p>Voici un exemple:</p> <pre class="brush: html"><video controls> <source src="example.mp4" type="video/mp4"> @@ -319,57 +315,52 @@ fwdBtn.onclick = function() { <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> </video></pre> -<p><span class="tlid-translation translation"><span title="">Cela donnera une vidéo avec des sous-titres affichés, un peu comme ceci:</span></span></p> +<p>Cela donnera une vidéo avec des sous-titres affichés, un peu comme ceci:</p> -<p><img alt='Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p> +<p><img alt='Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="video-player-with-captions.png"></p> -<p><span class="tlid-translation translation"><span title="">Pour plus de détails, veuillez lire</span></span> <a href="/fr/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Ajouter des légendes et des sous titres à des vidéos HTML 5</a>. <span class="tlid-translation translation"><span title="">Vous trouverez</span></span> <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">un exemple</a> <span class="tlid-translation translation"><span title="">qui accompagne cet article sur Github, écrit par Ian Devlin (voir aussi</span></span><span class="tlid-translation translation"><span title=""> le</span></span> <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">code source</a>.) <span class="tlid-translation translation"><span title="">Cet exemple utilise du JavaScript.</span> <span title="">pour permettre aux utilisateurs de choisir entre différents sous-titres. Notez que pour activer les sous-titres, vous devez appuyer sur le bouton "CC" et sélectionner une option - Anglais, Allemand ou Español.</span></span></p> +<p>Pour plus de détails, veuillez lire <a href="/fr/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Ajouter des légendes et des sous titres à des vidéos HTML 5</a>. Vous trouverez <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">un exemple</a> qui accompagne cet article sur Github, écrit par Ian Devlin (voir aussi le <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">code source</a>.) Cet exemple utilise du JavaScript. pour permettre aux utilisateurs de choisir entre différents sous-titres. Notez que pour activer les sous-titres, vous devez appuyer sur le bouton "CC" et sélectionner une option - Anglais, Allemand ou Español.</p> <div class="note"> -<p><strong>Note</strong>: <span class="tlid-translation translation"><span title="">Les pistes de texte et les transcriptions vous aident également avec {{glossary ("SEO")}}, car les moteurs de recherche se développent particulièrement bien avec le texte.</span> <span title="">Les pistes de texte permettent même aux moteurs de recherche de se lier directement à un endroit en cours de vidéo.</span></span></p> +<p><strong>Note :</strong> Les pistes de texte et les transcriptions vous aident également avec {{glossary ("SEO")}}, car les moteurs de recherche se développent particulièrement bien avec le texte. Les pistes de texte permettent même aux moteurs de recherche de se lier directement à un endroit en cours de vidéo.</p> </div> -<h2 id="Autre_contenu_multimédia"><span class="tlid-translation translation"><span title="">Autre contenu multimédia</span></span></h2> +<h2 id="Autre_contenu_multimédia">Autre contenu multimédia</h2> -<p><span class="tlid-translation translation"><span title="">Les sections ci-dessus ne couvrent pas tous les types de contenu multimédia que vous pourriez vouloir placer sur une page Web.</span> <span title="">Vous devrez peut-être également gérer des jeux, des animations, des diaporamas, des vidéos intégrées et du contenu créé à l'aide d'autres technologies disponibles, telles que:</span></span></p> +<p>Les sections ci-dessus ne couvrent pas tous les types de contenu multimédia que vous pourriez vouloir placer sur une page Web. Vous devrez peut-être également gérer des jeux, des animations, des diaporamas, des vidéos intégrées et du contenu créé à l'aide d'autres technologies disponibles, telles que:</p> <ul> - <li><a href="/en-US/docs/Web/API/Canvas_API">HTML5 canvas</a></li> + <li><a href="/fr/docs/Web/API/Canvas_API">HTML5 canvas</a></li> <li>Flash</li> <li>Silverlight</li> </ul> -<p><span class="tlid-translation translation"><span title="">Pour ce type de contenu, vous devez traiter les problèmes d’accessibilité au cas par cas.</span> <span title="">Dans certains cas, ce n'est pas si grave, par exemple:</span></span></p> +<p>Pour ce type de contenu, vous devez traiter les problèmes d’accessibilité au cas par cas. Dans certains cas, ce n'est pas si grave, par exemple:</p> <ul> - <li><span class="tlid-translation translation"><span title="">Si vous intégrez du contenu audio à l'aide d'une technologie de plug-in telle que Flash ou Silverlight, vous pouvez probablement simplement fournir une transcription audio de la même manière que celle décrite ci-dessus dans la section</span></span> {{anch("Transcript examples")}} .</li> - <li><span class="tlid-translation translation"><span title="">Si vous intégrez du contenu vidéo à l'aide d'une technologie de plug-in telle que Flash ou Silverlight, vous pouvez tirer parti des techniques de sous-titrage / sous-titrage disponibles pour ces technologies.</span> <span title="">Par exemple, voir</span></span> <a href="http://www.adobe.com/accessibility/products/flash/captions.html">Flash captions</a>, <a href="https://support.brightcove.com/en/video-cloud/docs/using-flash-only-player-api-closed-captioning">Using the Flash-Only Player API for Closed Captioning</a>, ou <a href="https://blogs.msdn.microsoft.com/anilkumargupta/2009/05/01/playing-subtitles-with-videos-in-silverlight/">Playing Subtitles with Videos in Silverlight</a>.</li> + <li>Si vous intégrez du contenu audio à l'aide d'une technologie de plug-in telle que Flash ou Silverlight, vous pouvez probablement simplement fournir une transcription audio de la même manière que celle décrite ci-dessus dans la section {{anch("Transcript examples")}} .</li> + <li>Si vous intégrez du contenu vidéo à l'aide d'une technologie de plug-in telle que Flash ou Silverlight, vous pouvez tirer parti des techniques de sous-titrage / sous-titrage disponibles pour ces technologies. Par exemple, voir <a href="http://www.adobe.com/accessibility/products/flash/captions.html">Flash captions</a>, <a href="https://support.brightcove.com/en/video-cloud/docs/using-flash-only-player-api-closed-captioning">Using the Flash-Only Player API for Closed Captioning</a>, ou <a href="https://blogs.msdn.microsoft.com/anilkumargupta/2009/05/01/playing-subtitles-with-videos-in-silverlight/">Playing Subtitles with Videos in Silverlight</a>.</li> </ul> -<p><span class="tlid-translation translation"><span title="">Cependant, il est difficile de rendre les autres multimédias accessibles.</span> <span title="">Si, par exemple, vous avez affaire à un jeu immersif en 3D ou à une application de réalité virtuelle, il est vraiment difficile de fournir des alternatives textuelles pour une telle expérience, et vous pouvez soutenir que les utilisateurs non-voyants ne sont pas vraiment dans le groupe-cible de telles applications.</span></span></p> +<p>Cependant, il est difficile de rendre les autres multimédias accessibles. Si, par exemple, vous avez affaire à un jeu immersif en 3D ou à une application de réalité virtuelle, il est vraiment difficile de fournir des alternatives textuelles pour une telle expérience, et vous pouvez soutenir que les utilisateurs non-voyants ne sont pas vraiment dans le groupe-cible de telles applications.</p> -<p><span class="tlid-translation translation"><span title="">Vous pouvez toutefois vous assurer qu'une telle application présente un contraste de couleur suffisant et une présentation claire de sorte qu'elle soit perceptible par les personnes ayant une vision basse / daltonisme, et qu'elle soit également accessible au clavier.</span> <span title="">Rappelez-vous que l'accessibilité consiste à faire tout ce que vous pouvez, plutôt que de chercher à atteindre une accessibilité à 100% tout le temps, ce qui est souvent impossible.</span></span></p> +<p>Vous pouvez toutefois vous assurer qu'une telle application présente un contraste de couleur suffisant et une présentation claire de sorte qu'elle soit perceptible par les personnes ayant une vision basse / daltonisme, et qu'elle soit également accessible au clavier. Rappelez-vous que l'accessibilité consiste à faire tout ce que vous pouvez, plutôt que de chercher à atteindre une accessibilité à 100% tout le temps, ce qui est souvent impossible.</p> -<div class="text-wrap tlid-copy-target"> -<h2 class="result-shield-container tlid-copy-target" id="Résumé"><span class="tlid-translation translation"><span title="">Résumé</span></span></h2> -</div> +<h2 id="Résumé">Résumé</h2> -<p><span class="tlid-translation translation"><span title="">Ce chapitre présente un résumé des problèmes d’accessibilité des contenus multimédias, ainsi que des solutions pratiques.</span></span></p> +<p>Ce chapitre présente un résumé des problèmes d’accessibilité des contenus multimédias, ainsi que des solutions pratiques.</p> <p>{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}</p> -<p> </p> - -<h2 id="Dans_ce_module"><span class="tlid-translation translation"><span title="">Dans ce module</span></span></h2> +<h2 id="Dans_ce_module">Dans ce module</h2> <ul> <li><a href="/fr/docs/Apprendre/a11y/What_is_accessibility">Qu'est ce que l'accessibilité?</a></li> <li><a href="/fr/docs/Apprendre/a11y/HTML">HTML : une bonne base pour l'accessibilité</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> + <li><a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> + <li><a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> <li><a href="/fr/docs/Apprendre/a11y/Multimedia">Accessible multimedia</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> + <li><a href="/fr/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> + <li><a href="/fr/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> </ul> -<p> </p> |