Le code minimum pour intégrer de la vidéo et de l’audio sur une page html
Dans l’ordre (ci-dessous) vidéo de dossier lié au site, audio de dossier
lié au site et iframe provenant de youtube.
Le rendu sans css:
Pour choisir une image (poster) à mettre en avant:
<video controls poster="https://lp.trucdev.fr/animaux/600/400/5"> <source src="medias/luckyducky.mp4" type="video/mp4">
</video>
<!– quand on a plusieurs source pour la même vidéo, les ranger dans le sens de préférence de lecture (type de fichier) de la maniére ci dessous –>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">Your browser does not support the video tag.
</video>
Attributs de l’élément audio
preloadL’attribut preload permet d’indiquer au navigateur si le fichier doit être préchargé ou pas. On va pouvoir lui passer l’une des valeurs suivantes :
none: le fichier audio ne sera pas préchargé ;metadata: seules les méta-données seront préchargées ;auto: le fichier sera préchargé.
L’attribut autoplay va nous permettre de lancer automatiquement la lecture du fichier audio dès qu’il sera chargé. Il suffit de le renseigner (même sans valeur explicite) pour que le fichier audio se lance automatiquement. Notez que certains navigateurs (dont Chrome) peuvent bloquer cet attribut car celui-ci est jugé mauvais pour vos visiteurs.
L’attribut loop permet de lire le fichier audio en boucle. Il suffit donc de le renseigner (même sans valeur explicite) pour que le fichier soit lu en boucle.
L’attribut muted sert à définir si le son doit être initialement coupé. Il suffit de le renseigner (même sans valeur explicite) pour couper le son.
Exemple :
<audio src="https..." type="" autoplay>Attributs de l’élément video
L’élément video possède un attribut strictement obligatoire qui est l’attribut controls. Cet attribut permet d’afficher les contrôles de base pour l’utilisateur comme la lecture, la pause, le choix du volume, etc. Les différentes options de contrôle vont être fournies par le navigateur.
En plus de cet attribut controls, on va pouvoir passer d’autres attributs facultatifs à l’élément video afin de contrôler comment le fichier doit être lu et notamment :preloadL’attribut preload permet d’indiquer au navigateur si le fichier doit être préchargé ou pas. On va pouvoir lui passer l’une des valeurs suivantes :
none: le fichier vidéo ne sera pas préchargé ;metadata: seules les méta-données seront préchargées ;auto: le fichier sera préchargé.
L’attribut autoplay va nous permettre de lancer automatiquement la lecture du fichier vidéo dès qu’il sera chargé. Il suffit de le renseigner (même sans valeur explicite) pour que le fichier vidéo se lance automatiquement. Notez que certains navigateurs (dont Chrome) peuvent bloquer cet attribut car celui-ci est jugé mauvais pour vos visiteurs.
L’attribut loop permet de lire le fichier vidéo en boucle. Il suffit donc de le renseigner (même sans valeur explicite) pour que le fichier soit lu en boucle.
L’attribut muted sert à définir si le son doit être initialement coupé. Il suffit de le renseigner (même sans valeur explicite) pour couper le son.
L’attribut poster va nous permettre de renseigner l’adresse d’une image qui devra être utilisée comme image d’illustration de fond de la vidéo avant que celle-ci ne soit chargée et lancée.
En plus de ces attributs, notez que nous allons pouvoir gérer la taille de nos vidéos grâce aux attributs HTML width et height ou idéalement avec les propriétés CSS du même nom. Pour des raisons évidentes de ratio, nous ne préciserons toujours que l’une de ces deux propriétés (généralement width) afin que la deuxième dimension soit calculée automatiquement.