{"id":5321,"date":"2024-08-27T15:32:50","date_gmt":"2024-08-27T15:32:50","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/medias-video-audio-html-guide\/"},"modified":"2024-11-08T10:12:14","modified_gmt":"2024-11-08T10:12:14","slug":"medias-video-audio-html-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/medias-video-audio-html-guide\/","title":{"rendered":"2.8 M\u00e9dias Vid\u00e9o et Audio en HTML : Guide"},"content":{"rendered":"\n\n\n<p><strong>M\u00e9dias Vid\u00e9o et Audio en HTML<\/strong> apportent une nouvelle dimension \u00e0 la cr\u00e9ation de contenu web interactif et engageant. Avec HTML5, l&rsquo;int\u00e9gration de vid\u00e9os et d&rsquo;audio est d\u00e9sormais plus simple et \u00e9cologique, sans n\u00e9cessiter de plugins tiers comme Flash. Ce guide vous montrera comment incorporer des fichiers multim\u00e9dias \u00e0 vos pages HTML tout en offrant les meilleures pratiques pour optimiser l&rsquo;exp\u00e9rience utilisateur.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>M\u00e9dias Vid\u00e9o et Audio en HTML<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/586254333?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>L&rsquo;incorporation de vid\u00e9os et d&rsquo;audio dans vos pages HTML permet de rendre le contenu plus int\u00e9ressant et engageant. HTML5 introduit de nouvelles balises comme <code>&lt;video&gt;<\/code> et <code>&lt;audio&gt;<\/code> qui facilitent cette int\u00e9gration de mani\u00e8re native. Apprenons comment les utiliser avec des exemples concrets et du code pratique.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Int\u00e9gration de Vid\u00e9os avec la Balise <code>&lt;video&gt;<\/code><\/h3>\n\n\n\n<p>La balise <code>&lt;video&gt;<\/code> permet de lire des fichiers vid\u00e9o directement dans le navigateur. Voici un exemple de base d\u2019utilisation de cette balise :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;video width=\"600\" controls&gt;\n  &lt;source src=\"video.mp4\" type=\"video\/mp4\"&gt;\n  Votre navigateur ne supporte pas la balise vid\u00e9o.\n&lt;\/video&gt;\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, l&rsquo;attribut <code>controls<\/code> ajoute des contr\u00f4les de lecture tels que pause, volume et plein \u00e9cran au lecteur vid\u00e9o. Il est \u00e9galement important d\u2019inclure une alternative textuelle pour les navigateurs qui ne supportent pas la balise <code>&lt;video&gt;<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Formats Vid\u00e9o Support\u00e9s<\/h3>\n\n\n\n<p>Pour garantir une compatibilit\u00e9 maximale, il est conseill\u00e9 d&rsquo;inclure plusieurs formats de vid\u00e9o. Les formats les plus couramment support\u00e9s par les navigateurs web sont MP4, WebM et Ogg. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;video width=\"600\" controls&gt;\n  &lt;source src=\"video.mp4\" type=\"video\/mp4\"&gt;\n  &lt;source src=\"video.webm\" type=\"video\/webm\"&gt;\n  &lt;source src=\"video.ogv\" type=\"video\/ogg\"&gt;\n  Votre navigateur ne supporte pas la balise vid\u00e9o.\n&lt;\/video&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Incorporer de l\u2019Audio avec la Balise <code>&lt;audio&gt;<\/code><\/h3>\n\n\n\n<p>La balise <code>&lt;audio&gt;<\/code> fonctionne de mani\u00e8re similaire \u00e0 <code>&lt;video&gt;<\/code> mais est destin\u00e9e aux fichiers audio. Voici un exemple d\u2019utilisation :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;audio controls&gt;\n  &lt;source src=\"audio.mp3\" type=\"audio\/mp3\"&gt;\n  &lt;source src=\"audio.ogg\" type=\"audio\/ogg\"&gt;\n  Votre navigateur ne supporte pas la balise audio.\n&lt;\/audio&gt;\n<\/code><\/pre>\n\n\n\n<p>Les attributs principaux ici sont \u00e9galement <code>controls<\/code>, et vous pouvez offrir plusieurs formats pour une compatibilit\u00e9 accrue. Les formats audio couramment support\u00e9s sont MP3 et Ogg.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des Sous-titres aux Vid\u00e9os<\/h3>\n\n\n\n<p>Pour rendre votre contenu vid\u00e9o accessible, pensez \u00e0 ajouter des sous-titres. HTML5 permet d&rsquo;ajouter des pistes de sous-titres avec la balise <code>&lt;track&gt;<\/code>. Voici comment :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;video width=\"600\" controls&gt;\n  &lt;source src=\"video.mp4\" type=\"video\/mp4\"&gt;\n  &lt;track src=\"subtitles.vtt\" kind=\"subtitles\" srclang=\"fr\" label=\"French\"&gt;\n  Votre navigateur ne supporte pas la balise vid\u00e9o.\n&lt;\/video&gt;\n<\/code><\/pre>\n\n\n\n<p>La balise <code>&lt;track&gt;<\/code> avec l\u2019attribut <code>kind=\"subtitles\"<\/code> permet d\u2019ajouter des sous-titres \u00e0 vos vid\u00e9os, am\u00e9liorant ainsi l\u2019accessibilit\u00e9 et la compr\u00e9hension.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Personnaliser le Lecteur Multim\u00e9dia<\/h3>\n\n\n\n<p>Vous pouvez personnaliser l&rsquo;apparence du lecteur multim\u00e9dia en utilisant CSS. Voici un exemple pour customiser le style du lecteur :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>video {\n  border: 5px solid #4CAF50;\n  border-radius: 10px;\n  box-shadow: 0 0 10px rgba(0,0,0,0.5);\n}\n\naudio {\n  width: 100%;\n  background-color: #f3f3f3;\n  border: 1px solid #ccc;\n  border-radius: 5px;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Optimiser les Performances<\/h3>\n\n\n\n<p>Pour garantir que vos m\u00e9dias vid\u00e9o et audio soient rapidement accessibles et ne ralentissent pas votre site, suivez ces meilleures pratiques :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Compressez vos fichiers vid\u00e9o et audio pour r\u00e9duire leur taille.<\/li>\n\n\n\n<li>Utilisez des CDN pour une diffusion plus rapide.<\/li>\n\n\n\n<li>Sp\u00e9cifiez les attributs <code>preload<\/code> et <code>autoplay<\/code> de mani\u00e8re judicieuse pour mieux contr\u00f4ler la bande passante.<\/li>\n\n\n\n<li>Incluez une image d&rsquo;affiche (<code>poster<\/code>) pour les vid\u00e9os afin de fournir un aper\u00e7u avant la lecture.<\/li>\n\n\n\n<li>Pour en savoir plus sur la fa\u00e7on de rendre vos vid\u00e9os plus accessibles, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\" target=\"_blank\" rel=\"noopener\">guide sur le fonctionnement des navigateurs web<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les balises <code>&lt;video&gt;<\/code> et <code>&lt;audio&gt;<\/code> de HTML5 ont grandement simplifi\u00e9 l&rsquo;int\u00e9gration de contenus multim\u00e9dias sur le web. Avec les bonnes pratiques et une utilisation appropri\u00e9e des formats et attributs, vous pouvez enrichir l&rsquo;exp\u00e9rience utilisateur et rendre votre contenu plus engageant. Continuez \u00e0 explorer et exp\u00e9rimenter avec ces outils pour cr\u00e9er des pages web interactives et captivantes.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation HTML5 CSS3 Offre 50%\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>M\u00e9dias Vid\u00e9o et Audio en HTML apportent une nouvelle dimension \u00e0 la cr\u00e9ation de contenu web interactif et engageant. Avec HTML5, l&rsquo;int\u00e9gration de vid\u00e9os et&#8230;<\/p>\n","protected":false},"author":1,"featured_media":2748,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5321","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5321","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5321"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5321\/revisions"}],"predecessor-version":[{"id":6028,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5321\/revisions\/6028"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2748"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5321"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5321"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}