Ici la description alternativeL'attribut src définit bien entendu l'adresse du fichier vidéo, tout comme pour la balise img lorsqu'il s'agit d'une image. Si vous indiquez les dimensions avec les attributs height et width, c'est encore mieux, et si tout va bien, un élément devrait s'afficher dans le navigateur... pour peu que celui-ci supporte le format de vidéo indiqué dans la source.Sources multiplesOn peut également proposer plusieurs sources dans plusieurs formats différents en indiquant les types MIME grâce à l'attribut type :Les navigateurs ne pouvant pas lire le MP4/H.264 ni la version WebM nativement (comme Firefox 3.6 par exemple) prendront la version au format Ogg Theora. Cela vous oblige néanmoins à encoder le fichier avec différents codecs.Particularité de la syntaxe XHTML : il faut ajouter controls="controls" (et pas juste controls comme vous pourrez le voir sur le premier exemple) pour afficher les possibilités de contrôle de la vidéo. Ceci est valable pour tous les attributs (autoplay, etc.).AttributsL'attribut controls donne accès aux contrôles de lecture (boutons de navigation, volume, etc, selon les possibilités du navigateur), ou les masque s'il est omis.L'attribut preload="auto" permet de de spécifier au navigateur de débuter le téléchargement de la vidéo tout de suite, en anticipant sur le fait que l'utilisateur lira la vidéo. Attention, cette option est à manier avec prudence (il est préférable que ce soit la seule raison d'être de la page). Note : il s'agit de l'ancien attribut autobuffer qu'il vous faudra laisser pour Firefox 3.5 et 3.6.L'attribut autoplay="true" comme son nom l'indique, permet de lancer la lecture automatiquement. Cela peut également être problématique avec une connexion à faible bande passante ou sur un terminal mobile. De manière générale, évitez d'imposer vos choix à l'utilisateur... et à sa connexion internet.L'attribut poster="image.jpg" permet d'indiquer une image à afficher par défaut dans l'espace réservé par la vidéo, avant que la lecture de celle-ci ne soit lancée.L'attribut loop indique que la lecture doit s'effectuer en boucle.PrérequisPensez également à préciser les types MIME dans un fichier .htaccess pour être sûr qu'ils soient corrects, les trois lignes suivantes suffisent à s'assurer la tranquilité :AddType video/ogg .ogvAddType video/mp4 .mp4AddType video/webm .webmFormatsPlusieurs formats tiennent le devant de la scène : WebM, MP4 et Ogg Theora. Même si le but de ce tutoriel est de proposer une solution d'intégration de la balise video compatible sur le plus de navigateurs possible (et pas de discuter du choix des formats dans un interminable débat), faisons quand même une présentation rapide.">

Ici la description alternativeL'attribut src définit bien entendu l'adresse du fichier vidéo, tout comme pour la balise img lorsqu'il s'agit d'une image. Si vous indiquez les dimensions avec les attributs height et width, c'est encore mieux, et si tout va bien, un élément devrait s'afficher dans le navigateur... pour peu que celui-ci supporte le format de vidéo indiqué dans la source.Sources multiplesOn peut également proposer plusieurs sources dans plusieurs formats différents en indiquant les types MIME grâce à l'attribut type :Les navigateurs ne pouvant pas lire le MP4/H.264 ni la version WebM nativement (comme Firefox 3.6 par exemple) prendront la version au format Ogg Theora. Cela vous oblige néanmoins à encoder le fichier avec différents codecs.Particularité de la syntaxe XHTML : il faut ajouter controls="controls" (et pas juste controls comme vous pourrez le voir sur le premier exemple) pour afficher les possibilités de contrôle de la vidéo. Ceci est valable pour tous les attributs (autoplay, etc.).AttributsL'attribut controls donne accès aux contrôles de lecture (boutons de navigation, volume, etc, selon les possibilités du navigateur), ou les masque s'il est omis.L'attribut preload="auto" permet de de spécifier au navigateur de débuter le téléchargement de la vidéo tout de suite, en anticipant sur le fait que l'utilisateur lira la vidéo. Attention, cette option est à manier avec prudence (il est préférable que ce soit la seule raison d'être de la page). Note : il s'agit de l'ancien attribut autobuffer qu'il vous faudra laisser pour Firefox 3.5 et 3.6.L'attribut autoplay="true" comme son nom l'indique, permet de lancer la lecture automatiquement. Cela peut également être problématique avec une connexion à faible bande passante ou sur un terminal mobile. De manière générale, évitez d'imposer vos choix à l'utilisateur... et à sa connexion internet.L'attribut poster="image.jpg" permet d'indiquer une image à afficher par défaut dans l'espace réservé par la vidéo, avant que la lecture de celle-ci ne soit lancée.L'attribut loop indique que la lecture doit s'effectuer en boucle.PrérequisPensez également à préciser les types MIME dans un fichier .htaccess pour être sûr qu'ils soient corrects, les trois lignes suivantes suffisent à s'assurer la tranquilité :AddType video/ogg .ogvAddType video/mp4 .mp4AddType video/webm .webmFormatsPlusieurs formats tiennent le devant de la scène : WebM, MP4 et Ogg Theora. Même si le but de ce tutoriel est de proposer une solution d'intégration de la balise video compatible sur le plus de navigateurs possible (et pas de discuter du choix des formats dans un interminable débat), faisons quand même une présentation rapide.">source ; https://www.alsacreations.com/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html

<video controls src="video.ogv">Ici la description alternative</video>

L'attribut src définit bien entendu l'adresse du fichier vidéo, tout comme pour la balise img lorsqu'il s'agit d'une image. Si vous indiquez les dimensions avec les attributs height et width, c'est encore mieux, et si tout va bien, un élément devrait s'afficher dans le navigateur... pour peu que celui-ci supporte le format de vidéo indiqué dans la source.

Sources multiples

On peut également proposer plusieurs sources dans plusieurs formats différents en indiquant les types MIME grâce à l'attribut type :

<video width="400" height="222" controls="controls">

 <source src="video.mp4" type="video/mp4" />

 <source src="video.webm" type="video/webm" />

 <source src="video.ogv" type="video/ogg" />

 Ici l'alternative à la vidéo : un lien de téléchargement, un message, etc.

</video>

Les navigateurs ne pouvant pas lire le MP4/H.264 ni la version WebM nativement (comme Firefox 3.6 par exemple) prendront la version au format Ogg Theora. Cela vous oblige néanmoins à encoder le fichier avec différents codecs.

Particularité de la syntaxe XHTML : il faut ajouter controls="controls" (et pas juste controls comme vous pourrez le voir sur le premier exemple) pour afficher les possibilités de contrôle de la vidéo. Ceci est valable pour tous les attributs (autoplay, etc.).

Attributs

L'attribut controls donne accès aux contrôles de lecture (boutons de navigation, volume, etc, selon les possibilités du navigateur), ou les masque s'il est omis.

L'attribut preload="auto" permet de de spécifier au navigateur de débuter le téléchargement de la vidéo tout de suite, en anticipant sur le fait que l'utilisateur lira la vidéo. Attention, cette option est à manier avec prudence (il est préférable que ce soit la seule raison d'être de la page). Note : il s'agit de l'ancien attribut autobuffer qu'il vous faudra laisser pour Firefox 3.5 et 3.6.

L'attribut autoplay="true" comme son nom l'indique, permet de lancer la lecture automatiquement. Cela peut également être problématique avec une connexion à faible bande passante ou sur un terminal mobile. De manière générale, évitez d'imposer vos choix à l'utilisateur... et à sa connexion internet.

L'attribut poster="image.jpg" permet d'indiquer une image à afficher par défaut dans l'espace réservé par la vidéo, avant que la lecture de celle-ci ne soit lancée.

L'attribut loop indique que la lecture doit s'effectuer en boucle.

Prérequis

Pensez également à préciser les types MIME dans un fichier .htaccess pour être sûr qu'ils soient corrects, les trois lignes suivantes suffisent à s'assurer la tranquilité :

AddType video/ogg  .ogv

AddType video/mp4  .mp4

AddType video/webm .webm

Formats

Plusieurs formats tiennent le devant de la scène : WebM, MP4 et Ogg Theora. Même si le but de ce tutoriel est de proposer une solution d'intégration de la balise video compatible sur le plus de navigateurs possible (et pas de discuter du choix des formats dans un interminable débat), faisons quand même une présentation rapide.