Comment intégrer la vidéo dans HTML en utilisant la vidéo & lt; Video & gt; étiqueter?

Comment intégrez-vous la vidéo dans HTML à l'aide de la balise

Pour intégrer une vidéo dans HTML à l'aide de la balise <video></video> , vous pouvez utiliser la structure de base suivante:

 <code class="html"><video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> Your browser does not support the video tag. </source></video></code>

Dans cet exemple:

• La width et les attributs height définissent la taille du lecteur vidéo.
• L'attribut controls ajoute des commandes de jeu, de pause et de volume.
• La balise <source></source> à l'intérieur de l'élément <video></video> spécifie le fichier vidéo à lire. L'attribut src pointe vers le fichier vidéo et l'attribut type indique le type MIME de la ressource.
• Le texte "Votre navigateur ne prend pas en charge la balise vidéo" sert de contenu de secours au cas où le navigateur ne prend pas en charge l'élément <video></video> .

Quels sont les attributs essentiels pour la balise

Pour assurer la compatibilité des navigateurs croisés lors de l'utilisation de la balise <video></video> , vous devez considérer les attributs essentiels suivants:

1. SRC : Spécifie l'URL du fichier vidéo. Bien que vous puissiez utiliser cet attribut directement sur la balise <video></video> , il est préférable de l'utiliser dans l'élément <source></source> pour offrir plusieurs formats vidéo.
2. Type : utilisé avec l'élément <source></source> pour indiquer le type MIME du fichier vidéo. Cela aide les navigateurs à déterminer la source à utiliser.
3. Contrôles : ajoute des contrôles vidéo de base comme le jeu, la pause et le volume. Il est bon à inclure cet attribut pour la convivialité, bien que vous puissiez concevoir des contrôles personnalisés si nécessaire.
4. Largeur et hauteur : définissez les dimensions du lecteur vidéo. Ceux-ci peuvent aider à prévenir les décalages de mise en page pendant que la vidéo se charge.
5. Précharge : spécifie comment la vidéo doit être préchargée. Les options n'incluent none (pas de préchargement), metadata (seulement la durée des métadonnées) ou auto (charger toute la vidéo). Cela peut affecter les performances et l'expérience utilisateur.
6. Affiche : spécifie une image à afficher pendant le téléchargement de la vidéo ou jusqu'à ce que l'utilisateur frappe le bouton de lecture.

En utilisant ces attributs, vous pouvez améliorer la compatibilité de votre vidéo sur différents navigateurs.

Pouvez-vous énumérer les formats vidéo courants pris en charge par la balise

Les formats vidéo communs pris en charge par la balise <video></video> incluent:

1. MP4 : largement pris en charge à travers les navigateurs modernes. Pour spécifier un fichier MP4, utilisez:

    <code class="html"><source src="video.mp4" type="video/mp4"></source></code>

2. Webm : pris en charge par Chrome, Firefox, Opera et Edge. Pour spécifier un fichier webm, utilisez:

    <code class="html"><source src="video.webm" type="video/webm"></source></code>

3. OGG : Soutenu par Firefox, l'opéra et certaines versions plus anciennes de Chrome. Pour spécifier un fichier ogg, utilisez:

    <code class="html"><source src="video.ogv" type="video/ogg"></source></code>

Pour garantir une compatibilité plus large, vous pouvez répertorier plusieurs éléments <source></source> à l'intérieur de la balise <video></video> , permettant au navigateur de sélectionner le premier format pris en charge:

 <code class="html"><video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> Your browser does not support the video tag. </source></source></source></video></code>

Comment ajoutez-vous des sous-titres ou des légendes à une vidéo intégrée avec la balise

Pour ajouter des sous-titres ou des légendes à une vidéo intégrée avec la balise <video></video> , vous pouvez utiliser l'élément <track></track> . Voici comment:

 <code class="html"><video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> <track src="captions.vtt" kind="subtitles" srclang="en" label="English"> Your browser does not support the video tag. </track></source></video></code>

Dans cet exemple:

• L'attribut src de l'élément <track></track> pointe vers le fichier webVTT (Text vidéo Web) contenant les sous-titres ou les légendes.
• L'attribut kind spécifie le type de piste de texte. Les options incluent subtitles , captions , descriptions , chapters et metadata . Pour les sous-titres ou les légendes, utilisez subtitles ou captions .
• L'attribut srclang indique la langue de la piste de texte (par exemple, en anglais).
• L'attribut label fournit un titre lisible par l'utilisateur pour la piste de texte, qui peut être affichée dans un menu pour sélectionner différents sous-titres.

Pour vous assurer que les sous-titres ou légendes apparaissent, assurez-vous que le lecteur vidéo les prend en charge (les navigateurs modernes le font) et que le fichier WebVTT est correctement formaté. Par exemple, un fichier WebVTT de base peut ressembler à ceci:

 <code>WEBVTT 00:00:00.000 --> 00:00:05.000 Hello, welcome to my video! 00:00:05.001 --> 00:00:10.000 Today we'll be discussing how to use the video tag.</code>

Cela affichera le texte correspondant aux heures spécifiées de la lecture vidéo.

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!