{"id":1299,"date":"2010-01-29T18:27:01","date_gmt":"2010-01-29T17:27:01","guid":{"rendered":"http:\/\/flaven.fr\/?p=1299"},"modified":"2013-09-25T10:15:15","modified_gmt":"2013-09-25T08:15:15","slug":"jw-player-flash-javascript-swfobject-utiliser-le-jw-player-a-laide-de-swfobject","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2010\/01\/jw-player-flash-javascript-swfobject-utiliser-le-jw-player-a-laide-de-swfobject\/","title":{"rendered":"JW Player, Flash, Javascript, SWFObject &#8211; Utiliser le JW Player \u00e0 l&#8217;aide de SWFObject"},"content":{"rendered":"<p><!-- JW Player, Flash, Javascript, SWFObject - Utiliser le JW Player \u00e0 l'aide de SWFObject --><br \/>\n<!--  LongTail, Image, Playlist, JW Player, FLV, Javascript, Vid\u00e9o; SWFObject --><br \/>\nLe JW FLV Player de LongTail Video est un player extr\u00eamement populaire car gratuit et tr\u00e8s facile \u00e0 mettre en place. Ce player existe en version gratuite d\u00e9j\u00e0 tr\u00e8s aboutie.<!--more--> Cette version gratuite vous permettra notamment la diffusion de vid\u00e9os \u00e0 diff\u00e9rents formats (FLV, MP4 encod\u00e9 avec le codec H.264), l&#8217;utilisation de &#8220;playlist&#8221; l\u00e0 aussi de formats diff\u00e9rents (ASX, RSS&#8230; etc) et enfin sous diff\u00e9rents protocoles (RMTP, HTTP&#8230;).<\/p>\n<p><b>La baseline commrcial du JW FLV Player <\/b><\/p>\n<blockquote><p>\nThe JW Player\u2122 is the Internet&#8217;s most popular and flexible media player. It supports playback of any format the Adobe Flash Player can handle (FLV, H.264, MP4, MP3, AAC, JPG, PNG and GIF). It also supports various streaming and playlist formats (including RMTP, HTTP, live streaming and more), a wide range of flashvar settings and an extensive JavaScript API.\n<\/p><\/blockquote>\n<p>Il existe une version payante du JW FLV Player. L&#8217;achat de la licence permet en autre de faire disparaitre l&#8217;agen\u00e7ante incrustation du logo <code>JW<\/code> et son remplacement \u00e0 la vol\u00e9e vos vid\u00e9os avec ce que l&#8217;on nomme un <code>bug antenne<\/code>, c&#8217;est \u00e0 dire votre propre logo. L&#8217;achat de la licence offre la possibilit\u00e9 de changer la skin du player JW.<\/p>\n<blockquote>\n<ul>\n<li>logo.file (undefined): location of an external jpg, png or gif image which replaces the watermark image (Licensed players only)<\/li>\n<li>logo.link (undefined): link to direct to when the watermark image is clicked on (Licensed players only)<\/li>\n<li>logo.hide (true): When set to true, the logo will auto-hide (Licensed players only)<\/li>\n<\/ul>\n<\/blockquote>\n<h2>La m\u00e9thode SWFObject<\/h2>\n<p>swfobject est une m\u00e9thode de chargement de contenu flash plut\u00f4t facile \u00e0 mettre en place pour se faire il ne faut charger qu&#8217;un seul fichier.<\/p>\n<blockquote><p>\nswfobject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file\n<\/p><\/blockquote>\n<p><i>Source : <a href=\"http:\/\/code.google.com\/p\/swfobject\/\" target=\"_blank\">http:\/\/code.google.com\/p\/swfobject\/<\/a><\/i><\/p>\n<h4>Un exemple du SETUP WIZARD<\/h4>\n<p>Le chargement tout simple d&#8217;une vid\u00e9o direct dans le player \u00e0 laide de SWFObject avec une l\u00e9gere personnalisation des couleurs.<\/p>\n<pre lang=\"html\" escaped=\"true\">\r\n\t\r\n&lt;script type='text\/javascript' src='swfobject.js'&gt;&lt;\/script&gt;\r\n&lt;div id='mediaspace'&gt;C'est ici que s'ins\u00e8re le player&lt;\/div&gt;\r\n&lt;script type='text\/javascript'&gt;\r\n  var so = new SWFObject('player.swf','mpl','470','320','9');\r\n  so.addParam('allowfullscreen','true');\r\n  so.addParam('allowscriptaccess','always');\r\n  so.addParam('wmode','opaque');\r\n\t\/* La vid\u00e9o par d\u00e9faut propos\u00e9 par le site de longtailvideo.com *\/\r\n  so.addVariable('file','http:\/\/content.longtailvideo.com\/videos\/flvplayer.flv');\r\n  so.addVariable('backcolor','666666');\r\n  so.addVariable('frontcolor','000099');\r\n  so.addVariable('lightcolor','000099');\r\n  so.addVariable('screencolor','0000CC');\r\n  so.addVariable('autostart','true');\r\n  so.write('mediaspace');\r\n&lt;\/script&gt;\r\n\r\n<\/pre>\n<p><b>Le rendu du code ci-dessus<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/01\/jw_player_loading_1.jpg\" alt=\"JW Player, Flash, Javascript, SWFObject - Utiliser le JW Player \u00e0 l'aide de SWFObject\" width=\"500\" height=\"265\" \/><\/p>\n<p><i>Source : <a href=\"http:\/\/www.longtailvideo.com\/support\/jw-player-setup-wizard\" target=\"_blank\">http:\/\/www.longtailvideo.com\/support\/jw-player-setup-wizard<\/a><\/i><\/p>\n<h4>Jouer une playlist au sein de JW player<\/h4>\n<p>JW player est en mesure de charger les principaux formats de playlist habituels sur le Web. Voici les principaux formats dont vous disposez qui sont tout \u00e0 la base des d\u00e9rives du XML avec chacune des nuances. Les fichiers de vos playlists aurront constamment comme extension <code>.xml<\/code><\/p>\n<ul>\n<li>Un flux ASX, c&#8217;est la playlist propre au Windows Media Player.\n<li>Un fil ATOM, bien connu des utilisateurs de WordPress\n<li>Un fil RSS de type iTunes et Media (irss et mrss)\n<li>Un fil SMIL, bien connu des utilisateurs de Quicktime\n<li>XSPF feeds : un format assez classique qui est utilis\u00e9 par d&#8217;autre player gratuit notamment le player audio de mp3 <code>XSPF Web Music Player<\/code> fait en Flash (<a href=\"http:\/\/musicplayer.sourceforge.net\/\" target=\"_blank\">http:\/\/musicplayer.sourceforge.net\/<\/a>)\n<\/ul>\n<pre lang=\"html\" escaped=\"true\">\r\n\t&lt;script type='text\/javascript' src='swfobject.js'&gt;&lt;\/script&gt;\r\n\t&lt;!-- Le js va \u00e9crire dans le div nomm\u00e9 mediaspace  --&gt;\r\n\t&lt;div id='mediaspace'&gt;C'est ici que s'ins\u00e8re le player&lt;\/div&gt;\r\n\t&lt;script type=\"text\/javascript\"&gt;\r\n\t var flashvars = {};\r\n\t flashvars.file = \"my_playlist_2.xml\";\r\n\t flashvars.width = \"300\";\r\n\t flashvars.height = \"328\";\r\n\t flashvars.displayheight = \"225\";\r\n\t flashvars.backcolor = \"0x111111\";\r\n\t flashvars.frontcolor = \"0xdddddd\";\r\n\t flashvars.lightcolor = \"0x99cc00\";\r\n\t var params = {};\r\n\t params.loop = \"false\";\r\n\t params.quality = \"best\";\r\n\t params.wmode = \"transparent\";\r\n\t params.allowfullscreen = \"true\";\r\n\t params.allowscriptaccess = \"always\";\r\n\t var attributes = {};\r\n\t attributes.id = \"movieId\";\r\n\tswfobject.embedSWF(\"mediaplayer.swf\", \"mediaspace\", \"300\", \"328\", \"9.0.124\", \"expressInstall.swf\", flashvars, params, attributes);\r\n\t&lt;\/script&gt;\t\r\n<\/pre>\n<p><b>Les vid\u00e9os de la playlist type <code>XSPF<\/code> sont d\u00e9livr\u00e9s par un serveur en local accessible via <code>http:\/\/127.0.0.1\/97_JW_PLAYER\/_m_2.flv<\/code> en <code>http streaming<\/code> pour la vid\u00e9o <code>_m_2.flv<\/code>.<\/b><\/p>\n<pre lang=\"xml\" escaped=\"true\">\r\n&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;\r\n&lt;playlist version=&quot;1&quot; xmlns=&quot;http:\/\/xspf.org\/ns\/0\/&quot;&gt;\r\n &lt;trackList&gt;\r\n   &lt;track&gt;\r\n    &lt;title&gt;Titre Film 1&lt;\/title&gt;\r\n     &lt;creator&gt;hecube.net&lt;\/creator&gt;\r\n       &lt;location&gt;http:\/\/127.0.0.1\/97_JW_PLAYER\/_m_2.flv&lt;\/location&gt;\r\n\t &lt;info&gt;http:\/\/www.hecube.net&lt;\/info&gt;\r\n   &lt;\/track&gt;\r\n   &lt;track&gt;\r\n   &lt;title&gt;Titre Film 2&lt;\/title&gt;\r\n     &lt;creator&gt;Hemedia.net&lt;\/creator&gt;\r\n\t&lt;location&gt;http:\/\/127.0.0.1\/97_JW_PLAYER\/_m_3.flv&lt;\/location&gt;\r\n\t  &lt;info&gt;http:\/\/social.hecube.net&lt;\/info&gt;\r\n   &lt;\/track&gt;\r\n &lt;\/trackList&gt;\r\n&lt;\/playlist&gt;\r\n<\/pre>\n<p><i>Source : <a href=\"http:\/\/www.longtailvideo.com\/support\/tutorials\/Setting-Up-A-Playlist\" target=\"_blank\">http:\/\/www.longtailvideo.com\/support\/tutorials\/Setting-Up-A-Playlist<\/a><\/i><\/p>\n<p><b>Le rendu du code ci-dessus<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/01\/jw_player_loading_2.jpg\" alt=\"JW Player, Flash, Javascript, SWFObject - Utiliser le JW Player \u00e0 l'aide de SWFObject\" width=\"500\" height=\"265\" \/><br \/>\n<b>En le chargeant directement depuis le serveur en local, on \u00e9vite l&#8217;affichage de cette fen\u00eatre syst\u00e8me de mise ne garde. Toutefois si vous cliquez sur OK, vous aurez la possibilit\u00e9 de voir la playlist se lancer car vous autoriser une exception temporaire de s\u00e9curit\u00e9.<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/01\/jw_player_loading_3.jpg\" alt=\"JW Player, Flash, Javascript, SWFObject - Utiliser le JW Player \u00e0 l'aide de SWFObject\" width=\"500\" height=\"265\" \/><\/p>\n<h2>En savoir plus<\/h2>\n<ul>\n<li>Le site officiel de JW FLV Player<br \/>\n\t\t<a href=\"http:\/\/www.longtailvideo.com\/\" target=\"_blank\">http:\/\/www.longtailvideo.com\/<\/a><\/li>\n<li>Le wizard ou assistant pour vous procurer le code  javascript SWFObject ad\u00e9quat pour charger le JW FLV Player<br \/>\n\t\t\t<a href=\"http:\/\/www.longtailvideo.com\/support\/jw-player-setup-wizard\" target=\"_blank\">http:\/\/www.longtailvideo.com\/support\/jw-player-setup-wizard<\/a><\/li>\n<li>La bible du SWFObject pour la d\u00e9tection et l&#8217;embed du Flash Player<br \/>\n\t\t\t\t<a href=\"http:\/\/blog.deconcept.com\/swfobject\/\" target=\"_blank\">http:\/\/blog.deconcept.com\/swfobject\/<\/a><\/li>\n<li>Le site du projet officiel de SWFObject<br \/>\n<a href=\"http:\/\/code.google.com\/p\/swfobject\/\" target=\"_blank\">http:\/\/code.google.com\/p\/swfobject\/<\/a><\/li>\n<li>Les tutoriaux sur les multiples suages de JW player<br \/>\n\t\t\t<a href=\"http:\/\/www.longtailvideo.com\/support\/tutorials\" target=\"_blank\">http:\/\/www.longtailvideo.com\/support\/tutorials<\/a><\/li>\n<li>Un excellent article sur la playlist et son positionnement \/ &#8220;Using the JW FLV Player Part 1: Creating a Playlist with Commercials&#8221;<br \/>\n\t\t\t<a href=\"http:\/\/labs.influxis.com\/?p=47\" target=\"_blank\">http:\/\/labs.influxis.com\/?p=47<\/a><\/li>\n<li>Les valeurs disponibles (flashvars) pour charger le JW FLV Player et le personnaliser notamment.<br \/>\n\t\t\t\t<a href=\"http:\/\/developer.longtailvideo.com\/trac\/wiki\/Player5FlashVars\" target=\"_blank\">http:\/\/developer.longtailvideo.com\/trac\/wiki\/Player5FlashVars<\/a><\/li>\n<li>Du bonne usage du fichier <code>crossdomain.xml<\/code><br \/>\n\t\t\t\t\t<a href=\"http:\/\/www.adobe.com\/devnet\/articles\/crossdomain_policy_file_spec.html\" target=\"_blank\">http:\/\/www.adobe.com\/devnet\/articles\/crossdomain_policy_file_spec.html<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Le JW FLV Player de LongTail Video est un player extr\u00eamement populaire car gratuit et tr\u00e8s facile \u00e0 mettre en place. Ce player existe en&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2010\/01\/jw-player-flash-javascript-swfobject-utiliser-le-jw-player-a-laide-de-swfobject\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">JW Player, Flash, Javascript, SWFObject &#8211; Utiliser le JW Player \u00e0 l&#8217;aide de SWFObject<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":9479,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"Utilisez JW Player avec SWFObject pour diffuser vid\u00e9os FLV, MP4, et playlists ASX, RSS. Int\u00e9grez facilement via Javascript et Flash.","bf_ai_og_title":"JW Player avec SWFObject","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":[3443,3444,3449,3435],"tags":[84,285,226,286,287,288,289],"class_list":["post-1299","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-multimedia-video","category-programming-databases","category-tutorials-how-to","category-web-development","tag-flv","tag-image","tag-javascript","tag-jw-player","tag-longtail","tag-playlist","tag-video-swfobject"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-kX","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/01\/jw_player_loading_b_2_g_bf.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/1299","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=1299"}],"version-history":[{"count":1,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/1299\/revisions"}],"predecessor-version":[{"id":9480,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/1299\/revisions\/9480"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/9479"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=1299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=1299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=1299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}