{"id":378,"date":"2014-04-05T13:10:07","date_gmt":"2014-04-05T12:10:07","guid":{"rendered":"http:\/\/louis.hatier.me\/blog\/?p=378"},"modified":"2015-08-12T17:34:29","modified_gmt":"2015-08-12T16:34:29","slug":"html5-gestion-videos","status":"publish","type":"post","link":"https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/","title":{"rendered":"HTML5 : gestion des vid\u00e9os"},"content":{"rendered":"<p><a title=\"\" href=\"http:\/\/louis.hatier.me\/blog\/wp-content\/uploads\/2014\/04\/logo-html5.jpg\" data-rel=\"lightbox-gallery-nowO63hJ\" data-rl_title=\"\" data-rl_caption=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-379 alignleft\" title=\"Logo HTML5\" src=\"http:\/\/louis.hatier.me\/blog\/wp-content\/uploads\/2014\/04\/logo-html5.jpg\" alt=\"Logo HTML5\" width=\"66\" height=\"83\" \/><\/a>Voici un petit r\u00e9sum\u00e9 \u00e0 propos de l\u2019affichage de vid\u00e9os en HTML5, qui permet de se passer du plugin Flash (les mobiles et tablettes fonctionnent g\u00e9n\u00e9ralement sans ce plugin).<\/p>\n<p dir=\"ltr\">Fonctionne sur les navigateurs modernes (Chrome, Firefox, IE9\/10, Opera), et sur les mobiles\/tablettes r\u00e9cents.<\/p>\n<p>Les navigateurs ne supportent pas tous les m\u00eames formats vid\u00e9os, pour s\u2019assurer un bon fonctionnement partout il faut g\u00e9n\u00e9rer ces 3 formats :<\/p>\n<ul>\n<li>H.264\/MP4<\/li>\n<li>OGG\/Theora<\/li>\n<li>WebM\/VP8<\/li>\n<\/ul>\n<p><!--more--><\/p>\n<p>Un logiciel gratuit, open-source et multi-OS permet \u00e0 partir d\u2019un fichier vid\u00e9o source lambda de g\u00e9n\u00e9rer ces formats tr\u00e8s facilement (et bien d\u2019autres formats) : <a title=\"MiroVideoConverter\" href=\"http:\/\/www.mirovideoconverter.com\/\" target=\"_blank\">MiroVideoConverter<\/a><\/p>\n<p dir=\"ltr\">Ensuite il suffit de pr\u00e9ciser dans le code HTML les 3 vid\u00e9os. Le navigateur prendra celle qu\u2019il reconna\u00eet (attention \u00e0 bien mettre le mp4 en premier car les iPad et compagnie ne liront que la premi\u00e8re source, et c\u2019est ce format l\u00e0 dont ils auront besoin) :<\/p>\n<pre><code class=\"html\">&lt;video width=\"800\" height=\"450\" controls=\"controls\" poster=\"cover.jpg\"&gt;\r\n    &lt;source src=\"mavideo.mp4\" type=\"video\/mp4\"&gt;\r\n    &lt;source src=\"mavideo.webm\" type=\"video\/webm\"&gt;\r\n    &lt;source src=\"mavideo.ogv\" type=\"video\/ogg\"&gt;\r\n    &lt;track src=\"subtitles_en.vtt\" kind=\"subtitles\" srclang=\"en\" label=\"English\"&gt;\r\n    &lt;track src=\"subtitles_fr.vtt\" kind=\"subtitles\" srclang=\"fr\" label=\"Fran\u00e7ais\"&gt;\r\n    Votre navigateur ne supporte pas la balise video\r\n&lt;\/video&gt;\r\n<\/code><\/pre>\n<p>La balise <code>track<\/code> permet d\u2019afficher des sous-titres.<\/p>\n<p dir=\"ltr\">Attributs int\u00e9ressant :<\/p>\n<ul>\n<li><strong>autoplay :<\/strong> lance la video automatiquement<\/li>\n<li><strong>controls :<\/strong> affiche les boutons de contr\u00f4le de la vid\u00e9o<\/li>\n<li><strong>preload :<\/strong> permet de pr\u00e9charger la vid\u00e9o<\/li>\n<li><strong>poster :<\/strong> affiche une image en attendant que l\u2019utilisateur lance la vid\u00e9o<\/li>\n<\/ul>\n<p dir=\"ltr\">Chaque navigateur affiche un lecteur propre \u00e0 lui, pour afficher un lecteur vid\u00e9o personnalis\u00e9 et identique sur tous les navigateurs il existe des librairies javascript :<\/p>\n<p dir=\"ltr\"><a title=\"Video.JS\" href=\"http:\/\/videojs.com\/\" target=\"_blank\">http:\/\/videojs.com\/<br \/>\n<\/a><a title=\"SublimeVideo\" href=\"http:\/\/sublimevideo.net\/\" target=\"_blank\">http:\/\/sublimevideo.net\/<\/a><a href=\"http:\/\/www.hdwebplayer.com\/\"><br \/>\n<\/a><a title=\"flowplayer\" href=\"http:\/\/flowplayer.org\/\" target=\"_blank\">http:\/\/flowplayer.org\/<\/a><\/p>\n<p dir=\"ltr\">Pour IE6\/7\/8 en revanche il faut utiliser une balise embed avec un lecteur swf (Flash) car il ne sait pas g\u00e9rer la balise vid\u00e9o.<\/p>\n<p dir=\"ltr\">Video.JS permet d\u2019avoir un lecteur personnalis\u00e9 et \u00e9galement un player Flash qui pourra lire la vid\u00e9o au format mp4 pour ces vieux navigateurs.<\/p>\n<div style=\"padding-bottom:20px; padding-top:10px;\" class=\"hupso-share-buttons\"><!-- Hupso Share Buttons - https:\/\/www.hupso.com\/share\/ --><a class=\"hupso_counters\" href=\"https:\/\/www.hupso.com\/share\/\"><img decoding=\"async\" src=\"https:\/\/static.hupso.com\/share\/buttons\/dot.png\" style=\"border:0px; padding-top:2px; float:left;\" alt=\"Share Button\"\/><\/a><script type=\"text\/javascript\">var hupso_services_c=new Array(\"twitter\",\"facebook_like\",\"pinterest\",\"email\",\"linkedin\");var hupso_counters_lang = \"en_US\";var hupso_image_folder_url = \"\";var hupso_url_c=\"\";var hupso_title_c=\"HTML5%20%3A%20gestion%20des%20vid%C3%A9os\";<\/script><script type=\"text\/javascript\" src=\"https:\/\/static.hupso.com\/share\/js\/counters.js\"><\/script><!-- Hupso Share Buttons --><\/div>","protected":false},"excerpt":{"rendered":"<p>Voici un petit r\u00e9sum\u00e9 \u00e0 propos de l\u2019affichage de vid\u00e9os en HTML5, qui permet de se passer du plugin Flash (les mobiles et tablettes fonctionnent g\u00e9n\u00e9ralement sans ce plugin). Fonctionne sur les navigateurs modernes (Chrome, Firefox, IE9\/10, Opera), et sur les mobiles\/tablettes r\u00e9cents. Les navigateurs ne supportent pas tous les m\u00eames formats vid\u00e9os, pour s\u2019assurer [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[19],"class_list":["post-378","post","type-post","status-publish","format-standard","hentry","category-html-css","tag-html5"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML5 : gestion des vid\u00e9os - Melting Poutre<\/title>\n<meta name=\"description\" content=\"G\u00e9rer l&#039;affichage des vid\u00e9os en HTML5\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 : gestion des vid\u00e9os - Melting Poutre\" \/>\n<meta property=\"og:description\" content=\"G\u00e9rer l&#039;affichage des vid\u00e9os en HTML5\" \/>\n<meta property=\"og:url\" content=\"https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/\" \/>\n<meta property=\"og:site_name\" content=\"Melting Poutre\" \/>\n<meta property=\"article:published_time\" content=\"2014-04-05T12:10:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-08-12T16:34:29+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/louis.hatier.me\/blog\/wp-content\/uploads\/2014\/04\/logo-html5.jpg\" \/>\n<meta name=\"author\" content=\"Louis Hatier\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Louis Hatier\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/\"},\"author\":{\"name\":\"Louis Hatier\",\"@id\":\"https:\/\/louis.hatier.me\/blog\/#\/schema\/person\/2f200d0368def135b452e65491c4dd11\"},\"headline\":\"HTML5 : gestion des vid\u00e9os\",\"datePublished\":\"2014-04-05T12:10:07+00:00\",\"dateModified\":\"2015-08-12T16:34:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/\"},\"wordCount\":299,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/louis.hatier.me\/blog\/#\/schema\/person\/2f200d0368def135b452e65491c4dd11\"},\"image\":{\"@id\":\"https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/louis.hatier.me\/blog\/wp-content\/uploads\/2014\/04\/logo-html5.jpg\",\"keywords\":[\"HTML5\"],\"articleSection\":[\"HTML\/CSS\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/\",\"url\":\"https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/\",\"name\":\"HTML5 : gestion des vid\u00e9os - Melting Poutre\",\"isPartOf\":{\"@id\":\"https:\/\/louis.hatier.me\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/louis.hatier.me\/blog\/wp-content\/uploads\/2014\/04\/logo-html5.jpg\",\"datePublished\":\"2014-04-05T12:10:07+00:00\",\"dateModified\":\"2015-08-12T16:34:29+00:00\",\"description\":\"G\u00e9rer l'affichage des vid\u00e9os en HTML5\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/#primaryimage\",\"url\":\"http:\/\/louis.hatier.me\/blog\/wp-content\/uploads\/2014\/04\/logo-html5.jpg\",\"contentUrl\":\"http:\/\/louis.hatier.me\/blog\/wp-content\/uploads\/2014\/04\/logo-html5.jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/louis.hatier.me\/blog\/#website\",\"url\":\"https:\/\/louis.hatier.me\/blog\/\",\"name\":\"Melting Poutre\",\"description\":\"Du web et d&#039;autres choses\",\"publisher\":{\"@id\":\"https:\/\/louis.hatier.me\/blog\/#\/schema\/person\/2f200d0368def135b452e65491c4dd11\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/louis.hatier.me\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/louis.hatier.me\/blog\/#\/schema\/person\/2f200d0368def135b452e65491c4dd11\",\"name\":\"Louis Hatier\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/louis.hatier.me\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cd8d107ede5a4ec340326655e74a00ca62b02e41a02442f961c36f085aa89942?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cd8d107ede5a4ec340326655e74a00ca62b02e41a02442f961c36f085aa89942?s=96&d=mm&r=g\",\"caption\":\"Louis Hatier\"},\"logo\":{\"@id\":\"https:\/\/louis.hatier.me\/blog\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/louis.hatier.me\",\"https:\/\/www.linkedin.com\/in\/louishatier\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 : gestion des vid\u00e9os - Melting Poutre","description":"G\u00e9rer l'affichage des vid\u00e9os en HTML5","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/","og_locale":"fr_FR","og_type":"article","og_title":"HTML5 : gestion des vid\u00e9os - Melting Poutre","og_description":"G\u00e9rer l'affichage des vid\u00e9os en HTML5","og_url":"https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/","og_site_name":"Melting Poutre","article_published_time":"2014-04-05T12:10:07+00:00","article_modified_time":"2015-08-12T16:34:29+00:00","og_image":[{"url":"http:\/\/louis.hatier.me\/blog\/wp-content\/uploads\/2014\/04\/logo-html5.jpg","type":"","width":"","height":""}],"author":"Louis Hatier","twitter_misc":{"\u00c9crit par":"Louis Hatier","Dur\u00e9e de lecture estim\u00e9e":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/#article","isPartOf":{"@id":"https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/"},"author":{"name":"Louis Hatier","@id":"https:\/\/louis.hatier.me\/blog\/#\/schema\/person\/2f200d0368def135b452e65491c4dd11"},"headline":"HTML5 : gestion des vid\u00e9os","datePublished":"2014-04-05T12:10:07+00:00","dateModified":"2015-08-12T16:34:29+00:00","mainEntityOfPage":{"@id":"https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/"},"wordCount":299,"commentCount":0,"publisher":{"@id":"https:\/\/louis.hatier.me\/blog\/#\/schema\/person\/2f200d0368def135b452e65491c4dd11"},"image":{"@id":"https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/#primaryimage"},"thumbnailUrl":"http:\/\/louis.hatier.me\/blog\/wp-content\/uploads\/2014\/04\/logo-html5.jpg","keywords":["HTML5"],"articleSection":["HTML\/CSS"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/","url":"https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/","name":"HTML5 : gestion des vid\u00e9os - Melting Poutre","isPartOf":{"@id":"https:\/\/louis.hatier.me\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/#primaryimage"},"image":{"@id":"https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/#primaryimage"},"thumbnailUrl":"http:\/\/louis.hatier.me\/blog\/wp-content\/uploads\/2014\/04\/logo-html5.jpg","datePublished":"2014-04-05T12:10:07+00:00","dateModified":"2015-08-12T16:34:29+00:00","description":"G\u00e9rer l'affichage des vid\u00e9os en HTML5","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/louis.hatier.me\/blog\/html5-gestion-videos\/#primaryimage","url":"http:\/\/louis.hatier.me\/blog\/wp-content\/uploads\/2014\/04\/logo-html5.jpg","contentUrl":"http:\/\/louis.hatier.me\/blog\/wp-content\/uploads\/2014\/04\/logo-html5.jpg"},{"@type":"WebSite","@id":"https:\/\/louis.hatier.me\/blog\/#website","url":"https:\/\/louis.hatier.me\/blog\/","name":"Melting Poutre","description":"Du web et d&#039;autres choses","publisher":{"@id":"https:\/\/louis.hatier.me\/blog\/#\/schema\/person\/2f200d0368def135b452e65491c4dd11"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/louis.hatier.me\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":["Person","Organization"],"@id":"https:\/\/louis.hatier.me\/blog\/#\/schema\/person\/2f200d0368def135b452e65491c4dd11","name":"Louis Hatier","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/louis.hatier.me\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cd8d107ede5a4ec340326655e74a00ca62b02e41a02442f961c36f085aa89942?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cd8d107ede5a4ec340326655e74a00ca62b02e41a02442f961c36f085aa89942?s=96&d=mm&r=g","caption":"Louis Hatier"},"logo":{"@id":"https:\/\/louis.hatier.me\/blog\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/louis.hatier.me","https:\/\/www.linkedin.com\/in\/louishatier\/"]}]}},"_links":{"self":[{"href":"https:\/\/louis.hatier.me\/blog\/wp-json\/wp\/v2\/posts\/378","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/louis.hatier.me\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/louis.hatier.me\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/louis.hatier.me\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/louis.hatier.me\/blog\/wp-json\/wp\/v2\/comments?post=378"}],"version-history":[{"count":3,"href":"https:\/\/louis.hatier.me\/blog\/wp-json\/wp\/v2\/posts\/378\/revisions"}],"predecessor-version":[{"id":461,"href":"https:\/\/louis.hatier.me\/blog\/wp-json\/wp\/v2\/posts\/378\/revisions\/461"}],"wp:attachment":[{"href":"https:\/\/louis.hatier.me\/blog\/wp-json\/wp\/v2\/media?parent=378"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/louis.hatier.me\/blog\/wp-json\/wp\/v2\/categories?post=378"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/louis.hatier.me\/blog\/wp-json\/wp\/v2\/tags?post=378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}