Vidéo et audio HTML5: le balisage - SitePoint

Explication détaillée des balises vidéo et audio HTML5: construire un lecteur vidéo réactif

Cet article est extrait du livre "HTML5 & CSS3 pour le monde réel, 2e édition" co-écrit par Alexis Goldstein, Louis Lazaris et Estelle Weyl. Ce livre est disponible dans les grandes librairies du monde entier, et vous pouvez également acheter la version E-Book ici.

Points de base

Les balises vidéo et audio de HTML5 permettent des éléments vidéo et audio intégrés directement dans le code HTML, sans avoir besoin de plug-ins ou de lecteurs externes.
Les balises vidéo et audio HTML5 contiennent plusieurs attributs pour contrôler le comportement de ces éléments, tels que la lecture automatique, les contrôles, les boucles, les sources et la source.
"Fichier vidéo HTML5 non trouvé" L'erreur se produit généralement lorsque le navigateur ne peut pas trouver ou accéder au fichier vidéo spécifié dans la propriété source de la balise vidéo.
HTML5 lui-même ne fournit pas de fonction d'annotation intégrée vidéo, mais peut créer des annotations personnalisées à l'aide de JavaScript et CSS.
En incluant plusieurs balises source dans la balise vidéo, plusieurs sources peuvent être spécifiées pour les vidéos HTML5, maximisant ainsi la compatibilité avec différents navigateurs.

Tags

Après avoir traité les problèmes de conteneurs, de codecs et de licence, étudions les marques des éléments vidéo et leurs attributs connexes.

La façon la plus simple d'inclure des vidéos HTML5 dans une page Web est la suivante:

<video src="example.webm"></video>

Comme mentionné dans les sections précédentes, cela ne fonctionne que dans des navigateurs limités. Cependant, c'est le plus petit code pour que les vidéos HTML5 fonctionnent dans une certaine mesure. Dans un monde idéal, cela devrait fonctionner n'importe où - comme l'élément IMG, mais cela prendra un certain temps.

Similaire à l'élément IMG, l'élément vidéo peut également contenir des attributs de largeur et de hauteur:

<video height="280" src="example.webm" width="375"></video>

Bien que les tailles puissent être définies sur des marqueurs, cela n'affecte pas le rapport d'aspect de la vidéo. Par exemple, si la vidéo dans l'exemple précédent est en fait 375 × 240 et que le marquage est affiché, la vidéo sera centrée verticalement dans l'espace spécifié de 280 pixels. Cela empêche la vidéo d'être surexploitée et de paraître déformée.

Les attributs de largeur et de hauteur

n'acceptent que les entiers, et leurs valeurs sont toujours des pixels. Bien sûr, ces valeurs peuvent être écrasées par Script ou CSS.

Activer les contrôles natifs

Toute vidéo embarquée est indispensable pour permettre aux utilisateurs de jouer, de faire une pause, de s'arrêter, d'avancer rapidement et de reculer, ou de régler le volume. L'élément vidéo de HTML5 contient un attribut de contrôle qui peut le faire:

<video src="example.webm" width="375" height="280" controls></video>

Les contrôles sont une propriété booléenne, donc aucune valeur n'est requise. Son inclusion dans la balise indique au navigateur de rendre le contrôle visible et accessible à l'utilisateur.

Chaque navigateur est responsable de l'apparence des commandes vidéo intégrées. Les figures 5.1 et la figure 5.2 montrent les différences d'apparence de ces contrôles entre les navigateurs.

Figure 5.1.

Figure 5.2.

Figure 5.3.

Figure 5.4.

Attribut de lecture automatique

Nous aimerions ignorer cette propriété car elle n'est pas souhaitable dans la plupart des cas; cependant, cela peut être approprié dans certains cas. L'attribut Boolean Autoplay correspond entièrement à la signification de son nom: il dit à la page Web de lire la vidéo dès que possible.

