Placer une vidéo dans le balisage HTML5 est simple, pas plus complexe pour un navigateur donné que de placer une image. Dans cet article, nous tirerons pleinement parti de la prise en charge intégrée du navigateur pour créer le lecteur vidéo le plus simple possible.

Nous allons mettre en place le cadre de base de l'application et ensuite utiliser le

Conditions préalables

Utilisez Chrome, Safari ou Internet Explorer 9+. Pour le moment, vous devez éviter Firefox et Opera en raison des problèmes de format de fichier vidéo entre navigateurs. Bien que la prise en charge de l'élément vidéo soit cohérente dans tous les navigateurs modernes, le format MP4 fait sauter Firefox et Opera. Vous pouvez vérifier la compatibilité ici.

Avant de commencer, vous devrez trouver un fichier .mp4 que vous pouvez utiliser, si vous n'en avez pas, vous trouverez beaucoup de fichiers mp4 gratuits en ligne.

Construire le cadre de base

Le code suivant est le cadre autour duquel vous construisez le lecteur. Il crée une mise en page simple et comporte un espace réservé pour la vidéo elle-même.

Vous devez créer un nouveau fichier HTML dans votre répertoire de travail et le nommer index.html, puis ajouter ce code:

HTML5 Video Player

Maintenant, avec les bases posées, passons à la partie amusante du lecteur en ajoutant une vidéo à la page.

Utiliser l'élément vidéo pour ajouter des vidéos aux pages Web

L'objectif dans la conception de HTML5

Voici à quoi ressemble une vidéo HTML5 dans Chrome:

La liste suivante montre tout le code requis pour afficher la vidéo. Comme vous pouvez le voir, ce n'est pas compliqué.

Insérer ce code à la place du " "Commentez dans le code ci-dessus, assurez-vous de remplacer [VOTRE VIDEO] par le chemin de votre fichier .mp4, et rafraîchissez la page.