Bonjour. visiteurs jour : 106
Au président
Beauté santé
Infos loisirs
Ensemble
Jean
Informatique
Einstein
Santé corona
Les joies de l'informatique et de l'internet !
Accueil - Disques - Excel - Informatique - Infos - Internet - Javascript - logiciels - Programation - Sites RJ - Vidéo - Plan du site -
HTML5 video
Le plus simple
<video src="http://c-net.fr/video/video_xyz.mp4" controls="" width="704" height="396" poster="vignette.jpg"
>
text facultatif, S'affiche si le navigateur est ancien : Cette vidéo ne peut être affichée sur votre navigateur Internet.
Une version est disponible en téléchargement sous xxx/adresse du lien .</video>
poster="vignette.jpg" est facultatif
Adaptation à la largeur de la page :
<video src="http://aupresident.c-net.fr/video/video_xyz.mp4" controls="" style="width:96%;"></video>
Les vidéo YouTube posent des problèmes, la hauteur ne se synchronise pas avec la largeur.
controls : l’attribut controls active la barre de menu native du navigateur.
Des éléments de cette barre de menu peuvent être définis alternativement avec JavaScript.
poster : définit un fichier image servant de vignette d’aperçu. Si n’est pas présent,
le premier plan de la vidéo est utilisé.
autoplay indique au navigateur Web de lancer la vidéo automatiquement lors du chargement de la page.
loop la vidéo se lance en boucle.
muted coupe le son de la vidéo.
preload la vidéo doit être chargée dès l’ouverture de sa page Web, sans lancer la vidéo.
preload auto charge l’ensemble du fichier normalement,
preload metadata charge uniquement les métadonnées en avance
preload none empêche le chargement automatique de fichiers vidéo.
Pour les navigateurs ne lisant pas mp4 (périmé) :
L'élément source à la place de l'attribut src permet de définir plusieurs sources et le logiciel de lecture choisit le format le plus approprié pour lui. Le navigateur ne télécharge que la version qu'il préfère. exemple :
<video id="video3" controls="" width="320" height="240" poster="vignette.jpg" >
<source src="video/sintel_trailer-480p.mp4" type="video/mp4">
</video>
<source src="video/sintel_trailer-480p.webm" type="video/webm">
<source src="video/sintel_trailer-480p.ogg" type="video/ogg">