Arbre à codes

Mettre une vidéo sur un site internet.

En attendant la balise <video> du HTML 5 et la possibilité de mettre facilement en ligne des vidéos au format libre de Vorbis .ogg ; On va s’occuper ici de faire profiter nos visiteurs de nos vidéos préalablement encodées au format flash video : flv…

Pour que tout le monde regarde facilement vos vidéos sur votre site, le choix le plus simple à l’heure actuelle est d’utiliser un lecteur vidéo écrit en flash/ActionScript (extension swf) qui va se charger de lire votre fichier vidéo encodée au format flv.

Le plugin flash est hélas présent sur plus de 95% des ordinateurs de bureau, ce qui arrange bien notre affaire, que nos visiteurs utilisent Mac OSX, Windows, ou la plupart des parfums de Linux, ils ont toutes les chances de voir notre vidéo sans aucune difficulté. Ce qui est bien mieux que les lecteurs quicktime ou windows média des plugins du même nom, qui ne sont compatible avec rien d’autre que leur système d’exploitation respectif.

Premièrement il nous faut un lecteur de vidéo, celui que je préfère est l’excellent flv-player de http://flv-player.net/. En plus d’être open source, ce qui est plutôt rare pour du code ActionScript, et compilé avec le très bon mtasc, ce lecteur est en prime hautement configurable !!!

  • Télécharger le player version multi sur la page http://flv-player.net/players/multi… choisir player_flv_multi.swf .
  • Copier ce fichier sur votre site et copier aussi votre vidéo .flv à coté de celui-ci.
  • insérer ce code dans votre page HTML :

 

<object type="application/x-shockwave-flash" data="player_flv_multi.swf" width="320" height="240">
 <param name="movie" value="player_flv_multi.swf" />
 <param name="allowFullScreen" value="true" />
 <param name="FlashVars" value="flv=monFilm.flv&amp;autoplay=0&amp;margin=0&amp;showstop=1&amp;showvolume=1&amp;showtime=2&amp;showfullscreen=1&amp;startimage=imageIntro.jpg" />
</object>

 

Les paramètres importants :

  • data= et name="movie" value= : donnent le chemin vers notre lecteur de video : "player_flv_multi.swf". A changer si vous placez votre lecteur dans un autre dossier.
  • width="320" height="240" qui indiquent la largeur et la hauteur de la vidéo (en pixel)
  • puis les "FlashVars" qui sont utilisées pour configurer le player
    • flv=monFilm.flv donne le chemin vers le fichier vidéo.
    • autoplay=0 pas de lecture automatique pour laisser le choix au visiteur de lire ou pas la vidéo (et ainsi gagner de notre coté de la bande passante)
    • startimage=imageIntro.jpg donne le chemin vers une jolie image qui donne envie de cliquer sur "play"

On trouvera sur le site flv-player.net de superbes générateurs de code pour configurer le player à notre volonté : http://flv-player.net/players/multi/generator/


Arnaud , le 23/04/2010 (dernière modif : 4/06/2009)

FORUM : Ils ont donné leur avis

  • Mettre une vidéo sur un site internet. 18 juin 2009 16:46, par freechelmi

    Arnaud c’est dommage de finalement mettre en avant un machin Flash alors que des scripts comme Itheora permettent une meilleure compatibilité ? theora/Flash

    En plus avec Itheora la code ets beaucoup plus clair.

  • Mettre une vidéo sur un site internet. 8 octobre 2009 12:19, par Carolco

    Bonjour et merci pour votre "tuto", je m’en suis servi pour faire un test de vidéo sur mon site. j’ai cependant un problème : ca fonctionne a priori correctement sur tout saus saur internet Explorer… (j’ai la version 6 et la 8 installées sur des machines différentes). Si vous avez une idée pour résoudre ça, je prends volontiers ;) Merci !