HTML5 - Vidéo avancée

Vidéo taguée de HTML5 Nous avons de nombreuses options pour enrichir nos documents, afin de rendre nos pages plus riches en contenu visuel et auditif, grâce au fait que nous ne dépendons pas de plug-ins ou des tiers, nous pouvons manipuler nos vidéos d'une manière qui nous permet d'atteindre nos objectifs sans problème.
Préchargement vidéo
Lorsque vous travaillez avec des contenus plus lourds tels que des vidéos, nous devons faire très attention à ne pas saturer la page, car cela au lieu d'enrichir notre contenu peut avoir l'effet inverse et ralentir notre document et fournir une mauvaise expérience de navigation.
En anticipant cela dans HTML5 Dans l'élément vidéo, cela nous permet de précharger la vidéo à montrer de cette manière, en veillant à avoir un peu de contenu avant de la montrer à l'utilisateur et ainsi de ne pas interrompre son expérience sur notre page.
Pour cela, nous pouvons utiliser les attributs suivants :
précharger - est l'attribut qui nous permettra d'utiliser la fonctionnalité de préchargement vidéo.
rien - la vidéo ne se chargera pas tant que l'utilisateur ne la lira pas.
métadonnées - seules les métadonnées de la vidéo seront préchargées, c'est-à-dire les détails de la vidéo tels que la taille, la durée, etc.
auto - le navigateur peut télécharger la vidéo automatiquement s'il le juge nécessaire, le navigateur peut même ignorer cette instruction, c'est le comportement par défaut.
Voyons un petit exemple de code sur la façon d'utiliser cette propriété :

 Exemple La vidéo ne peut pas être affichée La vidéo ne peut pas être affichée 

Dans l'image suivante, nous voyons comment le navigateur interprète l'appel à la vidéo en utilisant les attributs rien Oui métadonnées :

Il est important de souligner que nous devons faire un usage équilibré de cette propriété, car nous pouvons consommer inutilement des ressources ainsi que de la bande passante, ce qui pourrait également se traduire par une mauvaise expérience d'utilisation de notre page.
Placez une image de couverture pour votre vidéo
Comme la vidéo est une partie importante de notre page, nous ne pouvons pas la laisser montrer la première image car elle peut casser le design, pour cela nous pouvons placer une image de couverture ou espace réservé, avec cela, nous pouvons même contrôler quelle image afficher si l'utilisateur n'a pas encore donné l'ordre de lire la vidéo, pour cela nous pouvons utiliser les attributs poster, pour cela nous pouvons voir l'exemple de code suivant.

 Exemple La vidéo ne peut pas être affichée  

Voyons maintenant un peu comment le navigateur interprète cela et comment l'utilisateur le verra :

AGRANDIR

Pour obtenir cet effet, ce qui a été fait était une capture d'écran de la vidéo, puis avec la propriété affiche nous pouvons placer cette image comme couverture de notre élément vidéo.
Avec cela, nous terminons ce tutoriel, avec ces nouvelles propriétés, nous pouvons mieux contrôler la manière dont nous pouvons montrer nos vidéos et ainsi créer de nouveaux documents plus riches et plus interactifs.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif