{"id":7750,"date":"2012-07-18T15:52:06","date_gmt":"2012-07-18T13:52:06","guid":{"rendered":"http:\/\/flaven.fr\/?p=7750"},"modified":"2012-07-18T15:52:06","modified_gmt":"2012-07-18T13:52:06","slug":"exemples-realiser-un-slideshow-video","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2012\/07\/exemples-realiser-un-slideshow-video\/","title":{"rendered":"Exemples &#8211; R\u00e9aliser un slideshow vid\u00e9o"},"content":{"rendered":"<p><iframe loading=\"lazy\" style=\"box-shadow:0px 0px 5px #bbb;\" width=\"960\" height=\"540\" scrolling=\"no\" frameborder=\"0\" name=\"3wdoc-embed\" src=\"http:\/\/story.3wdoc.com\/cb6c4c2fad07ad2d52469550411ab7460d3d46da98b7af0680e626e7dd5eb88575\/7\/index.html\"><\/iframe><\/p>\n<h4>D\u00e9finition<\/h4>\n<p>Ce slideshow est un d\u00e9filement de quatre vid\u00e9os avec une navigation entre ces vid\u00e9os.<\/p>\n<p>Vous pouvez voir ce projet sur <a href=\"http:\/\/story.3wdoc.com\/cb6c4c2fad07ad2d52469550411ab7460d3d46da98b7af0680e626e7dd5eb88575\/7\/index.html\">sa page de publication<\/a>.<\/p>\n<h4>La page M\u00e9dia<\/h4>\n<p>Vous voyez ici les vid\u00e9os upload\u00e9es pour ce projet<\/p>\n<p><a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_slideshowVideo_media.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_slideshowVideo_media.jpg\" alt=\"exemple_slideshowVideo_media\" title=\"exemple_slideshowVideo_media\" width=\"960\" height=\"566\" class=\"aligncenter size-full wp-image-7752\" \/><\/a><\/p>\n<h4>La page Editeur<\/h4>\n<p>Sur cette page vous pouvez voir le fonctionnement du slideshow<br \/>\nEn haut \u00e0 gauche, dans le M\u00e9dia grabber, nous retrouvons les vid\u00e9os upload\u00e9es dans le gestionnaire de m\u00e9dias.<br \/>\nA droite le Positionner montre que la vid\u00e9o est en arri\u00e8re plan et dessus sont pos\u00e9s les boutons de navigation.<\/p>\n<p>La Timeline nous permet de bien distinguer les vid\u00e9os, symbolis\u00e9es par une ic\u00f4ne de cam\u00e9ra et une couleur rouge, et les boutons de navigation r\u00e9alis\u00e9s gr\u00e2ce \u00e0 des Articles, ic\u00f4nes de stylo et couleur violette.<br \/>\n<strong>Les vid\u00e9os se succ\u00e8dent dans le temps<\/strong>, alors que <strong>les boutons de navigation s&#8217;\u00e9tendent sur toute la dur\u00e9e de la timeline<\/strong>.<\/p>\n<p>Pour que les boutons de navigation apparaissent bien au-dessus des vid\u00e9os, <strong>dans l&#8217;onglet Position, nous avons indiqu\u00e9 un z-index tr\u00e8s important<\/strong> (le slider \u00e0 droite).<\/p>\n<p><a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_slideshowVideo_editor.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_slideshowVideo_editor.jpg\" alt=\"slideshowVideo_editor\" title=\"exemple_slideshowVideo_editor\" width=\"960\" height=\"736\" class=\"aligncenter size-full wp-image-7751\" \/><\/a><\/p>\n<h4>La page Projet<\/h4>\n<p>Pour cette page nous avons ajout\u00e9 une image dans notre M\u00e9dia manager, pour pouvoir int\u00e9grer une image de Cover. Il est n\u00e9cessaire que cette image est au maximum la taille de base du projet (ici 960&#215;540). Nous avons aussi choisi de mettre ce projet en plein \u00e9cran, la petite case Plein \u00e9cran est coch\u00e9e, elle est rose.<\/p>\n<p>Avant de publier, nous avons gliss\u00e9 <strong>notre s\u00e9quence du r\u00e9servoir de s\u00e9quence dans le Storybuilder<\/strong>, et nous avons <strong>coch\u00e9 la case Autoplay<\/strong> pour que la lecture se fasse automatiquement.<\/p>\n<p><a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_slideshowVideo_project.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_slideshowVideo_project.jpg\" alt=\"exemple_slideshowVideo_project\" title=\"exemple_slideshowVideo_project\" width=\"960\" height=\"704\" class=\"alignnone size-full wp-image-7753\" \/><\/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 du types d&#8217;exportation disponible.<br \/>\nPour plus de d\u00e9tail sur l&#8217;utilisation de ces codes d&#8217;exportation, 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 Ce slideshow est un d\u00e9filement de quatre vid\u00e9os avec une navigation entre ces vid\u00e9os. Vous pouvez voir ce projet sur sa page de publication.&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2012\/07\/exemples-realiser-un-slideshow-video\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">Exemples &#8211; R\u00e9aliser un slideshow vid\u00e9o<\/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":"Cr\u00e9ez un slideshow vid\u00e9o avec quatre vid\u00e9os et navigation. Utilisez les outils M\u00e9dia, Editeur et Timeline pour un r\u00e9sultat professionnel.","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":[1142,2267,1689,799,337,2261,398,792,606,1660,2213],"class_list":["post-7750","post","type-post","status-publish","format-standard","hentry","category-3wdoc-tutorials","category-miscellaneous-other","tag-diaporama","tag-interactif","tag-interactive","tag-interactives","tag-media","tag-narration","tag-rich-media","tag-slideshow","tag-storytelling","tag-timeline","tag-video"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-210","jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/7750","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=7750"}],"version-history":[{"count":0,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/7750\/revisions"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=7750"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=7750"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=7750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}