Habituellement, c'est une mauvaise pratique; Les meilleures pratiques de convivialité stipulent que les sons et les mouvements sur les pages Web ne doivent être déclenchés que lorsqu'ils sont demandés par l'utilisateur. Mais cela ne signifie pas que l'attribut de lecture automatique ne doit jamais être utilisé.

Par exemple, si la page pertinente ne contient qu'une seule vidéo - c'est-à-dire que l'utilisateur clique sur un lien vers une page juste pour regarder une vidéo spécifique - alors il peut jouer automatiquement, en fonction de la taille de la vidéo, du contenu environnant , Affichage de la plate-forme et du public.

Ce qui suit est de savoir comment utiliser cette propriété:

AVERTISSEMENT: le navigateur mobile ignore Autoplay

Beaucoup (sinon tous) les navigateurs mobiles ignorent l'attribut de jeu automatique, donc la vidéo commencera toujours à lire après que l'utilisateur appuyait sur le bouton de lecture. Ceci est raisonnable étant donné que la bande passante mobile est généralement limitée et coûteuse.

<video src="example.webm"></video>

Attribut de boucle

Une autre propriété disponible qui doit être pensée deux fois avant d'utiliser est la propriété Boolean Loop. Encore une fois, il est facile à comprendre: selon la spécification, cette propriété indiquera au navigateur de "revenir au début de la ressource lorsqu'il atteindra la fin de la ressource".

Donc, si vous créez une page Web, dont le seul but est de s'ennuyer par le visiteur, il peut contenir le code suivant:

jeu automatique et boucle infinie! Nous avons juste besoin de retirer les commandes natives et nous pouvons obtenir le trio le plus pratique.

Bien sûr, comme la lecture automatique, les boucles sont également utiles dans certains cas: par exemple, dans un jeu basé sur un navigateur, les sons ambiants et la musique doivent être joués en continu lorsque la page est ouverte.

<video height="280" src="example.webm" width="375"></video>

Propriété de précharge

Par rapport aux deux propriétés discutées précédemment, la propriété de précharge est très pratique dans de nombreux cas. La propriété de précharge accepte l'une des trois valeurs:

• Auto: indique que la vidéo et ses métadonnées associées commenceront à se charger avant la lecture de la vidéo. De cette façon, le navigateur peut commencer à lire une vidéo plus rapidement lorsque l'utilisateur le demande.
• Aucun: signifie que la vidéo ne doit pas être chargée en arrière-plan avant que l'utilisateur appuie sur le bouton de lecture.
• Métadonnées: similaire à aucune, mais même si la vidéo elle-même ne se charge pas, des métadonnées liées à la vidéo (par exemple, sa taille, sa durée, etc.) peuvent être préchargées.

La propriété Préload n'a pas de valeur par défaut définie par des spécifications lorsqu'elle est omise; chaque navigateur décidera lequel de ces trois valeurs devrait être l'état par défaut. Cela est logique car il permet à la vidéo et / ou aux métadonnées d'être automatiquement préchargée sur un navigateur de bureau bien connecté sans effets indésirables réels; mais il permet aux navigateurs mobiles de par défaut les métadonnées ou aucune, car de nombreux utilisateurs mobiles ont une bande passante limitée et préfèrent à Choisissez s'il faut télécharger des vidéos.

Attribut de l'affiche

Lorsque vous essayez de regarder une vidéo sur le Web, une seule image de la vidéo est généralement affichée pour fournir une bande-annonce de son contenu. L'attribut d'affiche facilite la sélection de ces bandes-annonces. Cette propriété est similaire à SRC et pointera vers le fichier image du serveur via l'URL.

Les éléments vidéo suivants sont des éléments vidéo avec attribut d'affiches:

<video src="example.webm"></video>

Si l'attribut de l'affiche est omis, «l'affiche» par défaut sera la première trame de la vidéo, qui sera affichée immédiatement après le chargement.

Attribut muet

L'attribut muet (type booléen) contrôle l'état par défaut de la piste audio de l'élément vidéo.

