Blanche de Peuterey.com

Mettre l’Internet au service des petites structures et de la famille

Mettre en ligne une vidéo, avec un code HTML conforme au W3C

Accueil > Articles > Mettre en ligne une vidéo, avec un code HTML conforme au W3C

Tout commence par une petite vidéo prise au cours d’une soirée, d’un anniversaire, d’une rencontre sportive... Vidéo que vous voulez ensuite publier sur votre site, pour la partager avec vos amis, ou tout simplement pour animer vos pages.

Préambules

On aurait tout aussi bien pu partir d’une vidéo publiée sur Youtube ou Dailymotion ou autres plateformes de vidéos partagées. Auquel cas, vous faites un lien depuis votre site vers la vidéo chez Youtube, ou vous copiez le code donné par youtube, que vous intégrez dans votre page, et l’affaire est jouée... ou presque.

Voilà un exemple :

Car cette technique, si elle présente des avantages, a également des inconvénients :

 votre vidéo est hébergée chez quelqu’un d’autre
 vous devez la télécharger sur Youtube (quitte à la télécharger, pourquoi ne pas la télécharger directement sur votre site ?)
 vous conservez le sympathique logo "Youtube", qui n’entre pas nécessairement dans vos goûts.
 on peut se poser des questions sur la qualité de l’image
 accessoirement, le code fourni par Youtube, et que j’ai recopié ici, n’est pas conforme XHTML 1.0 Strict. Cela peut avoir des conséquences pour l’accessibilité de vos sites.

Certains pourront se contenter d’une publication de leurs vidéos sur une telle plateforme. Dans la mesure du possible, je préfère une intégration complète de la vidéo au site.

Etape 1 : Choisir un lecteur

Pour voir une vidéo sur votre site, vous devez tout d’abord lui intégrer un lecteur de vidéo. Pour ma part, j’utilise JW FLV Media Player.

Il me semble préférable d’utiliser toujours le même player, surtout si vous administrez plusieurs sites. De la sorte, vous pourrez utiliser sur les pages de tous vos sites globalement le même code.

Les instructions d’installation sont fournies sur la page du fabricant, je ne les détaille pas.

Etape 2 : mettre votre vidéo au format ".flv"

Deuxième étape : rendre votre vidéo lisible par le lecteur que vous venez d’installer. C’est à dire transformer le format de votre vidéo en format ".flv".

Pour cette opération, j’utilise IVCsoft, qui, dans l’ensemble, m’a toujours donné de bons résultats. Transcodez votre film, chargez sur votre hébergeur le film au format ".flv", et le tour est joué.

Etape 3 : Intégrer le code vidéo.

Voici le code vidéo que j’utilise pour toutes mes vidéos :

<object type="application/x-shockwave-flash" width="320" height="240" data="http://www.blanche-de-peuterey.com/squelettes/video/mediaplayer.swf">

<param name="movie" value="http://www.blanche-de-peuterey.com/squelettes/video/mediaplayer.swf" />

<param name="flashvars" value="file=http://www.blanche-de-peuterey.com/squelettes/video/vaisselle.flv&amp ; displayheight=240&amp ; image=http://www.blanche-de-peuterey.com/squelettes/video/vaisselle.jpg" />

<p>L'informatique n'est pas à mettre entre toutes les mains</p>
</object>

Vous constaterez que j’utilise :

 la balise <object> qui est conforme W3C
 la balise <param> pour passer les paramètres
 une photo (dans l’exemple "vaisselle.jpg") pour éviter le carré noir à l’emplacement de la vidéo.
 dans la balise <object>, une balise de paragraphe <p> pour mettre un texte alternatif, qui aura de l’importance pour le référencement, l’accessibilité de votre site, et qui donnera des renseignements à vos lecteurs si un jour la vidéo a du mal à s’afficher.
 des adresses absolues (http://www... etc).
 Le code est conforme W3C, en XHTML 1.0 Strict.

Ces articles peuvent vous intéresser

D'autres articles avec le mot clé « Vidéo »