Comment pouvez-vous fournir des sous-titres et des sous-titres pour les vidéos à l'aide de & lt; track & gt; élément?

Comment pouvez-vous fournir des légendes et des sous-titres pour les vidéos à l'aide de l'élément & Track>?

Pour fournir des sous-titres et des sous-titres pour les vidéos à l'aide de l'élément <track></track> , vous devez suivre une structure spécifique dans votre HTML. L'élément <track></track> est utilisé conjointement avec l'élément <video></video> pour ajouter des pistes de texte chronométrées, qui peuvent être des sous-titres, des légendes, des chapitres, des descriptions ou des métadonnées. Voici comment vous pouvez l'implémenter:

1. Structure HTML : Placez l'élément <track></track> en tant qu'enfant de l'élément <video></video> . L'élément <track></track> doit être placé après les éléments source de la vidéo.

2. Attributs : l'élément <track></track> utilise plusieurs attributs pour spécifier son comportement et son contenu:

   • kind : Spécifie le type de piste de texte. Pour les sous-titres et les légendes, utilisez respectivement des "sous-titres" ou des "légendes".
   • src : pointe vers le fichier webvtt qui contient les sous-titres ou légendes réels.
   • srclang : spécifie la langue de la piste de texte. Ceci est nécessaire si kind est défini sur "sous-titres".
   • label : fournit un titre lisible par l'utilisateur pour la piste. Ceci est utile pour que les navigateurs affichent des options pour différentes langues ou types de pistes.
   • default : si cela est présent, cet attribut spécifie que la piste doit être activée, sauf si les préférences de l'utilisateur indiquent quelque chose de différent.

Voici un exemple de la façon dont vous pourriez ajouter des sous-titres et des légendes à une vidéo:

 <code class="html"><video controls> <source src="video.mp4" type="video/mp4"> <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English"> <track kind="captions" src="captions_en.vtt" srclang="en" label="English Captions" default> </track></track></source></video></code>

Dans cet exemple, subtitles_en.vtt et captions_en.vtt sont des fichiers webvtt qui contiennent le texte réel à afficher.

Quelles sont les meilleures pratiques pour assurer l'accessibilité avec des légendes vidéo à l'aide de l'élément & Track>?

Assurer l'accessibilité avec des légendes vidéo à l'aide de l'élément <track></track> implique plusieurs meilleures pratiques:

1. Fournir plusieurs options de langue : inclure des pistes pour différentes langues pour répondre à un public diversifié. Utilisez l'attribut srclang pour spécifier la langue de chaque piste.
2. Utilisez des étiquettes descriptives : utilisez l'attribut label pour fournir des étiquettes claires et descriptives pour chaque piste. Cela aide les utilisateurs à comprendre les options disponibles, surtout si plusieurs langages ou types de pistes sont disponibles.
3. Implémentez correctement les légendes et les sous-titres : utilisez kind="captions" pour les légendes destinées aux téléspectateurs sourds ou difficiles, qui devraient inclure des éléments de non-discours comme les effets sonores et la musique. Utilisez kind="subtitles" pour le dialogue traduit.
4. Assurer la synchronisation : le moment des légendes et des sous-titres doit être précis pour correspondre à l'audio. Cela garantit que les téléspectateurs peuvent facilement suivre.
5. Caractéristiques de l'accessibilité : Considérez des fonctionnalités supplémentaires comme la possibilité d'ajuster la taille, la couleur et l'arrière-plan du texte via CSS pour répondre aux différents besoins des utilisateurs.
6. Tests : Testez régulièrement les légendes et les sous-titres sur différents navigateurs et appareils pour s'assurer qu'ils fonctionnent correctement et sont accessibles à tous les utilisateurs.
7. Contenu de secours : fournissez une alternative de texte ou de transcription aux utilisateurs qui ne peuvent pas accéder au contenu vidéo pour quelque raison que ce soit. Cela peut être lié dans l'élément vidéo ou fourni sur la page.

Comment personnaliser l'apparence des sous-titres ajoutés via l'élément & Track> dans les vidéos HTML5?

La personnalisation de l'apparence des sous-titres ajoutée via l'élément <track></track> dans les vidéos HTML5 est généralement effectuée via CSS. Vous pouvez cibler le pseudo-élément ::cue pour styliser le texte et son arrière-plan. Voici des étapes et des exemples de personnalisation:

1. Cibler le repère : Utilisez le pseudo-élément ::cue pour styliser le texte dans la piste.

2. Options de style : vous pouvez modifier les propriétés suivantes pour personnaliser l'apparence:

   • color : modifie la couleur du texte.
   • background-color : modifie la couleur d'arrière-plan de la zone de texte.
   • text-shadow : ajoute une ombre au texte pour une meilleure lisibilité.
   • font : modifie la famille, la taille et le style des polices.

Voici un exemple de CSS qui personnalise l'apparence des sous-titres:

 <code class="css">::cue { color: #ffffff; background-color: rgba(0, 0, 0, 0.6); font-family: Arial, sans-serif; font-size: 18px; text-shadow: 1px 1px 2px black; }</code>

Ce CSS modifiera la couleur du texte en blanc, appliquera un fond noir semi-transparent, définira la police sur Arial, augmente la taille de la police et ajoutera une ombre de texte pour un meilleur contraste.

Quelles langues et formats l'élément de la prise en charge et de la suivi des sous-titres et des légendes?

L'élément <track></track> prend en charge diverses langues et formats pour les sous-titres et légendes vidéo:

1. Langues : l'élément <track></track> peut prendre en charge n'importe quel langage humain, comme spécifié par l'attribut srclang . La valeur de srclang devrait être une étiquette de langue BCP 47 valide, qui peut inclure des codes pour les langues, les dialectes et les régions (par exemple, "en" pour l'anglais, "FR" pour le français, "ES-MX" pour l'espagnol comme parlé au Mexique).

2. Formats : Le format principal pris en charge par l'élément <track></track> est WebVTT (pistes de texte vidéo Web). WebVTT est un format de texte simple pour afficher les pistes de texte chronométrées synchronisées avec le contenu vidéo.

   Voici un exemple de base d'une structure de fichiers WebVTT:

    <code class="vtt">WEBVTT 00:00:00.000 --> 00:00:05.000 This is the first caption. 00:00:05.001 --> 00:00:10.000 This is the second caption.</code>

   Alors que WebVTT est le format le plus pris en charge, l'élément <track></track> peut potentiellement prendre en charge d'autres formats comme TTML (langage de balisage de texte chronométré) et SRT (sous-titre Subrip) via des extensions de navigateur ou des polyfills, bien que ceux-ci soient moins couramment utilisés directement avec l'élément <track></track> .

En suivant ces directives et pratiques, vous pouvez fournir, personnaliser efficacement et assurer l'accessibilité des légendes et des sous-titres pour votre contenu vidéo à l'aide de l'élément <track></track> .

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!