Comment ajouter de la vidéo à vos pages Web HTML5 et CSS3 - pour les nuls

La possibilité de lire des vidéos via le langage HTML est une avancée majeure et n'est pas difficile à mettre en œuvre. Vous pouvez utiliser une balise pour ajouter de la vidéo à votre page Web, et la lecture de la vidéo directement dans le navigateur sans nécessiter un plugin comme Flash.

Bien sûr, ce n'est pas parfait. Il existe un certain nombre de normes vidéo concurrentes, et les navigateurs ne peuvent pas s'entendre sur la norme à accepter. Les normes les plus importantes sont appelées H. 264 et Ogg.

Certains navigateurs en préfèrent un; certains préfèrent l'autre. Pour compliquer les choses, l'extension de fichier d'une vidéo n'indique pas toujours le mécanisme de codage sous-jacent. Cela signifie que l'encodage vidéo nécessite quelques expérimentations. Si votre fichier vidéo n'est pas dans le format que vous souhaitez, vous devrez peut-être le convertir. FFmpeg et VLC sont des outils gratuits exceptionnels que vous pouvez utiliser pour convertir la vidéo au format de votre choix.

Comme pour toute propriété intellectuelle, assurez-vous d'avoir la permission du propriétaire original du fichier. Ce n'est pas parce que vous pouvez intégrer une vidéo dans votre page web que vous devriez le faire.

Le code de cette page montre à quel point le tag est:

videoDemo

Video Demo
Votre navigateur ne supporte pas la vidéo intégrée via HTML 5.
Cette vidéo est une bande-annonce de l'incroyable court métrage "Big Buck Bunny". Cette expérience prouve que des bénévoles talentueux peuvent produire une vidéo professionnelle de haute qualité en utilisant uniquement des outils open-source. Aller à // www. bigbuckbunny. org pour voir toute la vidéo.

Les fichiers vidéo sont extrêmement volumineux et peuvent rendre votre site Web beaucoup plus lent pour les utilisateurs. Ils sont également lourds à déplacer vers un serveur Web. Pour cette raison, de nombreux développeurs Web préfèrent télécharger des vidéos sur un service comme YouTube et simplement créer un lien vers la vidéo sur un autre serveur.

Si vous cliquez avec le bouton droit sur une vidéo YouTube, vous pouvez sélectionner Copier le code intégré dans le menu qui s'affiche. Cela vous donne du code que vous pouvez utiliser sur votre propre site.