Définit toutes les propriétés de la police dans une déclaration
Que fait la balise HTML <video> ?
L'élément <video>, par lequel on ajoute la prise en charge native de la lecture vidéo à la spécification HTML en HTML5, peut être utilisé pour intégrer une vidéo dans un document HTML. Ajoutez l'URL de la vidéo à l'élément en utilisant l'attribut src de l'élément <video> ou en imbriquant un ou plusieurs éléments <source> entre les balises <video> ouvrante et fermante.
L'élément vidéo a été ajouté à HTML5 en même temps que son frère, l'élément audio. L'élément vidéo est utilisé pour ajouter une vidéo à une page Web. La vidéo est identifiée en ajoutant une URL à un attribut src. Vous pouvez l'utiliser pour intégrer des vidéos hébergées sur votre propre compte d'hébergement ou hébergées par un site Web externe.
HTML5 vidéo sur le Web
Appui de navigateur
Internet Explorer 9, Firefox, Opera, Chrome et Safari prennent en charge l'élément <video>.
Remarque : Internet Explorer 8 et versions antérieures, ne supportent pas l'élément <video>.
Formats vidéo et Support de navigateurs
Actuellement, il existe 3 formats vidéo pris en charge pour l'élément <video> : MP4, WebM et Ogg :
| Navigateur | MP4 | WebM | OGG |
|---|---|---|---|
| Internet Explorer 9 | OUI | NON | NON |
| Firefox 4.0 | NON | OUI | OUI |
| Google Chrome 6 | OUI | OUI | OUI |
| Apple Safari 5 | OUI | NON | NON |
| Opéra 10.6 | NON | OUI | OUI |
- MP4 = les fichiers MPEG 4 H264 codec vidéo et le codec audio AAC
- WebM = les fichiers avec le codec vidéo VP8 et Vorbis audio codec WebM
- OGG = les fichiers avec le codec vidéo Theora et Vorbis codec audio Ogg
Le tableau montre qu’aucun des navigateurs ne prend en charge les trois formats pour le moment
HTML5 Vidéo - Comment ça marche
Pour afficher une vidéo en HTML5, tout ce dont vous avez besoin est le code suivant :
<video width="320" height="240" controls="controls">
<source src="maVideo" type="Type">
</video>
Exemple
Exemple : Copier le code
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Votre navigateur ne supporte pas la balise vidéo
</video>
L'attribut contrôle ajoute des contrôles vidéo, tels que lecture, pause et volume.
C'est aussi une bonne idée de toujours inclure des attributs width et height. Si la hauteur et la largeur sont définies, l'espace requis pour la vidéo est réservé lorsque la page est chargée. Cependant, sans ces attributs, le navigateur ne connaît pas la taille de la vidéo et ne peut pas réserver l'espace approprié pour elle. L'effet sera que la mise en page va changer pendant le chargement (lors de la charge de la vidéo).
Vous devez également insérer un contenu textuel entre les balises <video> et </video> pour les navigateurs qui ne prennent pas en charge l'élément <video>.
Vous pouvez placer plusieurs éléments <source> dans l’élément <video>. Le navigateur utilise le premier format qu’il reconnu.
HTML5 <video> - propriétés et méthodes du DOM
Le DOM HTML5 a des méthodes, propriétés et événements pour les éléments <video> et <audio>.
Ces méthodes, propriétés et événements permettent de manipuler les éléments <video> et <audio> à l'aide de JavaScript.
Il existe des méthodes pour jouer (Play), pause et le chargement, par exemple et il y a les propriétés (comme la durée et le volume). Il y a aussi des événements DOM qui peuvent vous informer lorsque l’élément <video> commence à s’exécuter, interrompue, se termine, etc..
L'exemple ci-dessous illustrent, de façon simple, comment aborder un élément <video>, lire et définir des propriétés et appeler des méthodes.
Exemple 1
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<title>HTML5 vidéo</title>
</head>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Votre explorateur ne supporte pas vidéo HTML5.
</video>
</div>
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
<p>Vidéo de <a href="http://www.bigbuckbunny.org/"
target="_blank">Big Buck Bunny</a>.</p>
</body>
</html>
L'exemple précédent appelle deux méthodes : play() et pause(). Il utilise également deux propriétés : pause et la largeur.
Pour plus de détail voir notre Référence HTML5 Audio/vidéo.
HTML5 Tags vidéo
| Balise | Description |
|---|---|
| <video> | Définit une vidéo ou un film |
| <source> | Définit plusieurs ressources de support pour les éléments multimédias, tels que <video> et <audio> |
| <track> | Définit les textes des titres dans mediaplayer |