Tutoriel : Lecteur Video Flash

MAJ : 21/01/2007 (Nouveau lecteur)

Exemple :

Tout d’abord il faut encoder votre vidéo (Avi, Mpeg, Quicktime, Wmv) en Flv (Flash Video). Pour cela il existe un logiciel gratuit : Riva Flv Encoder.Une fois le logiciel installé et lancé, il vous faudra paramétrer les différentes options, à savoir :

  • La vidéo de départ (1)
  • La vidéo de sortie au format FLV (2)
  • La résolution de la vidéo (3)
  • Le framerate (Image/seconde) (4)
  • Le bitrate vidéo (Kbit/seconde) (5)
  • Le bitrate audio (Kbit/seconde) (6)

Une capture de mes paramètres au cas où :

Riva

Il existe d’autres logiciels permettant de faire cet encodage. Si Riva ne vous satisfaisait pas, je vous conseille l’excellent Total Video Converter.

Pour les utilisateurs Mac désirant générer une vidéo au format flv, je conseille cet excellent tutoriel : http://ffmpegx.com/fr/flv.html.

Le plus dur est fait. Vous pouvez à présent mettre en place le lecteur vidéo dans votre page internet. Téléchargez et décompressez, à l’aide d’un logiciel de décompression (Winrar ou autre), le fichier flvplayer.rar qui contient le lecteur vidéo flvplayer.swf.

Copiez ce fichier (flvplayer.swf) à la racine de votre site, et la vidéo flv dans un répertoire de votre choix (à la racine même, dans un sous-répertoire nommé /video/, …).

Il vous suffit à présent de copier ce code dans votre page internet :


<object type="application/x-shockwave-flash" data="http://site.fr/flvplayer.swf?file=http://site.fr/test.flv&autoStart=false" width="400" height="300"><param name="movie" value="http://site.fr/flvplayer.swf?file=http://site.fr/test.flv&autoStart=false" /></object>

