Intégrer des vidéos dans une page web (dans la partie <body> ... </body>)

Le code vidéo en html

Le code minimal d'une vidéo

  
<p> <video  controls>
    <source src="nom de la vidéo.mp4" type="video/mp4"/>
    </video></p>

Code html avec une image "poster"


<p> <video  controls poster="nom de l'image.jpg">
    <source src="nom de la vidéo.mp4" type="video/mp4"/>
    </video></p>

Code html en modifiant la taille (largeur : width; hauteur : height ; à indiquer en pixel)


<p> <video width="..." height="..." controls poster="nom de l'image.jpg">
    <source src="nom de la vidéo.mp4" type="video/mp4"/>
    </video></p>

Si on choisit deux formats vidéo: mp4 + ogv ou mp4 + webm, toujours mettre le format mp4 en premier!

  
<p> <video width="..." height="..." controls >
    <source src="nom de la vidéo.mp4" type="video/mp4" />
    <source src="nom de la vidéo.webm" type="video/webm" />
    </video></p>

  
<p> <video width="..." height="..." controls >
    <source src="nom de la vidéo.mp4" type="video/mp4" />
    <source src="nom de la vidéo.ogv" type="video/ogg" /> 
    </video></p>

Vidéo qui commence automatiquement et joue sans s'arrêter (Ne marchera pas sur ipad)

  
<p> <video width="..." height="..." autoplay  loop >
    <source src="nom de la vidéo.mp4" type="video/mp4" /> 
    <source src="nom de la vidéo.webm" type="video/webm" />
    </video> </p>

  
<p> <video width="..." height="..." autoplay  loop >
    <source src="nom de la vidéo.mp4" type="video/mp4" />
    <source src="nom de la vidéo.ogv" type="video/ogg" /> 
    </video> </p>

Vidéo avec commandes (play, pause, arrêt) qui se joue automatiquement plusieurs fois (mais qui peut être arrêtée)

  
<p> <video width="320" height="240" controls  loop >
    <source src="nom de la vidéo.mp4" type="video/mp4" />
    <source src="nom de la vidéo.ogv" type="video/ogg" /> 
    <source src="nom de la vidéo.webm" type="video/webm" />
    </video></p>

Vidéo qui se déclenche au passage de la souris (Ne marchera pas sur ipad)

  
<p> <video width="..." height="..." onmouseover="this.play()" onmouseout="this.pause()"
autobuffer="true" >
    <source src="nom de la vidéo.mp4" type="video/mp4" /> 
    <source src="nom de la vidéo.webm" type="video/webm" />
    </video></p>

  
<p> <video width="..." height="..." onmouseover="this.play()" onmouseout="this.pause()"
autobuffer="true" >
    <source src="nom de la vidéo.mp4" type="video/mp4" />
    <source src="nom de la vidéo.ogv" type="video/ogg" /> 
    </video></p>

Pour les info-bulle ou les images cliquables: vidéo qui se déclenche au passage de la souris sur le mot et qui ne se joue qu'une seule fois. Il est nécessaire de recharger la page pour relire la vidéo. Pratique pour les info-bulles sur une carte (voir info-bulles, "images" et "liens"). Ne marchera pas sur ipad.

ce mot

  
<p> <video width="320" height="240" onmouseover="this.play()" onmouseout="this.pause()" 
autoplay >
    <source src="nom de la vidéo.mp4" type="video/mp4" />
    <source src="nom de la vidéo.ogv" type="video/ogg" /> 
    <source src="nom de la vidéo.webm" type="video/webm" />
    </video></p>

Pour les info-bulle ou les images cliquables: vidéo qui se déclenche au passage de la souris et qui se joue plusieurs fois. Ne pas mettre de vidéos trop lourdes sinon la page met du temps à se charger. Pratique pour les info-bulles sur une carte (voir info-bulles, "images" et "liens"). Ne marchera pas sur ipad.

ce mot

  
<p> <video width="320" height="240" onmouseover="this.play()" onmouseout="this.pause()" 
autoplay loop >
    <source src="nom de la vidéo.mp4" type="video/mp4" />
    <source src="nom de la vidéo.ogv" type="video/ogg" /> 
    <source src="nom de la vidéo.webm" type="video/webm" />
    </video></p>

dans un fichier XHTML, il faut écrire:

<video controls="controls" />
<video autoplay="autoplay" />
<video loop="loop" />

Outils pour convertir les vidéos

Une application à installer: Miro Video Converter

pour Mac : télécharger
pour Linux: télécharger
pour PC: télécharger

Pour convertir des vidéos en ligne: Online Convert

Rappel : les formats vidéos lus par les navigateurs

Si vous déposez vos pages web sur un site perso, il faut créer un fichier "htaccess.txt" contenant ceci:

AddType video/ogg  .ogv
AddType video/mp4  .mp4  .m4v
AddType video/webm .webm

et le déposer à la racine du site pour être certain que toutes les vidéos pourront être lues par les navigateurs.
Ce fichier doit être renommé ".htaccess".

Deux formats suffisent : mp4 + ogg ou mp4 + webm	mp4	webm
et iPad		A condition d'installer Perian
	A condition d'installer Quick Time Plug-in*

* Pour installer les plugins dans Firefox: aller dans Firefox / Outils /Modules complémentaires
Dans la rubrique "catalogue", chercher "QuickTime Plug-in".

Pour les artistes!

Allez visiter ce site: c'est génial!