{"id":942,"date":"2009-03-09T07:53:04","date_gmt":"2009-03-09T05:53:04","guid":{"rendered":"http:\/\/nyams.planbweb.com\/blog\/?p=942"},"modified":"2009-03-09T07:53:04","modified_gmt":"2009-03-09T05:53:04","slug":"jsplayer-sur-github","status":"publish","type":"post","link":"https:\/\/nyamsprod.com\/blog\/jsplayer-sur-github\/","title":{"rendered":"jsplayer sur github"},"content":{"rendered":"<div class=\"message warning\">\n<p><strong>Attention:<\/strong> Les informations de ce billet sont susceptibles d'&ecirc;tre obsol&egrave;tes car vieux de plus 2 ans.<\/p>\n<p><strong>Warning: <\/strong> The information you are reading may be obsolete, this post was published more than 2 years ago.<\/p>\n<\/div><p>Je viens de mettre sur github mon premier code Javascript. J&#8217;esp\u00e8re que ce n&#8217;est que le premier d&#8217;une longue s\u00e9rie, le futur nous le dira \ud83d\ude42 . Pour une premi\u00e8re fois j&#8217;ai d\u00e9cid\u00e9 de partager mon script en version am\u00e9liorer d&#8217;utilisation des balises m\u00e9dia du html5.<!--more--><br \/>\nUne fois n&#8217;est pas coutume, je reviens sur un article que j&#8217;avais publi\u00e9 il y a quelques temps sur ce site \u00e0 propos de l&#8217;<a title=\"Utilisation de la balise video\" href=\"http:\/\/nyams.planbweb.com\/blog\/2009\/01\/05\/utilisation-de-la-balise-video\/\">utilisation de la balise video<\/a> du html5. A l&#8217;\u00e9poque il m&#8217;avait fallu 3 heures de code pour mettre en place un script permettant de contr\u00f4ler l&#8217;insertion et l&#8217;utilisation d&#8217;un m\u00e9dia au format ogg sous Firefox 3.1 beta 2 . Ce code bien que fonctionnel pr\u00e9sentait beaucoup de lacunes.<\/p>\n<ul>\n<li>Il ne fonctionnait que sous Firefox 3.1 beta 2, alors que les balises <em>media <\/em>sont reconnus et utilisables depuis bien longtemps sous Safari;<\/li>\n<li>Il fonctionnait un peu comme <a title=\"Documentation sur la derni\u00e8re version de swfobject\" href=\"http:\/\/code.google.com\/p\/swfobject\/\">swfobject<\/a> alors que les balises <em>media <\/em>ne s&#8217;utilisent pas comme la balise <code>object<\/code> lorsqu&#8217;elle inclue un compos\u00e9 Flash dans une page HTML;<\/li>\n<\/ul>\n<p>J&#8217;ai d&#8217;abord am\u00e9lior\u00e9 le code in-situe et celui-ci \u00e0 rapidement augment\u00e9 en taille et en fonctionnalit\u00e9 De fait,\u00a0 le code pr\u00e9sent\u00e9 par l&#8217;article n&#8217;a plus rien \u00e0 voir avec le code pr\u00e9sent sur la page d&#8217;exemple \ud83d\ude42 . Depuis j&#8217;ai encore am\u00e9lior\u00e9 le code pour combler les lacunes mentionn\u00e9es plus haut et en r\u00e9sum\u00e9, la fonction a chang\u00e9 de nom, et son utilisation a drastiquement \u00e9volu\u00e9.<\/p>\n<p>Pour lire, t\u00e9l\u00e9charger, tester, cloner, modifier et am\u00e9liorer <em>jsplayer <\/em>il n&#8217;y a qu&#8217;une seule adresse \u00e0 suivre sur <a title=\"Le code source de jsplayer sur GitHub\" href=\"http:\/\/github.com\/nyamsprod\/jsplayer\/tree\/master\">GitHub<\/a>. je vous donne n\u00e9anmoins un lien avec l&#8217;<a title=\"Page de test de jsplayer\" href=\"http:\/\/nyams.planbweb.com\/test\/jsplayer\/\">exemple que j&#8217;ai post\u00e9 sur GitHub<\/a> au cas o\u00f9 vous vous demandez ce que cela donne.<\/p>\n<p>Je rappelle au passage pour bien comprendre l&#8217;exemple que ce script ne fonctionne que sous un navigateur qui reconnait :<\/p>\n<ul>\n<li>les balises media ( \u00e0 l&#8217;heure o\u00f9 j&#8217;\u00e9cris ces quelques lignes il s&#8217;agit de Firefox 3.1 beta 2 et les versions sup\u00e9rieurs, Safari 3.1 et les versions sup\u00e9rieurs);<\/li>\n<li>les m\u00e9thodes javascript querySelector (ce qui \u00e9limine toutes les versions d&#8217;Opera sauf Opera 10) et addEventListener (ce qui \u00e9limine toutes les versions de Internet Explorer);<\/li>\n<\/ul>\n<p>Si votre navigateur pour l&#8221;une ou l&#8217;autre raison ne reconnait pas l&#8217;une ou l&#8217;autre m\u00e9thode et\/ou balise mentionn\u00e9e ci-dessus et que vous avez, comme j&#8217;ai fais dans mon exemple, une balise <code>object<\/code> ou <code>embed<\/code> \u00e0 l&#8217;int\u00e9rieur de votre balise m\u00e9dia, c&#8217;est cette balise qui sera utilis\u00e9e en lieu et place de mon script.<br \/>\nRien ne vous emp\u00eache, au contraire, d&#8217;\u00e9tendre les fonctionnalit\u00e9s de <em>jsplayer <\/em>\u00e0 d&#8217;autres navigateurs, si ceux-ci supportent au moins les balises media du html5.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Je vous pr\u00e9sente mon premier script host\u00e9 sur github : jsplayer. Un script permettant de contr\u00f4ler l&#8217;insertion et l&#8217;utilisation des nouvelles balises media (audio et video) du html5 ind\u00e9pendamment du navigateur.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[54,231,256,308,359,552],"class_list":["post-942","post","type-post","status-publish","format-standard","hentry","category-web","tag-audio","tag-github","tag-html5","tag-jsplayer","tag-mediacontroller","tag-video"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/942","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/comments?post=942"}],"version-history":[{"count":0,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/942\/revisions"}],"wp:attachment":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/media?parent=942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/categories?post=942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/tags?post=942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}