HTML La balise <video> Comment afficher des vidéos dans les pages web

Somaire

Définition et utilisation Balise <video>

LES BALISES HTML

La balise <video> du HTML  permet de visionner un film (une vidéo) dans les pages de votre site Web.
La balise video est une des nouveautés majeures et remarquable de HTML5.
Actuellement, il existe 3 formats vidéo pris en charge pour l'élément <video> qui sont: MP4, WebM et Ogg.
Ces formats vidéo sont prises en charge par les principaux navigateurs comme le montre le tableau suivant :

 

Navigateur

MP4

WebM

Ogg

Internet Explorer 9+

OUI

NON

NON

Chrome 6+

OUI

OUI

OUI

Firefox 3.6+

NON

OUI

OUI

Safari 5+

OUI

NON

NON

Opera 10.6+

NON

OUI

OUI

 

MP4 = des fichiers MPEG 4 H264 codec vidéo et le codec audio AAC
WebM = des fichiers avec le codec vidéo VP8 et Vorbis audio codec WebM
OGG = des fichiers Ogg avec codec vidéo Theora et Vorbis codec audio


Exemple Lire une vidéo :

Sélectionner le code

<video width="320" height="240" controls>
  <source src="maVideo.mp4" type="video/mp4">
  <source src="maVideo.ogg" type="video/ogg">
  Votre explorateur ne supporte pas la balise video.
</video>

 

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari
La balise <video> est prise en charge dans Internet Explorer 9 et +, Firefox, Opera, Chrome et Safari.
Remarque : Internet Explorer 8 et versions antérieures, ne supportent pas la balise <video>.


Types MIME pour les Formats vidéo

Format

MIME-type

MP4

video/mp4

WebM

video/webm

Ogg

video/ogg

 

Différences entre HTML 4.01 et HTML5

La balise <video> est nouvelle en HTML5.


Astuce : Tout texte entre  des balises <video> et </video> sera affiché si le navigateur  ne supportent pas l'élément <video>.


Attributs facultatifs de l'élément <video>.

Nouveau : Nouveau en HTML5.

Attribut

Valeur

Description

autoplay Nouveau

autoplay

Spécifies si la vidéo doit être lancée au chargement de la page

controls Nouveau

controls

Spécifies si les boutons de contrôles doivent être affichés (bouton Play/pause etc.….).

height Nouveau

pixels

Spécifier la hauteur de la vidéo

loop Nouveau

loop

Indique que la vidéo va recommencer, chaque fois qu'il est terminé

muted Nouveau

muted

Spécifies que le son de la vidéo doit être sur mut

poster Nouveau

URL

Indique une image à afficher lorsque la vidéo est en  téléchargement, ou jusqu'à ce que l'utilisateur appuie sur le contrôle Play

preload Nouveau

              auto
              metadata
              none
            

Indique  comment la vidéo devrait être chargée quand la page se charge

src Nouveau

URL

Spécifies URL source de la fiche vidéo

width Nouveau

pixels

Spécifier la largeur de la vidéo

Attributs globaux
La balise <video> prend également en charge les Attributs globaux en HTML.


Attributs de l'événement
La balise <video> prend également en charge les Attributs de l'événement en HTML.


Retour à l'accueil du site

Par carabde 10 mars 2014