{"id":1539,"date":"2010-05-15T02:49:50","date_gmt":"2010-05-15T01:49:50","guid":{"rendered":"http:\/\/flaven.fr\/?p=1539"},"modified":"2026-09-16T10:08:50","modified_gmt":"2026-09-16T08:08:50","slug":"flowplayer-video-player-utiliser-le-player-flowplayer","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2010\/05\/flowplayer-video-player-utiliser-le-player-flowplayer\/","title":{"rendered":"Flowplayer, vid\u00e9o, player &#8211; Utiliser  le player Flowplayer"},"content":{"rendered":"<p>\n<!-- Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer--><br \/>\n<!--  Flowplayer, FLV, MP4, javascript, vid\u00e9os, actionscript, flash, flex --><br \/>\nLa vid\u00e9o sur Internet est depuis longtemps  &#8220;the big thing&#8221;. A ce jour et en attendant l&#8217;HTML5, pour jouer de la vid\u00e9o, vous \u00eates oblig\u00e9(e) d&#8217;avoir un player vid\u00e9o fait en Flash ou Flex.<!--more--> Si on a ni le temps, ni les moyens de faire d\u00e9velopper un player sur mesure, il faut donc se r\u00e9soudre \u00e0 faire appel \u00e0 un produit d\u00e9j\u00e0 d\u00e9velopp\u00e9. Au vu du grand nombre de players disponibles, cela tourne vite au casse-t\u00eate de faire un choix. Par ailleurs tous ces players sont loin de poss\u00e9der les m\u00eames capacit\u00e9s. On avait d\u00e9j\u00e0 \u00e9crit un  article sur un des players les plus performants et les plus populaires : <code>The JW Player&#x2122;<\/code>. <b>On va parler dans cette article d&#8217;un de ces excellents concurrents : <code>Flowplayer<\/code>. C&#8217;est tout bonnement \u00e0 notre avis le player flash du moment, le plus complet, le mieux document\u00e9, le plus performant&#8230; Bref on en vient \u00e0 manquer de superlatifs !<\/b><\/p>\n<ul>\n<li><a href=\"http:\/\/social.hecube.net\/blog\/2010\/01\/29\/jw-player-flash-javascript-swfobject-utiliser-le-jw-player-a-laide-de-swfobject\/\">JW Player, Flash, Javascript, SWFObject &#8211; Utiliser le JW Player \u00e0 l\u2019aide de SWFObject<\/a><\/li>\n<\/ul>\n<h4>Les qualit\u00e9s du flowplayer<\/h4>\n<p>Tout d&#8217;abord la d\u00e9monstration du player  flowplayer et de sa capacit\u00e9 \u00e0 lire les &#8220;cuepoints&#8221; <a href=\"http:\/\/social.hecube.net\/flowplayer\/\" target=\"_blank\">http:\/\/social.hecube.net\/flowplayer\/<\/a><\/p>\n<p>Les qualit\u00e9s du flowplayer sont nombreuses. Il offre plein de possibilit\u00e9 outre la lecture d&#8217;un fichier MP4 (codec H.264) ou d&#8217;un fichier FLV (codec On2PV6) notamment la fonctionnalit\u00e9 de <code>FLV fallback<\/code> en attendant l&#8217;HTML5 bien s\u00fbr !<\/p>\n<p>Au cas o\u00f9 la lecture de vid\u00e9o MP4 n&#8217;est pas support\u00e9 pas l&#8217;utilisateurs, le flowplayer est capable de faire appel si besoin \u00e0 des fichiers <code>.flv<\/code> (FLV fallback).<\/p>\n<blockquote><p>The trick here was to use flashembed&#8217;s isSupported method. All of flashembed&#8217;s static methods are available because this tool is included in the Flowplayer script.<\/p>\n<p>M4V encoding is used on the video which provides the best video quality you can have on the web today together with a relatively small file size. Typical video formats such as MPG or MOV does not work with Flash and they must first be converted to MP4, M4V or FLV. Take a look at this forum post about MP4 (or H.264) video conversion.<\/p>\n<p>FLV fallback is used to provide a regular FLV video for those Flash clients that do not support support MP4. MP4 support was added to Flash in version 9.115 and lower versions can only play FLV files. You should note that the FLV format is not a bad format. It provides a small file size with relatively good quality. the FLV format can be optimized with a technology called &#8220;ON2&#8221; and you can find more information about it here.\n<\/p><\/blockquote>\n<p>Il existe aussi de nombreuse possibilit\u00e9s de gestion de la barre de contr\u00f4le<br \/>\n<b>JavaScript plugin: Controlbar<\/b><br \/>\n<i>Source : <a href=\"http:\/\/flowplayer.org\/demos\/plugins\/javascript\/\">http:\/\/flowplayer.org\/demos\/plugins\/javascript\/<\/a><br \/>\n<\/i><\/p>\n<h4>Installer le flowplayer<\/h4>\n<p>On va installer le flowplayer en local, sur un serveur qui tourne sur MAMP afin d&#8217;effecteur quelques tests sur les capacit\u00e9s dudit player notamment un test sur sa capacit\u00e9 \u00e0 g\u00e9rer les &#8220;cuepoints&#8221;.<\/p>\n<p>Il est n\u00e9cessaire d&#8217;autoriser votre plugin flash \u00e0 charger des <code>.swf<\/code><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_1.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_2.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_3.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_4.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>Erreur de chargement de <code>flowplayer.controls.swf<\/code><\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_5.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>Le texte de l&#8217;erreur 301<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_6.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>Le texte de l&#8217;erreur 301<\/b><br \/>\nComme souvent \u00e0 la mise en place du player, on rencontre quelques erreurs&#8230; Rien de grave, juste le nom d&#8217;un fichier <code>.swf<\/code> qui <\/p>\n<p><code>No Controlers - 301:Unable to load plugin: unable to load plugin 'controls', url: 'flowplayer.controls.swf'<\/code><\/p>\n<p><b>La solution \u00e0 l&#8217;installation pour faire tourner le player en local.<\/b><br \/>\nIl vous suffit de renommer <code>flowplayer.controls-3.2.0.swf<\/code> en <code>flowplayer.controls.swf<\/code><\/p>\n<blockquote><p>\nFor those of you that are having this same problem &#8211; I found the answer. The control file that comes with the download is flowplayer.controls-3.2.0.swf however the flowplayer-3.2.0.swf file is actully trying to load a file called flowplayer.controls.swf.\n<\/p><\/blockquote>\n<p><i>Source: <\/i><a href=\"http:\/\/flowplayer.org\/forum\/5\/40605\">http:\/\/flowplayer.org\/forum\/5\/40605<\/a><\/p>\n<h4>L&#8217;insertion des &#8220;cuepoints&#8221; \u00e0 l&#8217;aide de <code>Adobe Media Encoder CS4<\/code> dans une vid\u00e9o <code>.flv<\/code><\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_cuepoint_flash_1.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_cuepoint_flash_2.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_cuepoint_flash_3.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_cuepoint_flash_4.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_cuepoint_flash_5.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<h4>L&#8217;encodage \u00e0 l&#8217;aide de <code>Adobe Media Encoder CS4<\/code> avec le <code>xml<\/code> de &#8220;cuepoints&#8221;<\/h4>\n<p>Une fois la liste de &#8220;cuepoints&#8221; d\u00e9finie, il ne reste qu&#8217;\u00e0 les int\u00e9grer au sein de l&#8217;encodage de la vid\u00e9o au format <code>.flv<\/code><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_cuepoint_encoding_1.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_cuepoint_encoding_2.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_cuepoint_encoding_3.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<h4>Tester l&#8217;insertion des &#8220;cuepoints embedded&#8221; \u00e0 l&#8217;aide de <code>flvtool2<\/code><\/h4>\n<p>Pour cela on va se servir d&#8217;un outil nomm\u00e9 <code>FLVTool2<\/code>. Cet outil existe sur Mac et PC, il est m\u00eame distribu\u00e9 dans le &#8220;couteau suisse&#8221; de <code>FLVKnife<\/code><br \/>\nAfin de d\u00e9terminer si les &#8220;cuepoints&#8221; sont bien dans la vid\u00e9o&#8230; \u00e9tant donn\u00e9 qu&#8217;ils sont en &#8220;embedded&#8221; comme des journalistes qui accompagnent des militaires !<\/p>\n<p><b>Faire sortir les metadatas de la vid\u00e9o au format <code>.txt<\/code><\/b><\/p>\n<pre lang=\"bash\">flvtool2  -P \/Applications\/MAMP\/htdocs\/flowplayer\/example\/best_after_effects_movie_1.flv<\/pre>\n<p><b>Faire sortir les metadatas de la vid\u00e9o au format <code>.xml<\/code><\/b><\/p>\n<pre lang=\"bash\">flvtool2  -Px \/Applications\/MAMP\/htdocs\/flowplayer\/example\/best_after_effects_movie_1.flv<\/pre>\n<p><b>Faire sortir les metadatas de la vid\u00e9o au format <code>.xml<\/code> et les insr\u00e9rer dans un fichier <code>best_after_effects_movie_1_flv.xml<\/code> <\/b><\/p>\n<pre lang=\"bash\">flvtool2  -Px \/Applications\/MAMP\/htdocs\/flowplayer\/example\/best_after_effects_movie_1.flv &gt;  \/Applications\/MAMP\/htdocs\/flowplayer\/example\/best_after_effects_movie_1_flv.xml<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_flvtool2_1.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_flvtool2_2.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_flvtool2_3.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_flvtool2_4.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<h4>Tester la lecture des &#8220;cuepoints embedded&#8221; \u00e0 l&#8217;aide de <code>flowplayer<\/code><\/h4>\n<p>Voici une capture des diff\u00e9rents &#8220;cuepoints&#8221; ins\u00e9r\u00e9es au sein de la vid\u00e9o <code>.flv<\/code>. Chaque &#8220;cuepoint&#8221; permet l&#8217;affichage d&#8217;une l\u00e9gende (caption) attach\u00e9 \u00e0 un instant donn\u00e9 de la vid\u00e9o (timecode). Les temps sont donn\u00e9s en millisecondes.<\/p>\n<p><b>Le d\u00e9but de la vid\u00e9o<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_cuepoint_flash_frontend_1.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>TestEvent1 @ 4000<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_cuepoint_flash_frontend_2.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>TestEvent2 @ 7000<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_cuepoint_flash_frontend_3.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>TestEvent3 @ 10000<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_cuepoint_flash_frontend_4.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>TestEvent4 @ 13000<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_cuepoint_flash_frontend_5.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>TestEvent5 @ 18000<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_cuepoint_flash_frontend_6.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>TestEvent6 @ 26000<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_cuepoint_flash_frontend_7.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>TestEvent7 @ 28000<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_cuepoint_flash_frontend_8.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>TestEvent8 @ 35000<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_cuepoint_flash_frontend_10.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>TestEvent9 @ 40000<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flowplayer_usage_cuepoint_flash_frontend_11.jpg\" alt=\"Flowplayer, vid\u00e9o, player - Utiliser  le player Flowplayer\" width=\"500\" height=\"265\" \/><\/p>\n<h4>Les sources des fichiers <code>.xml<\/code><\/h4>\n<p><b>Le fichier xml <code>tags_flash.xml<\/code> qui ins\u00e8re les cuepoints dans la vid\u00e9o <code>best_after_effects_movie_marcel_ziul.flv<\/code>.<\/b><\/p>\n<pre lang=\"xml\" escaped=\"true\">\n\t\n\t&lt;?xml version=&#x27;1.0&#x27; encoding=&#x27;UTF-8&#x27; ?&gt;\n\n\t&lt;FLVCoreCuePoints&gt;\n\t\t&lt;!-- begin list --&gt;\n\n\t\t&lt;!-- cuepoint 1 --&gt;\n\t\t\t&lt;CuePoint&gt;\n\t\t\t\t&lt;Time&gt;4000&lt;\/Time&gt;\n\t\t\t\t&lt;Type&gt;navigation&lt;\/Type&gt;\n\t\t\t\t&lt;Name&gt;TestEvent1&lt;\/Name&gt;\n\t\t\t\t&lt;Parameters&gt;\n\t\t\t\t\t&lt;Parameter&gt;\n\t\t\t\t\t\t&lt;Name&gt;Caption&lt;\/Name&gt;\n\t\t\t\t\t\t&lt;Value&gt;Des l\u00e9gendes en Fran\u00e7ais, en Portugais et en Allemand avec les cuepoints sur une vid\u00e9o.&lt;\/Value&gt;\n\t\t\t\t\t&lt;\/Parameter&gt;\n\t\t\t\t&lt;\/Parameters&gt;\n\t\t\t&lt;\/CuePoint&gt;\n\t\t&lt;!-- cuepoint 2 --&gt;\n\t\t\t&lt;CuePoint&gt;\n\t\t\t\t&lt;Time&gt;7000&lt;\/Time&gt;\n\t\t\t\t&lt;Type&gt;navigation&lt;\/Type&gt;\n\t\t\t\t&lt;Name&gt;TestEvent2&lt;\/Name&gt;\n\t\t\t\t&lt;Parameters&gt;\n\t\t\t\t\t&lt;Parameter&gt;\n\t\t\t\t\t\t&lt;Name&gt;Caption&lt;\/Name&gt;\n\t\t\t\t\t\t&lt;Value&gt;Une modernit\u00e9 enfin explor\u00e9e&lt;\/Value&gt;\n\t\t\t\t\t&lt;\/Parameter&gt;\n\t\t\t\t&lt;\/Parameters&gt;\n\t\t\t&lt;\/CuePoint&gt;\n\t&lt;!-- cuepoint 3 --&gt;\n\t\t&lt;CuePoint&gt;\n\t\t\t&lt;Time&gt;10410&lt;\/Time&gt;\n\t\t\t&lt;Type&gt;navigation&lt;\/Type&gt;\n\t\t\t&lt;Name&gt;TestEvent3&lt;\/Name&gt;\n\t\t\t&lt;Parameters&gt;\n\t\t\t\t&lt;Parameter&gt;\n\t\t\t\t\t&lt;Name&gt;Caption&lt;\/Name&gt;\n\t\t\t\t\t&lt;Value&gt;Rio Janeiro, Br\u00e9sil&lt;\/Value&gt;\n\t\t\t\t&lt;\/Parameter&gt;\n\t\t\t&lt;\/Parameters&gt;\n\t\t&lt;\/CuePoint&gt;\n\t&lt;!-- cuepoint 4 --&gt;\n\t\t&lt;CuePoint&gt;\n\t\t\t&lt;Time&gt;13346&lt;\/Time&gt;\n\t\t\t&lt;Type&gt;navigation&lt;\/Type&gt;\n\t\t\t&lt;Name&gt;TestEvent4&lt;\/Name&gt;\n\t\t\t&lt;Parameters&gt;\n\t\t\t\t&lt;Parameter&gt;\n\t\t\t\t\t&lt;Name&gt;Caption&lt;\/Name&gt;\n\t\t\t\t\t&lt;Value&gt;Marcel Ziul V10. Le slogan de TV Globo : Rede Globo &gt; A gente se v\u00ea por aqui&lt;\/Value&gt;\n\t\t\t\t&lt;\/Parameter&gt;\n\t\t\t&lt;\/Parameters&gt;\n\t\t&lt;\/CuePoint&gt;\n\t&lt;!-- cuepoint 5 --&gt;\n\t\t &lt;CuePoint&gt;\n\t\t\t&lt;Time&gt;18618&lt;\/Time&gt;\n\t\t\t&lt;Type&gt;navigation&lt;\/Type&gt;\n\t\t\t&lt;Name&gt;TestEvent5&lt;\/Name&gt;\n\t\t\t&lt;Parameters&gt;\n\t\t\t\t&lt;Parameter&gt;\n\t\t\t\t\t&lt;Name&gt;Caption&lt;\/Name&gt;\n\t\t\t\t\t&lt;Value&gt;Good After Effects Video. Des effets sur la vid\u00e9o comme si il en pleuvait...&lt;\/Value&gt;\n\t\t\t\t&lt;\/Parameter&gt;\n\t\t\t&lt;\/Parameters&gt;\n\t\t&lt;\/CuePoint&gt;\n\t&lt;!-- cuepoint 6 --&gt;\t\n\t\t&lt;CuePoint&gt;\n\t\t&lt;Time&gt;26526&lt;\/Time&gt;\n\t\t&lt;Type&gt;event&lt;\/Type&gt;\n\t\t&lt;Name&gt;TestEvent6&lt;\/Name&gt;\n\t\t&lt;Parameters&gt;\n\t\t\t&lt;Parameter&gt;\n\t\t\t\t&lt;Name&gt;Caption&lt;\/Name&gt;\n\t\t\t\t&lt;Value&gt;Skull, Cr\u00e2ne, une t\u00eate de mort  ?? Nous ne sommes pas loin du P\u00e8re Lachaise \u00e0 Paris&lt;\/Value&gt;\n\t\t\t&lt;\/Parameter&gt;\n\t\t&lt;\/Parameters&gt;\n\t\t&lt;\/CuePoint&gt;\n\t\t&lt;CuePoint&gt;\n\t\t&lt;Time&gt;28895&lt;\/Time&gt;\n\t\t&lt;Type&gt;event&lt;\/Type&gt;\n\t\t&lt;Name&gt;TestEvent7&lt;\/Name&gt;\n\t\t&lt;Parameters&gt;\n\t\t\t&lt;Parameter&gt;\n\t\t\t\t&lt;Name&gt;Caption&lt;\/Name&gt;\n\t\t\t\t&lt;Value&gt;Food, La nourriture ! Portal gastron\u00f3mico Lo Mejor de la Gastronom\u00eda. Gu\u00eda y ranking de restaurantes, grandes platos, productos gastron\u00f3micos y vinos.&lt;\/Value&gt;\n\t\t\t&lt;\/Parameter&gt;\n\t\t&lt;\/Parameters&gt;\n\t\t&lt;\/CuePoint&gt;\n\t&lt;!-- cuepoint 7 --&gt;\n\t\t&lt;CuePoint&gt;\n\t\t&lt;Time&gt;35268&lt;\/Time&gt;\n\t\t&lt;Type&gt;event&lt;\/Type&gt;\n\t\t&lt;Name&gt;TestEvent7&lt;\/Name&gt;\n\t\t&lt;Parameters&gt;\n\t\t\t&lt;Parameter&gt;\n\t\t\t\t&lt;Name&gt;Caption&lt;\/Name&gt;\n\t\t\t\t&lt;Value&gt;MTV, une cha\u00eene musicale \u00e0 la t\u00e9l\u00e9vision ! Seht die wei\u00dfen Streifen auf der B\u00fchne. Checkt die Clips!&lt;\/Value&gt;\n\t\t\t&lt;\/Parameter&gt;\n\t\t&lt;\/Parameters&gt;\n\t\t&lt;\/CuePoint&gt;\n\n\t\t&lt;!-- end list --&gt;\n\t&lt;\/FLVCoreCuePoints&gt;\n\t\n<\/pre>\n<p><b>Le m\u00eame fichier g\u00e9n\u00e9r\u00e9 <code>tags_flash_flvtool2.xml<\/code> depuis la vid\u00e9o <code>best_after_effects_movie_marcel_ziul_flash_tagged.flv<\/code> \u00e0 l&#8217;aide Flvtool2<\/b><\/p>\n<p><code>flvtool2  -Px \/chemin\/vers\/le\/fichier\/best_after_effects_movie_marcel_ziul_flash_tagged.flv &gt; \/chemin\/vers\/le\/fichier\/best_after_effects_movie_marcel_ziul_flash_tagged.xml<\/code><\/p>\n<pre lang=\"xml\" escaped=\"true\">\n\n\t&lt;?xml version=&quot;1.0&quot;?&gt;\n\t&lt;fileset&gt;\n\t  &lt;flv name=&quot;\/Applications\/MAMP\/htdocs\/flowplayer\/example\/OK_best_after_effects_movie_4_meta.flv&quot;&gt;\n\t    &lt;duration&gt;111.833&lt;\/duration&gt;\n\t    &lt;cuePoints&gt;\n\t      &lt;6&gt;\n\t        &lt;name&gt;TestEvent7&lt;\/name&gt;\n\t        &lt;parameters&gt;\n\t          &lt;Caption&gt;Food, La nourriture ! Portal gastron\u00f3mico Lo Mejor de la Gastronom\u00eda. Gu\u00eda y ranking de restaurantes, grandes platos, productos gastron\u00f3micos y vinos.&lt;\/Caption&gt;\n\t        &lt;\/parameters&gt;\n\t        &lt;time&gt;28.895&lt;\/time&gt;\n\t        &lt;type&gt;event&lt;\/type&gt;\n\t      &lt;\/6&gt;\n\t      &lt;7&gt;\n\t        &lt;name&gt;TestEvent8&lt;\/name&gt;\n\t        &lt;parameters&gt;\n\t          &lt;Caption&gt;MTV, une cha\u00eene musicale \u00e0 la t\u00e9l\u00e9vision ! Seht die wei\u00dfen Streifen auf der B\u00fchne. Checkt die Clips!&lt;\/Caption&gt;\n\t        &lt;\/parameters&gt;\n\t        &lt;time&gt;35.268&lt;\/time&gt;\n\t        &lt;type&gt;event&lt;\/type&gt;\n\t      &lt;\/7&gt;\n\t      &lt;8&gt;\n\t        &lt;name&gt;TestEvent9&lt;\/name&gt;\n\t        &lt;parameters&gt;\n\t          &lt;Caption&gt;An it goes and on and on....&lt;\/Caption&gt;\n\t        &lt;\/parameters&gt;\n\t        &lt;time&gt;40&lt;\/time&gt;\n\t        &lt;type&gt;event&lt;\/type&gt;\n\t      &lt;\/8&gt;\n\t      &lt;0&gt;\n\t        &lt;name&gt;TestEvent1&lt;\/name&gt;\n\t        &lt;parameters&gt;\n\t          &lt;Caption&gt;Des l\u00e9gendes en Fran\u00e7ais, en Portugais et en Allemand avec les cuepoints sur une vid\u00e9o.&lt;\/Caption&gt;\n\t        &lt;\/parameters&gt;\n\t        &lt;time&gt;4&lt;\/time&gt;\n\t        &lt;type&gt;navigation&lt;\/type&gt;\n\t      &lt;\/0&gt;\n\t      &lt;1&gt;\n\t        &lt;name&gt;TestEvent2&lt;\/name&gt;\n\t        &lt;parameters&gt;\n\t          &lt;Caption&gt;Une modernit\u00e9 enfin explor\u00e9e&lt;\/Caption&gt;\n\t        &lt;\/parameters&gt;\n\t        &lt;time&gt;7&lt;\/time&gt;\n\t        &lt;type&gt;navigation&lt;\/type&gt;\n\t      &lt;\/1&gt;\n\t      &lt;2&gt;\n\t        &lt;name&gt;TestEvent3&lt;\/name&gt;\n\t        &lt;parameters&gt;\n\t          &lt;Caption&gt;Rio Janeiro, Br\u00e9sil&lt;\/Caption&gt;\n\t        &lt;\/parameters&gt;\n\t        &lt;time&gt;10.41&lt;\/time&gt;\n\t        &lt;type&gt;navigation&lt;\/type&gt;\n\t      &lt;\/2&gt;\n\t      &lt;3&gt;\n\t        &lt;name&gt;TestEvent4&lt;\/name&gt;\n\t        &lt;parameters&gt;\n\t          &lt;Caption&gt;Marcel Ziul V10. Le slogan de TV Globo : Rede Globo &gt; A gente se v\u00ea por aqui&lt;\/Caption&gt;\n\t        &lt;\/parameters&gt;\n\t        &lt;time&gt;13.346&lt;\/time&gt;\n\t        &lt;type&gt;navigation&lt;\/type&gt;\n\t      &lt;\/3&gt;\n\t      &lt;4&gt;\n\t        &lt;name&gt;TestEvent5&lt;\/name&gt;\n\t        &lt;parameters&gt;\n\t          &lt;Caption&gt;Good After Effects Video. Des effets sur la vid\u00e9o comme si il en pleuvait...&lt;\/Caption&gt;\n\t        &lt;\/parameters&gt;\n\t        &lt;time&gt;18.618&lt;\/time&gt;\n\t        &lt;type&gt;navigation&lt;\/type&gt;\n\t      &lt;\/4&gt;\n\t      &lt;5&gt;\n\t        &lt;name&gt;TestEvent6&lt;\/name&gt;\n\t        &lt;parameters&gt;\n\t          &lt;Caption&gt;Skull, Cr\u00e2ne, une t\u00eate de mort  ?? Nous ne sommes pas loin du P\u00e8re Lachaise \u00e0 Paris&lt;\/Caption&gt;\n\t        &lt;\/parameters&gt;\n\t        &lt;time&gt;26.526&lt;\/time&gt;\n\t        &lt;type&gt;event&lt;\/type&gt;\n\t      &lt;\/5&gt;\n\t    &lt;\/cuePoints&gt;\n\t    &lt;audiodatarate&gt;256&lt;\/audiodatarate&gt;\n\t    &lt;framerate&gt;30&lt;\/framerate&gt;\n\t    &lt;canSeekToEnd&gt;true&lt;\/canSeekToEnd&gt;\n\t    &lt;videocodecid&gt;4&lt;\/videocodecid&gt;\n\t    &lt;audiodelay&gt;0.027&lt;\/audiodelay&gt;\n\t    &lt;height&gt;480&lt;\/height&gt;\n\t    &lt;audiocodecid&gt;2&lt;\/audiocodecid&gt;\n\t    &lt;videodatarate&gt;1600&lt;\/videodatarate&gt;\n\t    &lt;width&gt;720&lt;\/width&gt;\n\t  &lt;\/flv&gt;\n\t&lt;\/fileset&gt;\n\t\n\n<\/pre>\n<p><b>Le fichier <code>flowplayer_metadata_video.html<\/code> qui charge le player et permet l&#8217;affichage des cuepoints notamment du param\u00e8tre sp\u00e9cifique <code>p.parameters.Caption<\/code>.<\/b><\/p>\n<pre lang=\"html\" escaped=\"true\">\n\t\n\t&lt;!DOCTYPE html PUBLIC &quot;-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN&quot;\n\t   &quot;http:\/\/www.w3.org\/TR\/html4\/loose.dtd&quot;&gt;\n\n\t&lt;html lang=&quot;en&quot;&gt;\n\t&lt;head&gt;\n\t\t&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text\/html; charset=utf-8&quot;&gt;\n\t\t&lt;title&gt;flowplayer - cuepoints embedded&lt;\/title&gt;\n\t\t&lt;meta name=&quot;author&quot; content=&quot;hecube.net&quot;&gt;\n\t\t&lt;script type=&quot;text\/javascript&quot; src=&quot;flowplayer-3.2.0.min.js&quot;&gt;&lt;\/script&gt;\n\n\t\t&lt;style&gt;\n\t\t\/* container has a background image *\/\n\n\t\ta.player {\t\n\t\t\tdisplay:block;\n\t\t\twidth:500px;\n\t\t\theight:340px;\n\t\t\ttext-align:center;\n\t\t\tcolor:#fff;\n\t\t\ttext-decoration:none;\n\t\t\tcursor:pointer;\n\t\t\t-moz-box-shadow:0 0 40px rgba(100, 118, 173, 0.5);\n\t\t}\n\n\t\ta.player:hover {\n\t\t\tbackground:-moz-linear-gradient(center top, rgba(73, 122, 173, 0.898), rgba(6, 6, 6, 0.898));\t\n\t\t}\n\n\t\t\/* splash image *\/\n\t\ta.player img {\n\t\t\tmargin-top:125px;\n\t\t\tborder:0;\t\n\t\t}\n\n\n\t\t#info {\n\t\t\twidth:410px;\n\t\t\tpadding:8px;\n\t\t\tborder:1px solid #ccc;\n\t\t\tbackground-color:#efefef;\n\t\t\tfont:16px &quot;bitstream vera sans&quot;, &quot;verdana&quot;;\n\t\t\tmargin-left:125px;\n\t\t}\n\t\t.player {\n\t\t\twidth:410px;\n\t\t\tpadding:8px;\n\t\t\tborder:1px solid #ccc;\n\t\t\tbackground-color:#efefef;\n\t\t\tfont:16px &quot;bitstream vera sans&quot;, &quot;verdana&quot;;\n\t\t\tmargin-left:125px;\n\t\t}\n\t\t&lt;\/style&gt;\n\t&lt;\/head&gt;\n\t&lt;body&gt;\n\n\t\t&lt;div class=&quot;player&quot;&gt;\n\t\t\t&lt;a  style=&quot;display:block;width:720px;height:480px&quot; id=&quot;player&quot;&gt; \n\t\t&lt;\/a&gt; \n\t\t&lt;\/div&gt;\n\n\t\t&lt;script&gt;\n\n\t\t\/*\n\n\n\t\t*\/\n\n\t\t\tflowplayer(&quot;player&quot;, &quot;..\/flowplayer-3.2.0.swf&quot;, {\n\n\t\t\t\tclip: {\n\n\t\t\t\t\turl: &#x27;best_after_effects_movie_marcel_ziul_flash_tagged.flv&#x27;,\n\n\t\t\t\t\t\/\/ you can do different things on each cuepoint by checking the time\n\t\t\t\t\tonCuepoint: function(clip, p) {\n\n\t\t\t\t\t\tdocument.getElementById(&quot;info&quot;).innerHTML = &quot;time : &quot; +p.time+ &quot;, name: &quot; + p.name+&quot;, type: &quot; + p.type+&quot;, parameter : &quot; +p.parameters.Caption+ &quot; &quot;;\n\n\n\n\n\n\n\n\n\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t});\n\n\t\t&lt;\/script&gt;\n\n\t\t&lt;div id=&quot;info&quot; class=&quot;box info&quot;&gt;\n\t\t\tL&#x27;espace  d&#x27;affichage des cuepoints est ici\n\t\t&lt;\/div&gt;\n\n\t&lt;\/body&gt;\n\t&lt;\/html&gt;\n\t\n\t\n<\/pre>\n<h4>Conclusion<\/h4>\n<p><b>Il est plus astucieux de lire un xml avec des &#8220;cuepoints&#8221; via de l&#8217;actionscript que de les int\u00e9grer c&#8217;est \u00e0 dire les &#8220;embedded&#8221;. Ainsi, vous pourrez lire des fichiers au format <code>MP4<\/code> (H.264) ou <code>FLV<\/code> selon le protocole qui vous convient, sans faire subir aucune &#8220;alt\u00e9ration&#8221;, c&#8217;est \u00e0 dire l&#8217;injection de metadatas, \u00e0 vos fichiers vid\u00e9os. Ainsi, la conclusion est-elle d&#8217;\u00e9viter les cuepoints en embedded !!! D&#8217;un point de vue purement pratique, il existe une r\u00e9elle difficult\u00e9 \u00e0 faire fonctionner <code>flvtool2<\/code>. Par ailleurs, le programme <code>Adobe Media Encoder CS4<\/code> fonctionne mais produit des fichiers diff\u00e9rents de <code>flvtool2<\/code>.<\/b><\/p>\n<h2>En savoir plus<\/h2>\n<ul>\n<li>Le site officiel &#8211; Flowplayer &#8211; Flash Video Player for the Web<br \/>\n\t<a href=\"http:\/\/flowplayer.org\/\" target=\"_blank\">http:\/\/flowplayer.org\/<\/a><\/li>\n<li>Le site officiel &#8211; FLVTool2 \u2013 Flash video and meta data manipulation<br \/>\n\t<a href=\"http:\/\/www.inlet-media.de\/flvtool2\/\" target=\"_blank\">http:\/\/www.inlet-media.de\/flvtool2\/<\/a><\/li>\n<li>Le site officiel &#8211; FLVKnife \u2013 un v\u00e9ritable couteau suisse pour les <code>.flv<\/code> (PC uniquement)<br \/>\n\t<a href=\"http:\/\/soenkerohde.com\/software\/flv-knife\/\" target=\"_blank\">http:\/\/soenkerohde.com\/software\/flv-knife\/<\/a><\/li>\n<li>Jouer avec des cuepoints embedded dans une vid\u00e9o lue par le flowplayer <br \/>\n\t\t<a href=\"http:\/\/flowplayer.org\/demos\/events\/embedded-cuepoints.html\" target=\"_blank\">http:\/\/flowplayer.org\/demos\/events\/embedded-cuepoints.html<\/a><\/li>\n<li>Un article sur &#8220;How to create and use Flash video metadata to add cue-points with flvtool2&#8221;<br \/>\n\t\t\t<a href=\"http:\/\/www.ioncannon.net\/web-design\/109\/metadata-cuepoint-flash-video-flvtool\/\" target=\"_blank\">http:\/\/www.ioncannon.net\/web-design\/109\/metadata-cuepoint-flash-video-flvtool\/<\/a><\/li>\n<li>Un article sur &#8220;Flvtool2 &#8211; Flash Video (flv) Metadata \/ Cue Point Injector and Cutting Tool | Brooks Andrus&#8221;<br \/>\n\t\t\t\t<a href=\"http:\/\/www.brooksandrus.com\/blog\/2007\/03\/18\/flvtool2-flash-video-flv-metadata-cue-point-injector-and-cutting-tool\/\" target=\"_blank\">http:\/\/www.brooksandrus.com\/blog\/2007\/03\/18\/flvtool2-flash-video-flv-metadata-cue-point-injector-and-cutting-tool\/<\/a><\/li>\n<li>Un article sur &#8220;FLVTool2 Usage Examples Open Source Flash&#8221;<br \/>\n\t\t\t\t\t<a href=\"http:\/\/osflash.org.\/flvtool2-usageexamples\" target=\"_blank\">http:\/\/osflash.org.\/flvtool2-usageexamples<\/a><\/li>\n<li>Un article sur &#8220;flvtool2 + flv knife &laquo;  Interactive Section&#8221;<br \/>\n\t\t\t\t\t\t<a href=\"http:\/\/interactivesection.wordpress.com\/2007\/10\/30\/flvtool2\/\" target=\"_blank\">http:\/\/interactivesection.wordpress.com\/2007\/10\/30\/flvtool2\/<\/a><\/li>\n<li>Un article sur &#8220;Web video template: Showcase website for personal video&#8221;<br \/>\n\t\t\t\t\t\t\t<a href=\"http:\/\/www.adobe.com\/devnet\/flash\/articles\/vidtemplate_vidshowcase_05.html\" target=\"_blank\">http:\/\/www.adobe.com\/devnet\/flash\/articles\/vidtemplate_vidshowcase_05.html<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>La vid\u00e9o sur Internet est depuis longtemps &#8220;the big thing&#8221;. A ce jour et en attendant l&#8217;HTML5, pour jouer de la vid\u00e9o, vous \u00eates oblig\u00e9(e)&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2010\/05\/flowplayer-video-player-utiliser-le-player-flowplayer\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">Flowplayer, vid\u00e9o, player &#8211; Utiliser  le player Flowplayer<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":2956,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"Flowplayer, vid\u00e9o, player \u2013 Utiliser le player Flowplayer pour des vid\u00e9os performantes. Comparaison des outils et r\u00e9sultats attendus.","bf_ai_og_title":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1,3443,3444,3447,3449,3451,3435],"tags":[166,3493,256,2228,323,84,226,324,146],"class_list":["post-1539","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-miscellaneous-other","category-multimedia-video","category-programming-databases","category-technology-trends","category-tutorials-how-to","category-web-design-front-end","category-web-development","tag-actionscript","tag-clip","tag-flash","tag-flex","tag-flowplayer","tag-flv","tag-javascript","tag-mp4","tag-videos"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-oP","jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/1539","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=1539"}],"version-history":[{"count":1,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/1539\/revisions"}],"predecessor-version":[{"id":13255,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/1539\/revisions\/13255"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=1539"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=1539"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=1539"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}