{"id":9019,"date":"2010-09-20T12:37:59","date_gmt":"2010-09-20T10:37:59","guid":{"rendered":"http:\/\/flaven.fr\/?p=9019"},"modified":"2026-09-16T10:08:55","modified_gmt":"2026-09-16T08:08:55","slug":"html5-player-demo-html5-a-laide-du-player-3wdoc","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2010\/09\/html5-player-demo-html5-a-laide-du-player-3wdoc\/","title":{"rendered":"HTML5, Player \u2013 Demo HTML5 \u00e0 l\u2019aide du player 3WDOC"},"content":{"rendered":"<p><!-- HTML5, Player - Demo HTML5 \u00e0 l'aide du player 3WDOC --><br \/>\n<!--  HTML5, H.264, google, Ogg Vorbi, video, intercaction, player, narration, ipad, iphone, flash, Development, Animation, Photos, Vid\u00e9os, Texte, D\u00e9veloppement --><\/p>\n<p><a title=\"HTML5, Player - Demo HTML5 \u00e0 l'aide du player 3WDOC\" class=\"bigpic\" href=\"#\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_demo_b_3.jpg\" width=\"600\" height=\"235\" alt=\"HTML5, Demo - D\u00e9monstrations HTML5\" \/><\/a><\/p>\n<p>3WDOC vient de publier un article qui vante les m\u00e9rites de l&#8217;HTML5, on se devait donc de produire quelques d\u00e9monstrations qui attestent de la v\u00e9racit\u00e9 de nos dires sur le potentiel de l&#8217;HTML5 comme concurrent viable \u00e0 Flash et technologie alternative pour la cr\u00e9ation de webdocumentaire.<!--more--><\/p>\n<p>C&#8217;est aujourd&#8217;hui chose faite ! <\/p>\n<blockquote><p><strong><br \/>\nCette demo n&#8217;est actuellement plus disponible. Nous vous invitons \u00e0 d\u00e9couvrir les autres d\u00e9mos disponibles via la page DEMOS de ce blog.<br \/>\n<br \/><a href=\"https:\/\/flaven.fr\/demos\/\">http:\/\/blog.3wdoc.com\/fr\/demos\/<\/a><\/strong><\/p><\/blockquote>\n<p>On vous offre une d\u00e9monstration d&#8217;interaction et de narration, sans pr\u00e9tention, qui donne un aper\u00e7u des capacit\u00e9s de l&#8217;HTML5. C&#8217;est une r\u00e9alisation &#8220;fait maison&#8221; gr\u00e2ce aux bons soins de Jean Grandcl\u00e9ment Chaffy et \u00e0 la t\u00e9nacit\u00e9 de notre \u00e9quipe de d\u00e9veloppement. On vous laisse d\u00e9couvrir notre player en faisant notre le lyrisme d&#8217;un Dailymotion qui sans coup f\u00e9rir annonce son player HTML5 avec le slogan <b>Bienvenue dans le futur !<\/b><\/p>\n<h2>Le fonctionnement du player 3WDOC<\/h2>\n<p>Le player 3WDOC fonctionne sur les plates-formes suivantes MAC et PC. Voici, dans le d\u00e9tail, les combinaisons de plates-formes et de navigateurs sur lequelles le player 3WDOC a \u00e9t\u00e9 test\u00e9.<\/p>\n<h4>Pour Mac<\/h4>\n<p>Le 3WDOC player fonctionne sous les navigateurs suivants :<\/p>\n<ul>\n<li>Safari Version 5.0.2<\/li>\n<li>Firefox 3.5 +<\/li>\n<li>Opera 10.6 +<\/li>\n<li>Chrome depuis la premi\u00e8re version&#8230;<\/li>\n<\/ul>\n<h4>Pour PC<\/h4>\n<p>Une d\u00e9tection se fera automatiquement afin que votre navigateur Internet Explorer t\u00e9l\u00e9charge et installe le <code>Google Chrome Frame (aka, GCF)<\/code>. En effet, ce framework est n\u00e9cessaire pour que Internet Explorer puisse interpr\u00e9ter du HTML5, en attendant la version 9 de Internet Explorer !<\/p>\n<p><b>Cette installation du <code>Google Chrome Frame (aka, GCF)<\/code> est assez similaire \u00e0 une installation du plugin Flash !<\/b><br \/>\n<i>Source : <a href=\"http:\/\/www.chromium.org\/chromium-projects\" target=\"_blank\">http:\/\/www.chromium.org\/chromium-projects<\/a><\/i><\/p>\n<p>Le 3WDOC player fonctionne sous les navigateurs suivants :<\/p>\n<ul>\n<li>Internet Explorer + Google Chrome Frame (GCF) de la version 6 \u00e0 8<\/li>\n<li>Firefox 3.5 +<\/li>\n<li>Opera 10.5 +<\/li>\n<li>Chrome depuis la premi\u00e8re version&#8230;<\/li>\n<\/ul>\n<p><b>Installer sous IE, le Google Chrome Frame (GCF)<\/b><br \/>\n<a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_demo_GCF_1.jpg\" title=\"Copyright\u00a9 3wdoc.com\" class=\"aligncenter\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_demo_GCF_1-300x186.jpg\"  alt=\"HTML5, Player \u2013 Demo HTML5 \u00e0 l\u2019aide du player 3WDOC\" width=\"300\" height=\"186\" class=\"aligncenter size-medium\" \/><\/a><\/p>\n<p><a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_demo_GCF_2.jpg\" title=\"Copyright\u00a9 3wdoc.com\" class=\"aligncenter\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_demo_GCF_2-300x186.jpg\"  alt=\"HTML5, Player \u2013 Demo HTML5 \u00e0 l\u2019aide du player 3WDOC\" width=\"300\" height=\"186\" class=\"aligncenter size-medium\" \/><\/a><\/p>\n<h2>Encoder les vid\u00e9os pour le player 3WDOC<\/h2>\n<p>Toutes les vid\u00e9os disponibles dans la d\u00e9monstration ont \u00e9t\u00e9 faites sur MAC.<br \/>\nLes vid\u00e9os au format <code>.ogg<\/code> ont \u00e9t\u00e9 faites \u00e0 l&#8217;aide <b>VLC Version 1.1.3<\/b><br \/>\nLes vid\u00e9os au format <code>.mp4<\/code> ont \u00e9t\u00e9 faites \u00e0 l&#8217;aide <b>QuickTime 7 Pro<\/b><\/p>\n<p><b>Si vous \u00eates sous Mac OS X Snow Leopard, QuickTime 7 est d\u00e9j\u00e0 install\u00e9. Il vous suffira de l&#8217;ouvrir et d&#8217;activer la licence qu&#8217;il faudra avoir acheter pr\u00e9alablement sur apple <code>30,00 &euro;<\/code>. Le player QuickTime 7 se trouve <code>Applications\/Utilities\/<\/code>.<\/b><br \/>\n<i>Source : QuickTime 7 Pro &#8211; http:\/\/www.apple.com\/fr\/quicktime\/download\/<\/i><\/p>\n<h4>L&#8217;encodage en <code>.MP4<\/code><\/h4>\n<p>Voil\u00e0 la s\u00e9quence pour encoder un fichier quicktime en MP4.<\/p>\n<p><b>Pour assurer la meilleure qualit\u00e9 possible de votre vid\u00e9o avant un encodage en <code>.mp4<\/code>, ll vaut mieux d\u00e9sentrelacer votre source vid\u00e9o <\/b><br \/>\n<a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_QT_desinterlaced_3.jpg\" title=\"Copyright\u00a9 3wdoc.com\" class=\"aligncenter\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_QT_desinterlaced_3-300x186.jpg\"  alt=\"HTML5, Player \u2013 Demo HTML5 \u00e0 l\u2019aide du player 3WDOC\" width=\"300\" height=\"186\" class=\"aligncenter size-medium wp-image-1319\" \/><\/a><\/p>\n<p><b>Exporter au format <code>.mp4<\/code><\/b><br \/>\n<a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_QT_export_1.jpg\" title=\"Copyright\u00a9 3wdoc.com\" class=\"aligncenter\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_QT_export_1-300x186.jpg\"  alt=\"HTML5, Player \u2013 Demo HTML5 \u00e0 l\u2019aide du player 3WDOC\" width=\"300\" height=\"186\" class=\"aligncenter size-medium\" \/><\/a><\/p>\n<p><b>Les param\u00e8tres vid\u00e9o du format <code>.mp4<\/code><\/b><br \/>\n<a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_QT_video_mp4_4.jpg\" title=\"Copyright\u00a9 3wdoc.com\" class=\"aligncenter\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_QT_video_mp4_4-300x186.jpg\"  alt=\"HTML5, Player \u2013 Demo HTML5 \u00e0 l\u2019aide du player 3WDOC\" width=\"300\" height=\"186\" class=\"aligncenter size-medium\" \/><\/a><\/p>\n<p><b>Les param\u00e8tres audio du format <code>.mp4<\/code><\/b><br \/>\n<a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_QT_audio_mp4_4.jpg\" title=\"Copyright\u00a9 3wdoc.com\" class=\"aligncenter\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_QT_audio_mp4_4-300x186.jpg\"  alt=\"HTML5, Player \u2013 Demo HTML5 \u00e0 l\u2019aide du player 3WDOC\" width=\"300\" height=\"186\" class=\"aligncenter size-medium\" \/><\/a><\/p>\n<h4>L&#8217;encodage en <code>.OGG<\/code><\/h4>\n<p>Voil\u00e0 la s\u00e9quence pour encoder un fichier quicktime en OGG. Pour se faire on utilise la toute derni\u00e8re version de VLC.<\/p>\n<p><b>1. Choisir l&#8217;assistant de diffusion et de transcodage<\/b><br \/>\n<a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_ogg_1.jpg\" title=\"Copyright\u00a9 3wdoc.com\" class=\"aligncenter\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_ogg_1-300x186.jpg\"  alt=\"HTML5, Player \u2013 Demo HTML5 \u00e0 l\u2019aide du player 3WDOC\" width=\"300\" height=\"186\" class=\"aligncenter size-medium\" \/><\/a><\/p>\n<p><b>2. D\u00e9finir les options de transcodage<\/b><br \/>\n<a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_ogg_2.jpg\" title=\"Copyright\u00a9 3wdoc.com\" class=\"aligncenter\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_ogg_2-300x186.jpg\"  alt=\"HTML5, Player \u2013 Demo HTML5 \u00e0 l\u2019aide du player 3WDOC\" width=\"300\" height=\"186\" class=\"aligncenter size-medium\" \/><\/a><\/p>\n<p><b>3. Choisir l&#8217;entr\u00e9e, la source vid\u00e9o<\/b><br \/>\n<a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_ogg_3.jpg\" title=\"Copyright\u00a9 3wdoc.com\" class=\"aligncenter\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_ogg_3-300x186.jpg\"  alt=\"HTML5, Player \u2013 Demo HTML5 \u00e0 l\u2019aide du player 3WDOC\" width=\"300\" height=\"186\" class=\"aligncenter size-medium\" \/><\/a><\/p>\n<p><b>4. D\u00e9finir les param\u00e8tres du transcode<\/b><br \/>\n<a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_ogg_4.jpg\" title=\"Copyright\u00a9 3wdoc.com\" class=\"aligncenter\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_ogg_4-300x186.jpg\"  alt=\"HTML5, Player \u2013 Demo HTML5 \u00e0 l\u2019aide du player 3WDOC\" width=\"300\" height=\"186\" class=\"aligncenter size-medium\" \/><\/a><\/p>\n<p><b>5. D\u00e9finir le mode d&#8217;encapsulation<\/b><br \/>\n<a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_ogg_5.jpg\" title=\"Copyright\u00a9 3wdoc.com\" class=\"aligncenter\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_ogg_5-300x186.jpg\"  alt=\"HTML5, Player \u2013 Demo HTML5 \u00e0 l\u2019aide du player 3WDOC\" width=\"300\" height=\"186\" class=\"aligncenter size-medium\" \/><\/a><\/p>\n<p><b>6. Le r\u00e9sum\u00e9<\/b><br \/>\n<a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_ogg_6.jpg\" title=\"Copyright\u00a9 3wdoc.com\" class=\"aligncenter\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_ogg_6-300x186.jpg\"  alt=\"HTML5, Player \u2013 Demo HTML5 \u00e0 l\u2019aide du player 3WDOC\" width=\"300\" height=\"186\" class=\"aligncenter size-medium\" \/><\/a><\/p>\n<p>Au terme de ces 6 op\u00e9rations, vous obtenez un fichier <code>.ogg<\/code> de votre vid\u00e9o.<\/p>\n<h4>Acc\u00e9der \u00e0 la barre de transport du player 3WDOC<\/h4>\n<p>Pour activer ou non la barre de transport, si vous le souhiatez, vous pouvez \u00e0 l&#8217;aide de <code>FireBug<\/code> sous Firefox, mettre <code>style=&quot;display: block;&quot;<\/code> pour voir apparaitre temporairement la barre de transport qui vous donne tous les boutons, le timecode&#8230;.etc<\/p>\n<pre lang=\"html\" escaped=\"true\">\r\n&lt;div class=&quot;he3Player_toolbar&quot; style=&quot;display: block;&quot;&gt;...&lt;\/div&gt;\r\n<\/pre>\n<p><b>La barre de transport du 3WDOC player<\/b><br \/>\n<a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_demo_transport_1.jpg\" title=\"Copyright\u00a9 3wdoc.com\" class=\"aligncenter\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_demo_transport_1-300x186.jpg\"  alt=\"HTML5, Player \u2013 Demo HTML5 \u00e0 l\u2019aide du player 3WDOC\" width=\"300\" height=\"186\" class=\"aligncenter size-medium\" \/><\/a><\/p>\n<p><a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_demo_transport_2.jpg\" title=\"Copyright\u00a9 3wdoc.com\" class=\"aligncenter\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/html5_he3Player_demo_transport_2-300x186.jpg\"  alt=\"HTML5, Player \u2013 Demo HTML5 \u00e0 l\u2019aide du player 3WDOC\" width=\"300\" height=\"186\" class=\"aligncenter size-medium\" \/><\/a><\/p>\n<h2>La documentation pour utiliser la player 3WDOC<\/h2>\n<p>Voici, pour les plus courageux, l&#8217;int\u00e9grale de ma documentation pour personnaliser le player 3WDOC des param\u00e8tres d&#8217;affichage et des options d&#8217;initialisation et des options d&#8217;effets.<\/p>\n<h2>EFFECTS<\/h2>\n<pre lang=\"txt\">\r\n        Blind\r\n        direction: horizontal,vertical (string)\r\n\r\n        Bounce\r\n        direction: up,down,left,right (string)\r\n\r\n        Clip\r\n        direction: horizontal,vertical (string)\r\n\r\n        Drop\r\n        direction: up,down,left,right (string)\r\n\r\n        Explode\r\n        pieces: 9 (int)\r\n\r\n        Fold\r\n        horizFirst: true,false (bool)\r\n        size: 15 (int)\r\n\r\n        Highlight\r\n        color: #ffff99 (hex)\r\n\r\n        Puff\r\n        percent: 150 (int)\r\n\r\n        Pulsate\r\n        times: 5 (int)\r\n\r\n        Shake\r\n        direction: up,down,left,right (string)\r\n        distance: 20 (int)\r\n        times: 3 (int)\r\n\r\n        Slide\r\n        direction: up,down,left,right\r\n\r\n        Fade\r\n<\/pre>\n<h2>ATTRIBUTES<\/h2>\n<p><strong>note<\/strong>: the effect options are strings in json notation without curly-braces, don&#8217;t forget to single quote keys\/values, if multiple keys\/values pairs separate by coma.<\/p>\n<pre lang=\"txt\" escaped=\"true\">\r\n        &lt;node (video,audio,article,img,button)\r\n            \/\/ show attributes\r\n            tcStart=\"\" (float) # timecode start\r\n            tcStartTop=\"\" (int) # relative to section start top position in px\r\n            tcStartLeft=\"\" (int) # relative to section start left position in px\r\n            tcStartWidth=\"\" (int) # start width in px\r\n            tcStartHeight=\"\" (int) # start height in px\r\n            tcStartZindex=\"\" (int) # start z-index\r\n            tcStartEffect=\"\" (string) # start fx\r\n            tcStartEffectDuration=\"\" (int) # start fx duration\r\n            tcStartEffectOptions=\"\" (string) # start fx options\r\n            \/\/ hide attributes\r\n            tcStop=\"\" (float) # timecode stop\r\n            tcStopEffect=\"\" (string) # stop fx\r\n            tcStopEffectDuration=\"\" (int) # stop fx duration\r\n            tcStopEffectOptions=\"\" (string) # stop fx options\r\n        &gt;\r\n            node content\r\n        &lt;\/node&gt;\r\n\r\n        &lt;node (audio,video)\r\n            \/\/ source attribute\r\n            tcSrc = \"\" (string) # url to the multimedia source file without extension (ext will be elected to ogg for FF and mp4 for others)\r\n        &gt;\r\n            !!! no node content, will be dynamically injected when needed !!!\r\n        &lt;\/node&gt;\r\n\r\n        &lt;node (button)\r\n            tcLink=\"http:\/\/www.hecube.net\" (URLstring) # action button to link to URL\r\n            tcGoto=\"\" (float) # action button to jump to specified timecode in the sequence\r\n            tcOverlay=\"\" (string) # action button to trigger an overlayed group\r\n            class=\"[ui]rwd\" (string) # action button stepping rewind (see he3PlayerSeekStep)\r\n            class=\"[ui]play\" (string) # action button trigger play\r\n            class=\"pause\" (string) # action button trigger pause\r\n            class=\"[ui]stop\" (string) # action button trigger stop\r\n            class=\"[ui]fwd\" (string) # action button stepping forward (see he3PlayerSeekStep)\r\n            class=\"[ui]mute\" (string) # action button trigger mute (see he3PlayerMute)\r\n            class=\"[ui]sndMinus\" (string) # action button trigger stepping volume (see he3PlayerVolumeStep)\r\n            class=\"[ui]sndPlus\" (string) # action button trigger stepping volume (see he3PlayerVolumeStep)\r\n            class=\"[ui]fullScreen\" (string) # action button trigger player size\r\n            class=\"ctime\" (string) # passive button display current timecode\r\n        &gt;\r\n            node content\r\n        &lt;\/node\r\n\r\n        &lt;node (article,img)\r\n            tcOverlayed=\"\" (string) # defines an overlayed group to be trigger by an overlay button\r\n        &gt;\r\n            node content\r\n        &lt;\/node&gt;\r\n<\/pre>\n<h3 id=\"INIT-OPTIONS\">INIT OPTIONS<a href=\"#INIT-OPTIONS\" class=\"wiki-anchor\"><\/a><\/h3>\n<p>note: [c] cookie mode capabilities<\/p>\n<h2>INITIALISATION<\/h2>\n<pre lang=\"txt\">\r\n        he3PlayerWidth:                         1024, (int) # the main container section width\r\n        he3PlayerHeight:                         768, (int) # the main container section height\r\n        he3PlayerNativeWindow:                     true, (bool) [c] # init in native window size (he3PlayerWidth,he3PlayerHeight) or resize window size (see he3PlayerRatioWindow,he3PlayerReferenceWindow)\r\n        he3PlayerRatioWindow:                     0.5, (float) # defines the resize ration, if set to 0 follow full browser window size\r\n        he3PlayerReferenceWindow:                 \"width\", width|height (string) # choice of the dimension we refer to for full browser window size following\r\n        he3PlayerAutoplay:                         false, (bool) [c] # init in autoplay, can be bypassed by runtime transport status in cookie mode [c]\r\n        he3PlayerMute:                             false, (bool) [c] # init in mute\r\n        he3PlayerSeekStep:                         3, (float) # seekink stepping configuration\r\n        he3PlayerVolumeDefault:                 0.5, (float) [c] # default init volume value, from 0 to 1\r\n        he3PlayerCookieName:                     \"mywebdoc\", (string) # will name the session cookie (experimental) that stores runtime properties between pages, it should represent a webdoc name\r\n        he3PlayerCookieRecall:                     \"transport,nativeWindow,volume,mute\", (string) # will (de)activate data recal at init from the session cookie (experimental), bypassing some of the init options [c]\r\n        he3PlayerFirebug:                         true (bool) # enables Firebug debugging messages (FF only!)\r\n<\/pre>\n<p>Ce d\u00e9veloppement du Player 3WDOC a \u00e9t\u00e9 rendu possible gr\u00e2ce aux ressources suivantes :<\/p>\n<ul>\n<li>jQuery: The Write Less, Do More, JavaScript Library<br \/>\n<a href=\"http:\/\/jquery.com\/\" target=\"_blank\">http:\/\/jquery.com\/<\/a><\/li>\n<li>jQuery UI<br \/>\n<a href=\"http:\/\/jqueryui.com\/\" target=\"_blank\">http:\/\/jqueryui.com\/<\/a><\/li>\n<li>Modernizr JavaScript library<br \/>\n<a href=\"http:\/\/modernizr.com\/\" target=\"_blank\">http:\/\/modernizr.com\/<\/a><\/li>\n<li>Le plugin jQuery Cookie<br \/>\n<a href=\"http:\/\/plugins.jquery.com\/\" target=\"_blank\">http:\/\/plugins.jquery.com\/<\/a><\/li>\n<\/ul>\n<p><strong>5e Arrondissement de Paris, 75005 Paris, France<\/strong><\/p>\n<p>[geo_mashup_map  height=&#8221;235&#8243; width=&#8221;600&#8243; map_type=&#8221;G_HYBRID_MAP&#8221; zoom=&#8221;15&#8243; add_overview_control=&#8221;true&#8221; add_map_type_control=&#8221;true&#8221;]<\/p>\n<h2>Pour aller plus loin<\/h2>\n<ul>\n<li>HTML5 (including next generation additions still in development) Draft Standard<br \/>\n\t<a href=\"http:\/\/www.whatwg.org\/specs\/web-apps\/current-work\/multipage\/video.html\" target=\"_blank\">http:\/\/www.whatwg.org\/specs\/web-apps\/current-work\/multipage\/video.html<\/a><\/li>\n<li>Video on the Web &#8211; Dive Into HTML5<br \/>\n<a href=\"http:\/\/diveintohtml5.org\/video.html\" target=\"_blank\">http:\/\/diveintohtml5.org\/video.html<\/a><\/li>\n<li>HTML5 Video with JavaScripted synchronised captions: demo <em>(une video plut\u00f4t amusante au demeurant)<\/em><br \/>\n<a href=\"http:\/\/people.opera.com\/brucel\/demo\/video\/multilingual-synergy.html\" target=\"_blank\">http:\/\/people.opera.com\/brucel\/demo\/video\/multilingual-synergy.html<\/a><\/li>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>3WDOC vient de publier un article qui vante les m\u00e9rites de l&#8217;HTML5, on se devait donc de produire quelques d\u00e9monstrations qui attestent de la v\u00e9racit\u00e9&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2010\/09\/html5-player-demo-html5-a-laide-du-player-3wdoc\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">HTML5, Player \u2013 Demo HTML5 \u00e0 l\u2019aide du player 3WDOC<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":9697,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"3WDOC d\u00e9montre les capacit\u00e9s de l\u2019HTML5 avec un player interactif. R\u00e9alisation maison, outils et r\u00e9sultats concrets.","bf_ai_og_title":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3436,3446,3447,3448,3451,3435],"tags":[781,3493,785,138,256,2214,919,2185,920,426,249,2261,921,154,326,793,2213,146],"class_list":["post-9019","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-digital-storytelling-webdocs","category-social-media-community","category-technology-trends","category-tools-productivity","category-web-design-front-end","category-web-development","tag-animation","tag-clip","tag-development","tag-developpement","tag-flash","tag-google","tag-h-264","tag-html5","tag-intercaction","tag-ipad","tag-iphone","tag-narration","tag-ogg-vorbi","tag-photos","tag-player","tag-texte","tag-video","tag-videos"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-2lt","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/09\/3wdoc_article_b_bf.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/9019","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=9019"}],"version-history":[{"count":2,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/9019\/revisions"}],"predecessor-version":[{"id":9699,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/9019\/revisions\/9699"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/9697"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=9019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=9019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=9019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}