en remplaçant test.flv par le répertoire et le nom de votre vidéo (exemple : repertoire_video/ma_video.flv ou http://www.votre-site.com/votre-video.flv), en mettant true ou false au paramètre autoStart (lancement automatique de la vidéo ou non), et en indiquant les bonnes dimensions de votre vidéo (largeur/width et hauteur/height).

N’hésitez pas à partager votre expérience en postant un commentaire avec le lien vers votre vidéo. Amusez-vous bien…

Plus de fonctionnalité (plein écran, playlist, …) dans ce fichier http://www.nikohk.com/files/flash_flv_player.zip.

Visitez le site de l’auteur : http://www.jeroenwijering.com

Tags: , ,

Article(s) sur le même sujet

78 commentaires pour “Tutoriel : Lecteur Video Flash”

  1. rider dit:

    c bon le probleme est résolu en fait il faut prendre le code du fichier flvplayer.html
    sinon maitenant le probleme est que en plein ecran la video est déformé.

  2. rider dit:

    bonjour j’ai mit à jour le lecteur à la version 3.5 et maintenant le bouton fullscrean ne fonctione plus
    savez vous pourquoi?

  3. Le_skipper dit:

    Bonjour
    je viens d’essayer Total Video Converter ça m’a pas l’air mal; mais il y a quand même en mpeg4 .AVI une sacré dégringolade de la qualité pourtant pris en HD.
    Enfin on verra à l’usage
    Merci pour ce petit coup de pousse
    Le_skippper

  4. Le_skipper dit:

    Bonjour
    Merci j’ai téléchargé le logiciel puis installé et il me dit toujours ceci :

    his can be caused by a not supported combination of parameters or by a not supported video codec.

    Qu’en penses tu ?
    Est-ce ma configuration ou autre?
    merci de tes réponses

  5. Golem XIII dit:

    Désolé pour le multipostage….
    Mais je voudrais savoir comment lire plusieurs videos à la suite sur un meme lecteur (notemment celui de ma page d’accueil), car j’ai pas saisi dnas ton fichier .rar ou et comment inclure le html…
    Merci et encore désolé pour le multipostage…

  6. Golem XIII dit:

    Bon pour autostart, j’ai trouvé la faille, en fait dans ton code un peu plus haut, t’as mis une majuscule à ‘start’>>> ‘autoStart’, et comme j’ai fait un copier/coller…
    Il faut la remplacer par une minuscule >>’autostart’ pour que le lecteur se lance en automatique.

  7. Golem XIII dit:

    Ben ca marche toujours pas que je mette autoplay ou autostart…
    de plus j’ai une barre de chargement en bas du lecteur (comme sur you tube et dailymotion) qui avance tres lentement est ce normal ?

    Merci d’avance pour ta réponse Nhk.

  8. horza dit:

    Bonjour ,
    J’aimerais faire apparaitre une image au debut de ma video ( au lieu du noir qu il y a actuellement ) mais j’arrive pas a trouver comment faire . En gros , le mm principe que sur youtube
    Si vs avez des idees , je suis prenneur

    merci d’avance

  9. Nhk dit:

    Le_skipper > Pour le lien vers Riva Flv Encoder
    , c’est corrigé. Mea Culpa, je suis en pleine migration de mon site, donc il se peut que certains fichiers disparaissent pour réaparaitre ailleurs. Si ce loficiel ne te convient pas, je te conseille Total Video Converter (à chercher sur Google). Il est disponible à l’essai. Il y en a certainement des autres.

    Golem XIII > Selon le lecteur video utilisé, il faut utiliser soit autostart soit autoplay.

  10. Golem XIII dit:

    Salut, j’ai le meme probleme que oZZY, que je mette false ou true mon lecteur ne se lance pas automatiquement, suis obligé d’appuyer sur play, et c’est ma video d’accueil… merci de m’aider ca serait sympa.

    Merci d’avance.

  11. Le_skipper dit:

    Bonjour

    Je viens d’essayer d’installer ‘riva flv encoder’ comme tu le conseilles dans ton début de ce sujet mais j’ai toujours le même message:(traduit en français)

    Ceci peut être provoqué par une combinaison non soutenue des paramètres ou par un codec visuel non soutenu.

    Pourtant avec la même configuration que tu as donné.
    De plus ton lien pour télécharger riva ne fonctionne pas.

    As tu une réponse a mes questions.

    Merci d’avance

    Le skipper

  12. Nhk dit:

    pablo.p2m>

    Bonjour,

    C’est un pb au niveau de la vidéo en fait. Essayez evec un autre logicel d’encodage.

  13. pablo.p2m dit:

    Bonjour, j’ai un soucis avec le lecteur, il lis bien la vidéo cependant si je clique dans la barre de progression la musique repart de zéro?

  14. rider dit:

    a oui bizare ca me met la page de test

  15. Nhk dit:

    Par contre evites de mettre l’option de retour à la dimension d’origine dans ta page fullscreen.html. Car lorsque tu cliques dessus, la page flvplayer.html est affichée. Etonnant non? Il me semble, et je peux me planter, que cette page de retour n’est pas configurable. Probleme embetant.

  16. rider dit:

    dsl pour la fautes de frappes lais=mais

  17. rider dit:

    merci pour tes info maintenant ca fonctionne lais par contre ta version du lecteur est anciene la 3.3 est sortie.

  18. Nhk dit:

    rider > Télécharges ce fichier : http://www.nikohk.com/fichiers/flash_flv_player.zip

    Tu trouveras un exemple de fonctionnement en plein écran. Pour faire court, il te suffit de rajouter sur ton site les fichiers fullscreen.html et ufo.js, et de compléter ton code html en y ajoutant &showfsbutton=true sur les 2 lignes de ton lecteur.

    Je viens de faire la modification sur la vidéo de cette page. Ca fonctionne plutot bien. Tiens moi au courant.

    Petit lien qui pourra t’interesser (site de l’auteur) :
    http://www.jeroenwijering.com/?item=Flash_Video_Player

  19. rider dit:

    merci tout fonctione bien mais j’aimerais savoir comment mettre la video en plein écran.

  20. JGTC dit:

    merci quand meme ! je repete que ce lecteur est vraiment tres pratique et simple d’utilisation bon courage a tous ! ^^

  21. Nhk dit:

    Essaies avec Total Vidéo Converter.

  22. ji31000 dit:

    à chaque conversion, j’ai droit au message suivant : ‘ encoder failed’

  23. ji31000 dit:

    j’essaie d’encoder une video en wmv mais pour moi ça ne passe pas. Que me faut-il faire?

  24. Nhk dit:

    Salut,

    Tu as mis autoStart=true sur les 2 lignes de code?

    Si c’est le cas, je ne sais pas. Au pire envoies moi le code.

  25. oZZy dit:

    Salut, mon soucis est que je mette true ou false, la vidéo ne se lance pas automatiquement au chargement de la page, il faut que j’appui sur play.

    Merci

  26. Nhk dit:

    Envoies-moi ton code et l’adresse de ta vidéo par email (contact@nikohk.com).

  27. gild0ux dit:

    J’ai fait exactement ce que tu ma di mai rien a faire la vidéo ne se lance pas. Je ne comprend pas.

  28. Nhk dit:

    JGTC > Peut etre avec un autre type de lecteur flv. En tout cas pas avec celui ci. Désolé.

    gild0ux > Si ta vidéo ne se lance pas, cela doit etre un pb de chemin relatif. Sois tout d’abord certain que tu pointes bien au bon endroit (tu peux toujours mettre le chemin complet -> http://www …..blabla…. video.flv), que le nom du fichier n’a pas d’espaces ou de caractères spéciaux (avec des accents…), et que ta vidéo soit correcte et bien au format flv.

  29. gild0ux dit:

    J’ai vraiment besoin d’aide merci de me repondreau plus vite. J’ai mon lecteur sur ma page mai ma vidéo ne veu pas se lancer. Pourquoi?

  30. gild0ux dit:

    kelk1 sait pourquoi la vidéo ne veut pas se lancer?
    Merci d avance.

  31. JGTC dit:

    bonjour, et bonne année à tous ^^

    Je repose ma question concernant le mode plein ecran, n’est-il pas possible de passer d’un mode à l’autre sans relancer la video du debut ?

    merci a+

  32. gild0ux dit:

    SA avance lol maintenant j ai le lecteur mai la vidéo ne veu pas s afficher

  33. gild0ux dit:

    je les bien mis dans mon ftp mai cependant le carré reste blanc. Sa va faire la journée que je cherche et rien n avance je desespere :p

  34. gild0ux dit:

    ba g dl le lecteur kome di ci dessus mai effectivement p-e je ne l est pas mis o bonne nedroit. Ou faut il le mettre? plz pas trop de terme compliqué :p j ai encore du mal avec certains termes merci

  35. bobleponge dit:

    Le carré blanc en general c’est que vous n’avez fait que copier le code sans avoir uploader le lecteur swf,…avez vous bien le lecteur sur le ftp de votre hebergeur?

  36. gild0ux dit:

    g egalement le probleme du carré blanc si kelk1 pouvai m aider je laisse mon msn : gild0ux@hotmail.fr merci d avance

  37. nani dit:

    moi par contre je voudrais savoir comment on fait pour afficher le lecteur dans un autre site que le notre mais en hébergant le player sur notre site je sais pas si tu vois ce que je veux dire lol merci

  38. Kaverne dit:

    Dernier message pour dire que la MAJ du lecteur se trouve sur ce site,
    http://www.jeroenwijering.com/?item=Flash_Video_Player
    elle évite entre autre la pixelisation des vidéos.

  39. Kaverne dit:

    Par contre, quand on agrandit la vidéo, elle pixélise un petit peu.

  40. Kaverne dit:

    Oups, vraiment désolé pour le copié coller complètement foiré.
    Mais la vidéo marche maintenant le problème venait en faite du slash (/) entre le ‘.flv’ et &autoStart

    Ton lecteur est vraiment génial, bravo en tout cas!

  41. Nhk dit:

    Pour réduire la taille du lecteur vidéo, il faut modifier la valeur des paramètres width (largeur) et height (hauteur) dans le code html.

  42. oZZy dit:

    En fait c’est surtout l’affichage de la vidéo que j’aimerais aggrandir…

  43. oZZy dit:

    Merci beaucoup !
    J’ai utilisé celui ci http://www.nikohk.com/fichiers/flash_flv_player.zip

    Par contre il n’existe pas un moyen de réduire la taille ?

  44. Nhk dit:

    oZZy > Salut,

    il existe plusieurs sites proposant ce genre de fonctionnalités :

    http://www.flvplayer.com/samples.php
    http://www.videospark.com/index.php?sc=2

    Mais comme je l’avais dis dans un précédent commentaire, je conseille de télécharger ce lecteur http://www.nikohk.com/fichiers/flash_flv_player.zip . Il y a tout ce qu’il fait savoir dans l’archive (documentation, fichiers exemples). Je pense mettre à jour ce tuto en y ajoutant la prise en compte de playlist.

  45. oZZy dit:

    Salut, tout d’abord bravo pour cet outil qui marche. C’est trés rare…
    Mon soucis est le suivant, je suis à la recherche d’un lecteur de vidéo en flash avec une playlist pour mon site.
    Je souhaiterais que le visiteur choisisse la vidéo à lire en cliquant sur une liste.
    Est ce possible de trouver ça sans être obliger d’être ingénieur en informatique ?
    Merci d’avance.

  46. Haben dit:

    Salut, un grand merci pour cette application, elle est superbe et fonctionne très bien.
    Sympa

  47. JGTC dit:

    bonjour,

    je tenais à dire bravo et encore merci pour ce player open source. J’aurais une question :

    est-il possible de passer du mode ecran normal en plein ecran sans pour autant relancer la video ?
    merci a+

  48. Nhk dit:

    Salut,

    Ce lecteur ne fonctionne qu’avec les videos au format flv. Les autres formats nécessitent souvent l’installation de certains codecs et ne garantissent donc pas à tout le monde la possibilité de les lire.

    Pour encoder tes vidéos (mpeg, wmv, …) en flv il te faut un logiciel. Si Riva encoder ne fonctionne pas ou ne te satisfait pas, je te conseille Total Video Converter qui tourne plutot bien. Il doit certainement en exister d’autres.

    Pour ce qui est de Macromedia Flash PRO 8, il me semble qu’il faut créer un projet de type video, ou lecteur quelque chose. Tu dois ensuite importer ta vidéo et le reste n’est que de la configuration.

    Tiens moi au courant.

  49. Thomas dit:

    Salut,

    tout dabbord j’ai essayer ton code mais aucun moyen de le faire fonctionner… en faite ce que je voudrais moi c’est mettre une video mpeg ou wmv sur un site au format flash avec une barre lecteur genre youtube ou daily motion…
    J’ai Macromedia Flash PRO 8 mé impossible de trouver comment faire… meme avec un logitiel genre riva encoder, je ne sais pas comment faire apres pour la mettre sur monsite…

  50. klo dit:

    Une solution simple pour lire tous les formats de videos: Le lecteur universel

    http://www.googoo.fr/lecteur_universel

  51. Nhk dit:

    yakusa77 > Essayes avec le lecteur flvplayer suivant peut etre :
    http://www.nikohk.com/fichiers/flash_flv_player.zip

    Greg > Celui de Daily Motion semble le faire très bien. Pour les autres lecteurs, je n’ai pas encore vu cette fonctionnalité.

  52. Greg dit:

    Salut
    Est ce que c’est possible de faire apparaitre la première image de la vidéo dans le lecteur, plutot que d’avoir un fond noir ?
    En tout cas merci pour ce tutoriel et pour les autres…

  53. yakusa77 dit:

    salut tout le monde bon moi j’ai reussi a faire fonctionné tout sa apres quelques manip
    par contre je souhaiterai savoir si on peut rajouté une commande de preload pour que la lecture soit un peut plus fluide
    d’avance merci

  54. Nhk dit:

    spawn_92> C’est une question de chemin relatif. Si tu as une page qui se trouve dans répertoire toto. Tu peux très bien laisser le fichier flvplayer.swf à la racine de ton site. Tu dois juste rajouter dans le code html les 2 points (../) afin de pointer le bon chemin de ton lecteur.

    Ca donnera donc :
    ……
    data=’../flvplayer.swf?file=test.flv&autoStart=false’>
    ……

    à la place de :
    ……
    data=’flvplayer.swf?file=test.flv&autoStart=false’>
    ……

    Tu vois le truc? Tu peux nous laisser l’adresse de ta page au cas où.

  55. spawn_92 dit:

    moi je suis obliger de metre flvplayer dans le dossier de la page html pour que sa marche

  56. Nhk dit:

    Spassy > Autre chose. Essaies peut être le shareware swf2avi. Ensuite utilises Riva Flv Encode ou Total Vidéo Converter pour faire la conversion avi vers flv…

  57. Nhk dit:

    Spassy > Pour la conversion de swf en flv je sais pas. Ca doit dépendre de pas mal de choses (vidéo dans l’anim…). Essais avec Total Vidéo Converter peut être.

    Si le lecteur ne charge pas la vidéo flv, il faut vérifier que tu pointes bien vers le fichier, enlèves les accents si il y en a (fichier et code)…

    Merci pour tes remarques. :)

  58. Spassy dit:

    Moi mon probleme (enfin je pense que c’est ca) c’est que ma video est en swf et comment la passer en flv?
    Merci davance

    PS:Le lecteur marche mais ne charge pas la vidéo..
    PS2: Bravo pour ce lecteur :P

  59. Rémi dit:

    Bonjour à tous… Moi j’ai le problème de la mise en page, la barre de navigation est disproportionnée. J’ai des vidéos en 768/540 et 1/3 de l’écran est caché pas cette barre…

    Comment faire?

  60. 2detension dit:

    Je ne sais quelle erreur Riva me signalais. Ce n’est plus important today parce que finalement ça fonctionne bien chez moi avec Total Vidéo Converter (version d’essai)(euh en fait je pense que c’est dû au redémarrage de l’ordi que je n’avais pas voulu exécuter à ce moment là…:D ). Il convertit même les .rm/.ram en .flv !! (enfin, pour la conversion de ces fichiers, à la sortie les .flv sont + lourd que les originaux…Sinon, de .mpeg à .flv ça perd du poids, normal).
    Donc, je reste avec Total Vidéo Converter, en plus il est accompagné d’un player et d’un burner cd/dvd !!!

  61. Nhk dit:

    2detension : C’est quoi l’erreur classique de Riva Flc Encoder?

  62. 2detension dit:

    Cependant, mon principal souci à présent est de trouver une autre solution que d’encoder mes vidéos en .flv via Flash MX.
    Je me dis qu’avec un encodeur indépendant, la conversion prendra un peu moins de temps (???).
    Je sais, je sais, on ne parle que de Riva Flv Encoder et de Total Vidéo Converter.
    MAIS AUCUN DES DEUX NE MARCHE CHEZ MOI !!!
    Le 1er m’indique l’erreur classik que la plupart a eu.
    Le 2nd me dit qu’il a besoin de flash et qu’il nest pas installé sur mon machine. Pfff, kel ineptie…

    (….et là, je grince fortement des dents)

  63. 2detension dit:

    en tous cas, moi ça marche now !!
    En fait, au début, j’avais placé mes 3 fichiers (playervideo.swf; SteelOverAll.swf; mavideo.flv) ds le même répertoire ‘audioFlash’sur mon serveur.
    Résultat carré blanc inactif.
    Et puis, mon cervo a de nouveau analyser le code et m’a conseillé de placer playervideo.swf et SteelOverAll.swf à la racine du site, et de laisser mon fichier ‘mavideo.flv’ ds mon répertoire ‘audioFlash’.
    Je reload ma page html contenant l’élément.
    Résultat : ça marche !!!

    Merci bcp Nhk !!!
    Comme je commence ds le développement ça soulage un peu…

  64. Nhk dit:

    Dès qu j’ai un peu de temps je refais le bidule avec des options supplémentaires (habillage, timeline, …). Affaire à suivre donc.

  65. ok dit:

    ça roule sauf que le style du lecteur est trop gros (il cache une bonne partie de la vidéo, il faudrait en faire une toute petite barre tout en bas en dehors de la vidéo.

    Ensuite le timeline ne bouge pas alors que la vidéo avance.

    Sinon c’est cool.

  66. Le VauTouR dit:

    J’ai le même problème que Nan, j’ai un carré blanc. j’ai essayé avec l’url ainsi que le nom de la vidéo mais rien n’y fait, le carré reste blanc

  67. Nhk dit:

    Oui bonne année Nan’ ;)

  68. Nan' dit:

    Et bonne année !!!

  69. GrandK dit:

    Ah bah c chouette, je vais garder ça dans un coin de mon ordi, pour le cazou… merci! ^^

  70. Nan' dit:

    je_vous_emmerde_po_mal@hotmail.com sur MSN (oué je sais…)
    Merci en tout cas !

  71. Nhk dit:

    Le plus simple serait de passer par msn ou yahoo… Sinon on ne s’en sortira pas. Au cas ou je suis dispo ici : nhrycenko@yahoo.fr (msn ou yahoo messenger).

  72. Nan' dit:

    C’est marrant, mais c’est pas l’encodage que je trouvais le plus difficile…
    J’ai eu beau recopier ton code, y mettre toutes mes données, remplacer test par le nom de ma video (ce qui n’a pas marché) puis remplacer test par l’url de ma video, rien n’y fait… toujours ce maudit carré blanc…
    je suis maudite !

  73. Kaverne dit:

    Salut.
    Bravo pour ton lecteur il a l’air vraiment pas mal surtout par rapport à l’aspect esthétique.
    J’ai fais tout ce que tu as dis mais la vidéo de charge pas je vois le player et le ‘buffering’ mais la vidéo de se lance pas.

    Voila le code exact que j’ai rentré (le nom du site et de la vidéo sont volontairement changé)….

    Je précise que tous les fichiers nécessaires (player, l’index et la vidéo) sont dans le même dossier ‘test’.
    Ca fait une demi-heure que je galère la dessus, Help :(

  74. Fabou dit:

    Très bon tutos :-)

    D’ou vient la musique de la vidéo de l’exemple ? elle est superbe

  75. nhk dit:

    Merci pour ton message. Plus d’infos sur la musique ici ;)

    http://www.dailymotion.com/featured/video/x2orlc_monday-july-23rd-2007_creation

  76. Fabou dit:

    Merci beaucoup :-)

  77. taram dit:

    merci pour tes explication. j’aimerai savoir comment faire une playlist de video avec le lecteur

  78. nhk dit:

    taram> de rien :)

    pour ce qui est de la playlist, je te conseille de récuperer le fichier http://www.nikohk.com/files/flash_flv_player.zip et d’analyser le contenu de la page flvplayer.html. Il s’agit pricipalement de copier le code du lecteur (le 2ème) et de renseigner le fichier playlist.xml. Petit astuce : transferes le contenu de l’archive zip (le répetoire flash_flv_player) à la racine de ton site, et lances la page flvplayer.html. La vérité tu trouveras…

    Je completerais un jour peut être mon tuto avec cette option de playlist… qui sait. ;)