Descriptions audio accessibles pour la vidéo HTML5-js tutoriel-php.cn

Accessible Audio Descriptions for HTML5 Video

Résumé des points clés

La description audio traditionnelle contre visuellement nécessite que les équipements d'édition vidéo professionnels soient codés et intégrés dans une piste audio distincte d'un fichier vidéo. Ce processus est souvent irréaliste pour la plupart des créateurs de contenu.
HTML5 fournit l'objet audioTracks, qui permet théoriquement l'implémentation des boutons de commutation pour les descriptions audio et contrôle les volumes audio et vidéo séparément. Cependant, les navigateurs ont actuellement un support limité pour cette fonctionnalité.
Une autre solution consiste à utiliser MediaController, une fonctionnalité de l'audio et de la vidéo HTML5 qui permet de synchroniser plusieurs sources. Cette fonctionnalité est actuellement limitée dans la prise en charge du navigateur, mais peut utiliser des fonctionnalités existantes et largement implémentées pour démarrer et maintenir deux fichiers multimédias synchronisés simultanément.
L'API vidéo fournit des événements tels que Play, Pause, End et Timeupdate pour synchroniser la lecture audio avec des événements vidéo. L'événement «timeupdate» est particulièrement important à cette fin, déclenchant en moyenne 3 à 5 fois par seconde. Cette approche permet la création de descriptions audio accessibles sans avoir besoin de logiciels dédiés ou de versions distinctes de vidéos.

Un client récent m'a demandé de faire un lecteur vidéo accessible et elle voulait vraiment que l'une des fonctionnalités soit une description audio. Les descriptions audio sont destinées aux aveugles ou aux personnes ayant une déficience visuelle, fournissant des informations vocales supplémentaires pour décrire des détails visuels importants. Traditionnellement, les vidéos avec descriptions audio doivent être spécialement réalisées et l'audio est encodé sur une piste distincte d'un seul fichier vidéo. Cela nécessite un équipement de montage vidéo assez professionnel pour coder ces pistes audio, ce qui rend difficile la plupart des créateurs de contenu. C'est ce que je vois en ligne avec des descriptions audio. Par exemple, BBC IPlayer propose un tel contenu, mais le lecteur vidéo ne peut pas contrôler le volume relatif et ne peut pas désactiver la description de l'audio - vous ne pouvez regarder que des versions individuelles ou non descriptions de l'émission. Débuts html5

La spécification vidéo HTML5 fournit des objets `audioTracks`, ce qui permet d'implémenter les boutons de commutation et de contrôler les volumes audio et vidéo séparément. Mais son support de navigateur est à peine présent - au moment de la rédaction, seul IE10 prend en charge cette fonctionnalité. Quoi qu'il en soit, ce que mes clients veulent, c'est une description audio dans un fichier séparé qui peut être ajouté à la vidéo sans créer de version distincte et être facilement fabriquée sans utiliser de logiciel dédié. Bien sûr, il doit fonctionner dans pas mal de navigateurs. Donc, ma prochaine idée est d'utiliser `MediaController`, une fonctionnalité de l'audio et de la vidéo HTML5 qui vous permet de synchroniser plusieurs sources. Cependant, la prise en charge du navigateur pour elle est tout aussi mince - au moment de la rédaction, seul Chrome prend en charge cette fonctionnalité. Mais vous savez - même sans ce support, ce n'est évidemment pas un problème de démarrer deux fichiers multimédias en même temps, il suffit d'être gardé en synchronisation. Alors, pouvons-nous y parvenir en utilisant des fonctionnalités existantes et largement implémentées? Événements vidéo

L'API vidéo fournit de nombreux événements auxquels nous pouvons nous connecter, ce qui devrait synchroniser la lecture audio avec des événements vidéo:

Événement "Play" (déclenché lorsque la vidéo joue).
événement "pause" (déclenché lorsque la vidéo est interrompue).
événement "end" (déclenché à la fin de la vidéo).
événement "timeupdate" (déclenché en permanence lorsque la vidéo est lue).

L'événement "TimeUpdate" est très critique. La fréquence qu'il déclenche n'est pas spécifiée et varie en fait considérablement - mais en moyenne globale approximative, elle équivaut à 3 à 5 fois par seconde, ce qui est suffisant pour nos fins. J'ai vu des moyens similaires d'essayer de synchroniser deux fichiers vidéo, mais ce n'est pas particulièrement réussi car même de petites différences sont évidentes. Mais les descriptions audio n'ont généralement pas besoin d'être synchronisées avec précision - de toute façon, un délai de 100 millisecondes est acceptable - et la lecture de fichiers audio est beaucoup moins forcé sur le navigateur. Nous avons donc juste besoin d'utiliser des événements vidéo existants pour verrouiller la lecture audio et vidéo ensemble:

Lisez audio pendant la lecture de la vidéo.
Pause l'audio lorsque la vidéo est interrompue.
À la fin de la vidéo, en pause la vidéo et audio simultanément.
Lorsque l'heure est mise à jour, si l'heure audio est différente de l'heure de la vidéo, le temps audio est défini pour correspondre au temps vidéo.

Après certaines expériences, j'ai constaté que les meilleurs résultats peuvent être obtenus en comparant le temps en secondes, comme indiqué ci-dessous:

if(Math.ceil(audio.currentTime) != Math.ceil(video.currentTime)) {
  audio.currentTime = video.currentTime;
}

Copier après la connexion

Cela semble contre-intuitif, et au début, je pensais que nous avions besoin des données exactes que nous pouvions, mais cela ne semble pas être le cas. En testant avec une copie audio texte de la piste vidéo (c'est-à-dire que l'audio et la vidéo produisent le même son), il est facile d'entendre que la synchronisation est bonne ou mauvaise. Sur la base de cette base, j'ai constaté que les nombres d'arrondi obtiennent de meilleurs résultats de synchronisation que de ne pas arrondir. C'est donc le script final. Si le navigateur prend en charge MediaController, nous avons juste besoin de l'utiliser, sinon nous implémenterons la synchronisation manuelle comme décrit ci-dessous:

var video = document.getElementById('video');
var audio = document.getElementById('audio');

if(typeof(window.MediaController) === 'function') {
  var controller = new MediaController();
  video.controller = controller;
  audio.controller = controller;
} else {
  controller = null;
}

video.volume = 0.8;
audio.volume = 1;

video.addEventListener('play', function() {
  if(!controller && audio.paused) {
    audio.play();
  }
}, false);

video.addEventListener('pause', function() {
  if(!controller && !audio.paused) {
    audio.pause();
  }
}, false);

video.addEventListener('ended', function() {
  if(controller) {
    controller.pause();
  } else {
    video.pause();
    audio.pause();
  }
}, false);

video.addEventListener('timeupdate', function() {
  if(!controller && audio.readyState >= 4) {
    if(Math.ceil(audio.currentTime) != Math.ceil(video.currentTime)) {
      audio.currentTime = video.currentTime;
    }
  }
}, false);

Copier après la connexion

Veuillez noter que MediaController est défini uniquement par les scripts, mais le contrôleur peut être défini à l'aide de l'attribut statique "MediaGroup":

<video mediagroup="foo"></video> ... <audio mediagroup="foo"> ... </audio>

Copier après la connexion

Si nous faisons cela, cela fonctionnera dans Chrome sans JavaScript. Il synchronisera les sources multimédias, mais l'utilisateur ne peut pas contrôler l'audio (y compris ne pas pouvoir le désactiver) car le navigateur ne sait pas ce que représente l'audio. Dans ce cas, il est préférable d'encoder l'audio dans la vidéo, car il peut alors apparaître dans l'objet , que le navigateur peut reconnaître et pouvoir fournir des contrôles natifs. Mais comme nous n'avons pas de données audioTracks, c'est une question non pertinente! Donc, si le script n'est pas disponible, l'audio ne sera pas du tout lu. Il s'agit de la démo finale, qui peut être exécutée dans n'importe quelle dernière version d'Opera, Firefox, Chrome, Safari ou IE9 ou version ultérieure: - Demo description audio audioTracks

Bien sûr, il s'agit simplement d'une démonstration de preuve de concept simple - il n'y a pas de détection fonctionnelle initiale, il n'a que les contrôles de base fournis par la propriété "Controls" native. Pour la bonne implémentation, il nécessite des contrôles personnalisés pour fournir (entre autres) un bouton pour changer l'audio et un curseur de volume séparé. L'interface doit également être accessible via le clavier, ce qui n'est pas le cas dans les commandes natives de certains navigateurs. Il doit également gérer correctement la mise en mémoire tampon - en fait, si vous recherchez le point où la vidéo a préchargé, l'audio continuera à jouer librement jusqu'à ce que la vidéo se charge suffisamment pour la resynchroniser. Je tiens également à mentionner que la description elle-même ne répond presque pas aux normes professionnelles! C'est là que vous pouvez m'entendre, enregistrer et convertir en utilisant Audacity. Mais c'est tout, je pense que cela démontre efficacement à quel point les barrières techniques de cette approche sont faibles. Je n'ai pas à modifier la vidéo et j'ai fait l'audio en une heure avec un logiciel gratuit. Comme preuve de concept, je pense que c'est très réussi - je pense que mes clients seront très satisfaits! FAQS (FAQ) sur les descriptions audio accessibles pour les vidéos HTML5

Quelle est l'importance d'accéder aux descriptions audio dans des vidéos HTML5?