L'ajout de cette propriété entraînera la désinvolture de la piste audio de la vidéo, ce qui peut écraser toutes les préférences de l'utilisateur. Cela ne contrôle que l'état par défaut de l'élément - qui peut être modifié par l'utilisateur interagissant avec le contrôle ou JavaScript.

Ajoutez-le à notre élément vidéo:

<video height="280" src="example.webm" width="375"></video>

Dans les versions précédentes des spécifications HTML5, il y avait une propriété nommée Audio, qui a pris la valeur muet. La nouvelle propriété en muette remplace la propriété audio désormais obsolète.

Ajouter la prise en charge de plusieurs formats vidéo

Comme nous en avons discuté, il n'y a actuellement aucun moyen d'utiliser un seul format de conteneur pour servir votre vidéo, bien que ce soit en effet la philosophie derrière l'élément vidéo et ce que nous espérons réaliser dans un avenir proche. Pour inclure plusieurs formats vidéo, l'élément vidéo permet la définition de l'élément source afin que vous puissiez permettre à chaque navigateur d'afficher la vidéo dans son format sélectionné. Ces éléments ont les mêmes fonctionnalités que l'attribut SRC sur l'élément vidéo, donc si vous fournissez l'élément source, vous n'avez pas besoin de spécifier SRC pour l'élément vidéo.

Pour obtenir un support complet du navigateur, voici comment déclarer les éléments source:

<video src="example.webm" width="375" height="280" controls></video>

L'élément source

(étrangement) a un attribut SRC qui spécifie l'emplacement du fichier vidéo. Il accepte également un attribut de type qui spécifie le format de conteneur de la ressource demandée. Cette propriété suivante permet au navigateur de déterminer s'il peut lire des fichiers connexes, l'empêchant ainsi de télécharger inutilement des formats non pris en charge.

L'attribut

Type permet également de spécifier les paramètres de codec qui définissent les codecs vidéo et audio pour le fichier demandé. Ce qui suit est l'élément source avec le codec spécifié:

<video src="example.webm"></video>

Vous remarquerez que la syntaxe de l'attribut de type a été légèrement modifiée pour ajuster les valeurs de conteneur et de codec. Les doubles devis utilisés autour de la valeur ont été modifiés en devis simples, et un autre ensemble de devis doubles imbriqués est spécifiquement utilisé dans le codec.

Cela peut être un peu déroutant à première vue, mais dans la plupart des cas, une fois que vous avez un ensemble de façons d'encoder vos vidéos (dont nous discuterons plus loin dans ce chapitre), vous copiez et collez les valeurs. Il est important que vous définissiez la valeur correcte pour le fichier spécifié pour vous assurer que le navigateur peut déterminer quel (le cas échéant), il peut lire.

Remarque: De quels formats avez-vous besoin?

Selon le public cible de votre site Web, vous n'avez peut-être pas besoin de trois éléments source pour obtenir un support complet du navigateur. La prise en charge des codecs et des conteneurs vidéo et audio est excellent, vous n'avez peut-être besoin que d'une ou deux combinaisons. Pour vous aider à décider quels formats utiliser, assurez-vous de consulter les dernières informations de support du navigateur sur puis-je utiliser.

Ordre source

Les trois éléments source sont placés comme des éléments enfants de l'élément vidéo, et le navigateur utilisé sélectionnera tout format de conteneur / codec qu'il reconnaît - téléchargez uniquement les ressources dont elle a besoin et ignorera les autres ressources. Après avoir déclaré trois formats de fichiers, notre code ressemble maintenant à ceci:

<video height="280" src="example.webm" width="375"></video>

Vous remarquerez que notre code n'a désormais pas l'attribut SRC sur l'élément vidéo. Comme mentionné précédemment, y compris l'informatique, en plus de la redondance, l'écrasera également tout fichier vidéo défini dans l'élément source, il doit donc être omis dans ce cas.

Que dois-je faire si un navigateur ne prend pas en charge les vidéos HTML5?

