{"id":7782,"date":"2012-07-18T16:41:55","date_gmt":"2012-07-18T14:41:55","guid":{"rendered":"http:\/\/flaven.fr\/?p=7782"},"modified":"2012-07-18T16:41:55","modified_gmt":"2012-07-18T14:41:55","slug":"exemples-realiser-une-video-interactive","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2012\/07\/exemples-realiser-une-video-interactive\/","title":{"rendered":"Exemples &#8211; R\u00e9aliser une vid\u00e9o interactive"},"content":{"rendered":"<p><iframe loading=\"lazy\" style=\"box-shadow:0px 0px 5px #bbb;\" width=\"1000\" height=\"560\" scrolling=\"no\" frameborder=\"0\" name=\"3wdoc-embed\" src=\"http:\/\/story.3wdoc.com\/cb6c4c2fad07ad2d52469550411ab7460d3d46da98b7af0680e626e7dd5eb88575\/6\/index.html\"><\/iframe><\/p>\n<h4>D\u00e9finition<\/h4>\n<p>3WDOC vous permet de faire interagir une vid\u00e9o avec des \u00e9l\u00e9ments externes. Nous vous proposons de faire appara\u00eetre des \u00e9l\u00e9ments au fur et \u00e0 mesure de la vid\u00e9o, en fonction des r\u00e9ponses de la personne interview\u00e9e. Pour ce projet, nous avons pris comme support une vid\u00e9o, sur laquelle viennent s&#8217;ajouter petit \u00e0 petit des images (chaussures, jupes, sacs&#8230;). A chaque ajout une petite \u00e9tiquette appara\u00eet un court instant, on peux ensuite la faire appara\u00eetre \u00e0 tout moment en survolant une image. <\/p>\n<p>Vous pouvez voir ce projet sur <a href=\"http:\/\/story.3wdoc.com\/cb6c4c2fad07ad2d52469550411ab7460d3d46da98b7af0680e626e7dd5eb88575\/6\/index.html\">sa page de publication<\/a>.<\/p>\n<h4>La page M\u00e9dia<\/h4>\n<p>Vous voyez ici les m\u00e9dias upload\u00e9s pour ce projet<\/p>\n<p><a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_videoInteractive_media.jpg\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_videoInteractive_media.jpg\" alt=\"Exemples - R\u00e9aliser une vid\u00e9o interactive\" title=\"Exemples - R\u00e9aliser une vid\u00e9o interactive\" width=\"960\" height=\"522\" class=\"alignnone size-full wp-image-7785\" \/><\/a><\/p>\n<h4>La page Editeur<\/h4>\n<p>Dans la timeline, on peux constater <strong>la succession des \u00e9l\u00e9ments au fil du temps<\/strong>. En premier lieu, on trouve la vid\u00e9o, puis le fond sur lequel viendront s&#8217;incruster les images, et enfin les images et leur \u00e9tiquette associ\u00e9e.<br \/>\nLes deux derni\u00e8res pistes ne sont pas obligatoires, la premi\u00e8re permet de remplacer la vid\u00e9o lorsqu&#8217;elle se termine par une image fixe, la deuxi\u00e8me permet de disposer d&#8217;un arri\u00e8re plan noir pour ne jamais avoir de blanc apparent au chargement de la vid\u00e9o notamment.<\/p>\n<p><a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_videoInteractive_editor.jpg\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_videoInteractive_editor.jpg\" alt=\"Exemples - R\u00e9aliser une vid\u00e9o interactive\" title=\"Exemples - R\u00e9aliser une vid\u00e9o interactive\" width=\"960\" height=\"725\" class=\"alignnone size-full wp-image-7784\" \/><\/a><\/p>\n<p>Pour ce projet nous avons beaucoup jou\u00e9 avec <strong>la superposition des pistes<\/strong>, jeter un coup d&#8217;oeil ci-dessous pour mieux comprendre.<br \/>\nL&#8217;image de remplacement de la vid\u00e9o est tout en dessous ensuite nous avons logiquement la vid\u00e9o puis le fond pour les images. Les images viennent ensuite puis enfin chacune des \u00e9tiquettes associ\u00e9es aux images.<br \/>\nLa petite subtilit\u00e9 vient du fait que les images elles m\u00eame se chevauchent. <\/p>\n<p><a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_videoInteractive_editor2.jpg\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_videoInteractive_editor2.jpg\" alt=\"Exemples - R\u00e9aliser une vid\u00e9o interactive\" title=\"Exemples - R\u00e9aliser une vid\u00e9o interactive\" width=\"960\" height=\"253\" class=\"alignnone size-full wp-image-7788\" \/><\/a><\/p>\n<p>Le deuxi\u00e8me \u00e9l\u00e9ment important de cette s\u00e9quence ce sont les actions. Chaque image d\u00e9clenche une \u00e9tiquette au survol de la souris, nous devons donc param\u00e9trer un \u00e9v\u00e9nement &#8220;Show&#8221; \u00e0 l&#8217;entr\u00e9e de la souris sur l&#8217;image, et cela pour chacune de ces images.<\/p>\n<p><a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_videoInteractive_editor1.jpg\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_videoInteractive_editor1.jpg\" alt=\"Exemples - R\u00e9aliser une vid\u00e9o interactive\" title=\"Exemples - R\u00e9aliser une vid\u00e9o interactive\" width=\"960\" height=\"253\" class=\"alignnone size-full wp-image-7788\" \/><\/a><\/p>\n<h4>La page Projet<\/h4>\n<p>Pour ce projet, il \u00e9tait utile de mettre cette s\u00e9quence en autoplay, nous avons donc, <strong>apr\u00e8s avoir d\u00e9pos\u00e9 notre s\u00e9quence dans le Storybuilder, coch\u00e9 l&#8217;Autoplay<\/strong>.<\/p>\n<p><a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_videoInteractive_project.jpg\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_videoInteractive_project.jpg\" alt=\"Exemples - R\u00e9aliser une vid\u00e9o interactive\" title=\"Exemples - R\u00e9aliser une vid\u00e9o interactive\" width=\"960\" height=\"669\" class=\"alignnone size-full wp-image-7786\" \/><\/a><\/p>\n<p>Le projet est maintenant publi\u00e9, nous pouvons le partager ou l&#8217;int\u00e9grer dans votre site gr\u00e2ce aux diff\u00e9rents du types d&#8217;exportation disponibles. <strong>Dans cette page par exemple, nous avons choisi d&#8217;ins\u00e9r\u00e9 cette cr\u00e9ation \u00e0 l&#8217;aide d&#8217;une iframe.<\/strong><br \/>\nPour en savoir plus sur l&#8217;utilisation de ces codes d&#8217;exportation, vous pouvez consulter <a href=\"https:\/\/flaven.fr\/2012\/06\/27\/inserer-une-creation-3wdoc-dans-une-page-html-profiter-de-la-fonction-dexport-et-de-partage-de-3wdoc\/\">cet article<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>D\u00e9finition 3WDOC vous permet de faire interagir une vid\u00e9o avec des \u00e9l\u00e9ments externes. Nous vous proposons de faire appara\u00eetre des \u00e9l\u00e9ments au fur et \u00e0&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2012\/07\/exemples-realiser-une-video-interactive\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">Exemples &#8211; R\u00e9aliser une vid\u00e9o interactive<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"R\u00e9alisez des vid\u00e9os interactives avec 3WDOC. Ajoutez des \u00e9l\u00e9ments dynamiques selon les r\u00e9ponses, comme des chaussures ou des sacs, et affichez des \u00e9tiquettes.","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":[3433,1],"tags":[1690,5,2267,1689,799,337,2261,398,606,2213],"class_list":["post-7782","post","type-post","status-publish","format-standard","hentry","category-3wdoc-tutorials","category-miscellaneous-other","tag-catalogue","tag-e-commerce","tag-interactif","tag-interactive","tag-interactives","tag-media","tag-narration","tag-rich-media","tag-storytelling","tag-video"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-21w","jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/7782","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=7782"}],"version-history":[{"count":0,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/7782\/revisions"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=7782"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=7782"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=7782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}