Les descriptions audio accessibles jouent un rôle crucial dans la rendez les vidéos HTML5 plus inclusives et conviviales. Ils fournissent des équivalents auditifs d'informations visuelles, ce qui est particulièrement bénéfique pour les utilisateurs malvoyants. Ces descriptions décrivent des détails visuels importants qui ne peuvent pas être compris par la piste principale. En ajoutant des descriptions audio accessibles, les créateurs de contenu peuvent s'assurer que leurs vidéos sont accessibles par un public plus large, favorisant ainsi l'inclusion numérique.

Comment ajouter une description audio à ma vidéo HTML5?

L'ajout de description de l'audio à la vidéo HTML5 comprend plusieurs étapes. Tout d'abord, vous devez créer une piste audio distincte qui décrit les éléments visuels de la vidéo. Cela peut être fait à l'aide de divers logiciels d'édition audio. Une fois que la piste de description audio est prête, vous pouvez l'ajouter à votre vidéo HTML5 à l'aide de l'élément avec l'attribut aimable défini sur "Descriptions". Cela garantira que la piste de description audio est reconnue et lue avec la vidéo.

Pourquoi ma vidéo HTML5 ne peut-elle pas jouer?

Il peut y avoir plusieurs raisons pour lesquelles votre vidéo HTML5 ne peut pas jouer. Cela peut être dû à des problèmes avec le fichier vidéo lui-même, comme le fait de ne pas être correctement. Cela peut également être dû au problème que le navigateur Web ou le lecteur vidéo ne prend pas en charge le format vidéo. Pour dépanner, essayez de lire des vidéos sur différents navigateurs ou sur différents appareils. Si le problème persiste, vous devrez peut-être vérifier le fichier vidéo et vous assurer que son format est pris en charge par HTML5.

Quels formats couramment utilisés sont pris en charge dans les vidéos HTML5?

La vidéo HTML5 prend en charge plusieurs formats vidéo communs, notamment MP4, WebM et Ogg. Le format MP4 est largement pris en charge dans tous les principaux navigateurs et appareils, ce qui en fait un choix populaire pour la vidéo en ligne. WebM et OGG sont des formats open source et sont largement pris en charge, bien qu'ils ne fonctionnent pas correctement dans tous les navigateurs.

Comment corriger l'erreur "Fichier vidéo HTML5 introuvable"?

"Fichier vidéo HTML5 non trouvé" L'erreur se produit généralement lorsque le navigateur ne peut pas trouver le fichier vidéo spécifié dans l'attribut source de l'élément <video></video>. Pour corriger cette erreur, assurez-vous que le chemin du fichier dans la propriété source est correct et que le fichier vidéo se trouve dans le chemin spécifié. Si le chemin du fichier est correct, vérifiez si le fichier vidéo est dans HTML5 et le format pris en charge par le navigateur.

Comment rendre ma vidéo HTML5 réactive?

Pour rendre votre vidéo HTML5 réactive, vous pouvez utiliser CSS pour définir la largeur de la vidéo à 100% et la hauteur à automatiquement. Cela garantira que la vidéo est mise à l'échelle vers le haut ou vers le bas pour s'adapter à la largeur de son conteneur, ce qui lui permet de répondre à différentes tailles d'écran.

Puis-je ajouter des sous-titres ou une narration à ma vidéo HTML5?

Oui, vous pouvez ajouter des sous-titres ou une narration à votre vidéo HTML5 en utilisant un élément avec un attribut aimable sur "Légendes" ou "sous-titres". Vous devez créer un fichier webvtt avec des sous-titres ou des narrations, puis référer ce fichier dans l'attribut SRC de l'élément.

Comment contrôler la lecture de mes vidéos HTML5?

HTML5 fournit plusieurs commandes de lecture vidéo intégrées, y compris la lecture, la pause, le volume et le plein écran. Ces contrôles peuvent être activés en ajoutant l'attribut de contrôles à l'élément <video></video>. De plus, vous pouvez utiliser JavaScript pour créer des contrôles et des interactions personnalisés.

Puis-je intégrer des vidéos HTML5 sur mon site Web?

Oui, vous pouvez utiliser l'élément <video></video> pour intégrer des vidéos HTML5 sur votre site Web. Vous devez utiliser l'attribut SRC pour spécifier la source du fichier vidéo, et vous pouvez également ajouter des attributs facultatifs tels que les contrôles, la lecture automatique et la boucle pour personnaliser la lecture vidéo.

Quels sont les avantages de l'utilisation de HTML5 pour la lecture vidéo?

HTML5 offre de nombreux avantages pour la lecture vidéo. Il prend en charge plusieurs formats vidéo, fournit des commandes de lecture vidéo intégrées et permet l'ajout de fonctionnalités d'accessibilité telles que les sous-titres et les descriptions audio. De plus, les vidéos HTML5 peuvent être réactives, garantissant qu'ils ont fière allure sur tous les appareils et tailles d'écran. Enfin, comme HTML5 est la norme Web, il est pris en charge par tous les navigateurs Web modernes sans plug-ins ou logiciels supplémentaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!