Les 2 Manières d’Intégration Simples d’une Vidéo à l’Aide de la Balise HTML5 Vidéo

Le nombre d’internautes qui regardent les vidéos en ligne s’accroît le jour au jour.

Conscient de cela, bon nombre de sites internet n’hésitent pas de proposer des vidéos pour le bonheur de leur utilisateur.

Autrefois, pour intégrer une vidéo sur une page web, il fallait utiliser des plugins comme Flash, ce qui peut entraîner des failles de sécurité et autres défauts.

Mais maintenant, plus besoin de faire appel à ces outils.

Vous pouvez désormais intégrer vos vidéos sur vos pages web, à l’aide de la balise html5 vidéo qui constitue une solution simple et native.

Dans les lignes qui suivent, découvrez comment utiliser cette balise pour intégrer une vidéo sur une page web, et les différentes options de contrôle que vous offre cette balise.

Les 2 manières d’intégrer une vidéo sur une page web à l’aide de la balise html5 vidéo

LA SUITE APRÈS CETTE PUBLICITÉ

L’intégration d’un seul format

Ce moyen d’intégration d’une vidéo est le plus simple. Il se fait de la même façon qu’on insère une image sur une page Web.

Il vous faut préciser au sein de la balise html5 vidéo la source du fichier

<video controls src="video.mp4">La description alternative</video>

Tous les navigateurs modernes ne supportent pas tous les mêmes versions des formats vidéos.

Ainsi en utilisant ce code, il se peut que certains utilisateurs puissent regarder la vidéo et d’autre non car ils n’utilisent pas tous les mêmes navigateurs.

Pour cette raison, il est conseillé d’utiliser l’intégration qui suit.

L’intégration multiple

Ce moyen permet d’intégrer au sein de la balise html5 vidéo différents types de format vidéo.

Avec cette intégration, peu importe le navigateur qu’utilise votre visiteur, vous avez la garantie que votre vidéo sera lue.

<video controls width="320" height="240">
	  <source src="video.mp4" type="video/mp4">
	  <source src="video.ogg" type="video/ogg">
	  <source src="video.webm" type="video/webm">
	  Un message, un lien de téléchargement.
</video> 

NB :

• Vous remarquerez que pour les deux formes d’intégration, j’ai utilisé l’attribut “controls” au sein de la balise vidéo. Il est l’élément qui ajoute les commandes de contrôles lecture, pause et volume à la vidéo.
• Il est conseillé d’utiliser les attributs “width” et “height” pour attribuer les dimensions voulues à la vidéo.

Placer une vignette 

N’est-il pas mieux qu’un visiteur ait une vignette qui lui donne une brève idée sur le contenu d’une vidéo plutôt qu’un espace tout noir avec le bouton de lecture au milieu.

Je suis sûr que vous êtes du même avis que moi et aussi, ça donne du crédit à cette page Web.

L’appel de la vignette est très simple, tout se fait grâce à l’attribut “poster” qui prend pour la valeur le chemin de la vignette.

<video controls width="320" height="240" poster="vignette.png">
	  <source src="video.mp4" type="video/mp4">
	  <source src="video.ogg" type="video/ogg">
	  <source src="video.webm" type="video/webm">
	  Un message, un lien de téléchargement.
</video> 

Lancement automatique d’une vidéo

Il se peut que vous vouliez que votre vidéo joue automatiquement après le chargement de la page.

C’est l’attribut “autoplay” qui joue ce rôle, vous l’incorporez au sein de la balise html5 vidéo et le tour est joué.

Cet attribut est un attribut booléen qui peut prendre les valeurs True ou False.

<video controls width="320" height="240" autoplay="true">
	  <source src="video.mp4" type="video/mp4">
	  <source src="video.ogg" type="video/ogg">
	  <source src="video.webm" type="video/webm">
	  Un message, un lien de téléchargement.
</video>

Cependant, une lecture automatique peut ne pas être appréciée par certains de vos utilisateurs, vaut mieux leur laisser le soin de lire ou pas la vidéo.

N’imposez pas vos choix aux utilisateurs, sinon vous risquez de les irriter.

Que la vidéo joue en boucle

Vous avez peut-être besoin que votre vidéo joue en boucle. C’est utile pour une vidéo mise en fond de section de page.

C’est aussi simple que les autres éléments vus ci-haut, il vous faut juste intégrer l’attribut “loop” dans la balise vidéo.

Comme l’attribut autoplay, l’attribut “loop” est aussi un attribut booléen.

Et quand aucune valeur n’est indiquée, cela signifie que la valeur par défaut est True.

<video controls width="320" height="240" loop="true">
	  <source src="video.mp4" type="video/mp4">
	  <source src="video.ogg" type="video/ogg">
	  <source src="video.webm" type="video/webm">
	  Un message, un lien de téléchargement.
</video>

Les différents formats de vidéo prise en charge par les navigateurs

Le but de ce tutoriel est de vous montrer comment intégrer une vidéo sur une page web, et cette vidéo qui peut être lue par les navigateurs modernes.

Du coup, la suite logique est de vous parler des formats acceptés par les navigateurs modernes les plus utilisés.

• Format Mp4 : Le format mp4 est un format compatible avec la quasi-majorité des navigateurs modernes Safari, Opéra, Chrome, Firefox
• Format OGG : c’est un format gratuit et libre de droits. Les navigateurs Opéra, Firefox, Chrome interprètent ce format.
• Format WebM : Ce format est lui aussi reconnu par tous les navigateurs modernes. C’est un format a été lancé par Google.

Autres tutoriels disponibles sur le blog 

3 étapes simples pour maitriser une fois pour de bon l’utilisation du système de grille de Bootstrap