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

Article publié le 3 mai 2009  Mot(s) clé :   Vidéo  Enregistrer au format PDF   Version PDF

Nous décrivons dans cet article toutes les étapes pour mettre en ligne une vidéo. De plus, nous faisons bien attention à ce que le code HTML soit conforme aux standards du Web.

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

Articles avec le mot clé « Vidéo »

Un excellent lecteur FLV

Un très bon lecteur FLV, disponible à l’adresse http://flv-player.net/fr/. Pourquoi celui-ci ? (...)  Lire...

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 (...)  Lire...

Sous-titrer une vidéo

Positionnement des sous-titres 1. Pour insérer les sous-titres, on utilise le logiciel (...)  Lire...

commentaire forumUn commentaire ? Laissez-nous un message

Ce forum est modéré a priori. Il se veut un lieu de discussion et d'échange constructif.

1 Message

  • MissTouchatouinfo 12 avril 2011

    Salut !
    Super ! C’est parfait, merci !

    repondre message

Répondre à cet article