Les trois éléments source inclus dans notre élément vidéo couvriront tous les navigateurs modernes, mais nous n'avons pas encore veillé à ce que nos vidéos jouent dans des navigateurs plus anciens. Comme mentionné précédemment, vous pouvez toujours avoir un nombre considérable d'utilisateurs utilisant des navigateurs qui ne prennent pas en charge les vidéos HTML5. La plupart de ces utilisateurs sont sur une certaine version avant Internet Explorer 9.

Pour maintenir le principe de la dégradation élégante, l'élément vidéo est conçu pour que les navigateurs plus anciens puissent accéder aux vidéos d'autres manières. Tout navigateur qui ne reconnaît pas l'élément vidéo l'ignorera simplement et ses éléments enfants source. Cependant, si l'élément vidéo contient du contenu que le navigateur reconnaît comme HTML valide, il lira et affichera le contenu.

Que pouvons-nous fournir à ces navigateurs non pris en charge? Selon Adobe, plus d'un milliard d'utilisateurs de bureau ont installé le plugin Flash Player sur leurs systèmes. Et la plupart de ces instances de plug-in flash sont la version 9 ou supérieure, et elles prennent en charge le format de conteneur vidéo MPEG-4. Dans cet esprit, pour permettre à Internet Explorer 8 et plus tôt (et à d'autres navigateurs plus âgés qui ne prennent pas en charge les vidéos HTML5) de lire nos vidéos, nous pouvons déclarer une vidéo flash intégrée comme se replie. Voici le code complet de la vidéo sur le HTML5 Herald , qui contient le code de repli Flash:

<video src="example.webm" width="375" height="280" controls></video>

Nous allons ignorer le fonctionnement de ce code nouvellement ajouté (ce n'est pas un livre sur Flash après tout!), Mais voici quelques éléments à noter sur l'ajout de cette balise:

• La largeur et les attributs de hauteur de l'élément objet doivent être les mêmes que ceux de l'élément vidéo.
• Pour lire des fichiers, nous utilisons le lecteur JW open source de Longtail Video, qui est gratuit pour une utilisation non commerciale, mais vous pouvez utiliser n'importe quel lecteur vidéo que vous aimez.
• Le code vidéo flash a sa propre sauvegarde - si le code vidéo Flash ne fonctionne pas, le fichier image s'affiche.
• L'élément du quatrième paramètre définit le fichier à utiliser (Example.mp4). Comme mentionné précédemment, la plupart des instances Flash Player prennent désormais en charge les vidéos en lecture à l'aide du format de conteneur MPEG-4, il n'est donc pas nécessaire de coder d'autres formats vidéo.
• Les navigateurs compatibles HTM5 qui prennent en charge les vidéos HTML5 ignoreront tout contenu dans l'élément vidéo qui n'est pas la balise source comme spécifié par la spécification, donc Fallback est sûr dans tous les navigateurs.

En plus du contenu Flash Fallback, vous pouvez également fournir un lien vidéo de téléchargement facultatif qui permet aux utilisateurs d'accéder à une copie locale de la vidéo et de la regarder lorsqu'elles sont gratuites. Cela garantira que personne ne peut ne pas regarder la vidéo.

Le dernier point à mentionner ici est que, comme l'élément source supplémentaire, votre site Web peut ne pas avoir de visiteurs de navigateurs vidéo HTML5 non soutenus, ou vous ne vous souciez peut-être pas d'un petit nombre d'utilisateurs utilisant des navigateurs plus âgés. Dans les deux cas, vous pouvez facilement omettre le contenu de secours flash, simplifiant ainsi le code.

FAQS pour les balises vidéo et audio HTML5

Que sont les balises vidéo et audio HTML5?

Les balises vidéo et audio HTML5 sont une fonctionnalité introduite dans HTML5 qui vous permet d'intégrer des éléments vidéo et audio directement dans le code HTML. Cela élimine le besoin de plug-ins ou de joueurs externes, offrant aux utilisateurs une expérience multimédia transparente. La balise se compose de balises <video></video> et <audio></audio> et certaines propriétés qui vous permettent de contrôler le comportement de ces éléments, tels que la lecture automatique, les contrôles, la boucle, les sources et la source.

Pourquoi est-ce que je reçois 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 ou accéder au fichier vidéo spécifié dans la propriété source de la balise <video></video>. Cela peut être causé par une variété de raisons, telles que des chemins de fichier incorrects, une suppression de fichiers ou des problèmes de serveur. Assurez-vous que le chemin du fichier est correct et que le fichier vidéo est accessible pour résoudre cette erreur.

Comment ajouter des commentaires à mes vidéos HTML5?

L'ajout de commentaires aux vidéos HTML5 comprend l'ajout de texte, de formes ou d'autres éléments à la vidéo pour fournir plus d'informations ou mettre en évidence certaines parties de la vidéo. Bien que HTML5 ne fournit pas de fonctionnalité d'annotation intégrée, vous pouvez créer des annotations personnalisées à l'aide de JavaScript et CSS. Alternativement, vous pouvez utiliser des outils en ligne tels que Veed.io, qui fournissent des outils d'annotation vidéo faciles à utiliser.

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

Résolvez l'erreur "Fichier vidéo HTML5 introuvable", y compris l'identification de la cause de l'erreur et la résoudre. Si le chemin du fichier est incorrect, corrigez-le. Si le fichier a été supprimé, restaurez-le ou remplacez-le par un nouveau fichier. S'il y a un problème de serveur, veuillez contacter votre administrateur de serveur ou votre fournisseur d'hébergement pour obtenir de l'aide. Dans certains cas, le fichier vidéo peut être corrompu, auquel cas vous devez réparer ou remplacer le fichier.

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

Si vos vidéos HTML5 ne sont pas jouées dans Firefox, cela peut être dû à diverses raisons. Firefox peut ne pas prendre en charge le format vidéo spécifié dans l'attribut source de la balise <video></video>. Les navigateurs peuvent également bloquer les vidéos en raison des paramètres de sécurité ou de confidentialité. Consultez le format vidéo et les paramètres du navigateur pour résoudre ce problème.

Comment réparer les fichiers vidéo HTML5 corrompus?

Réparation des fichiers vidéo HTML5 corrompus comprend à l'aide d'outils de réparation vidéo. Ces outils analysent les fichiers corrompus et essaient de résoudre les erreurs ou problèmes qui empêchent les fichiers de lire correctement. Certains outils de réparation vidéo populaires incluent une réparation vidéo stellaire et une réparation de Wondershare.

Comment ajouter des contrôles dans ma vidéo HTML5?

Vous pouvez ajouter des contrôles pour les vidéos HTML5 en incluant l'attribut de contrôle dans la balise <video></video>. Cette propriété ajoute un ensemble de contrôles par défaut à la vidéo, y compris les boutons Play / Pause, Volume et plein écran. Le contrôle apparaît lorsque l'utilisateur plane sur la vidéo.

Puis-je lire automatiquement ma vidéo HTML5?

Oui, vous pouvez lire automatiquement les vidéos HTML5 en incluant l'attribut de jeu automatique dans la balise <video></video>. Cependant, n'oubliez pas que de nombreux navigateurs bloquent automatiquement les vidéos avec des sons pour éviter les interférences avec les utilisateurs. Pour vous assurer que vos vidéos sont jouées automatiquement, considérez en sourdine avec la propriété en sourdine.

Comment faire boucle ma vidéo HTML5?

Vous pouvez parcourir les vidéos HTML5 en incluant des attributs de boucle dans la balise <video></video>. Cette propriété provoque le début de la vidéo depuis le début après la lecture, créant une boucle continue.

Puis-je lire plusieurs sources dans la vidéo HTML5?

Oui, vous pouvez spécifier plusieurs sources pour les vidéos HTML5 en incluant plusieurs balises <video></video> dans la balise <source></source>. Le navigateur utilisera la première source qu'il peut jouer. Cela vous permet de fournir plusieurs formats vidéo pour différents navigateurs pour une compatibilité maximale.

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!