Blog d'un Éternel Geek

La vidéo prend de l'ampleur et de l'espace aussi avec HTML5

http://vivageek.com/data/images/dev/videoback6.jpg

 

L'HTML5 n'en a pas fini d'étonner. La vidéo, il en a fait un peu sa marque de fabrique comme je l'avais déjà expliquée dans mon article sur la mort de Flash.

 

Certains sites ont profité de ses possibilités en la matière pour exprimer leur communication produit à travers des vidéos backgrounds. Vous en avez entendu parlez, je présume, mais savez vous comment mettre en place facilement cette technique et ainsi vous aussi régalez vos auditeurs de cette technologie.

 

J'ai donc cherché sur mes bouquins spécialisés la meilleure façon d'intégrer proprement et soigneusement ce type d'animation. J'avais par le passer expérimenter l'animation background par CSS, puis par iframe mais sincèrement à l'aide d'une vidéo jamais.

 

Je me suis mis un HTML simpliste avec quelques habillages CSS commun, mon bouquin à la main et j'ai mis mon projet en application.

 

C'est vraiment merveilleux. Cela change radicalement l'atmosphère du site. Autant on a eu de jolies animations en CSS et JS, autant on est no limit sur ce type de mise en place.

 

Le langage informatique m'étonnera toujours. Je suis loin des Goto et Run de mon époque sur mon vieux Amiga 520.

 

VivaGeek cherche les moyens de communication web2.0 qui lie l'homme et la machine. C'est le but de ce blogue, aidé à mieux comprendre comment la communication a permis cette connexion technologique. L'homme parle avec la technologie ou à travers elle. On communique de moins en moins directement.

 

http://vivageek.com/data/images/dev/videoback.jpg

 

La vidéo est un peu un support visuel animé de cette communication. Sachez que 28% des re-tweet comportent des vidéos. De même pour les j'aime Facebook. Aller sur vos réseaux sociaux, vous constaterez que la vidéo est 2e derrière l'image, grande reine depuis toujours.

 

Vidéo Background comme support pub

 

L'intégration d'une vidéo pose certains problèmes, je pense surtout aux nombreux ralentissements lors du chargement de la page. Cependant en l'ajoutant à une page web, vous aurez seulement besoin de la charger une fois, il va la mettre en cache après la première boucle.

 

La vidéo fournit donc un fond idéal pour mettre en avant un contenu dont vous souhaitez attirer l'attention.

 

Vous pouvez placer subtilement des citations publicitaires en alternance avec vos images produites qui seront mis en valeur par la vidéo en arrière-plan. C'est un peu du marketing subjectif, mais HTML5 le permet alors pourquoi s'en priver ?

 

Les techniques pour attirer l'auditeur sont toutes centrées sur le contenu, il est à l'honneur puisqu'il communique les informations. On ne doit jamais oublier que le but est d'attirer l'œil de notre auditeur vers ce qui nous intéresse.

 

Une vidéo permet cette prouesse en distrayant la faculté visuelle de l'auditeur et en l'amenant progressivement à porter toute son attention sur des portions proposées.

 

Remarquez dans les grandes surfaces ces grandes gondoles à l'entrée d'un rayon proposant le dernier ustensile à salade moderne. Une vidéo est juxtaposée où un bonimenteur télévisuel nous explique son fonctionnement et Ô combien il nous sera indispensable à l'avenir.

 

C'est la même chose amener les consommateurs à penser à autre chose que leur objectif course et éventuellement acheter ce produit magique.

 

Internet n'a pas inventé la roue comme on dit dans le milieu des programmeurs, elles l'utilisent par le biais de la technique inventée, c'est tout.

 

Pour ma part, je me suis créé une page web simple avec une architecture de base de frameworks type Boostrap et j'ai inclus 2 feuilles de style, une pour le CSS et une pour la police.

 

Ceux-ci ajoutent une feuille de style normalize.css pour réinitialiser tous
les éléments pour l'affichage multiplateforme et la police Google
que nous allons utiliser dans la conception du menu.

 

Mettez dans votre index.php après <head> ces 2 codes :

 

<link href="http://vivageek.livehost.fr/css/normalize.css" rel="stylesheet" type="text/css"/>
<link href="http://fonts.googleapis.com/css?family=Amaranth:400,700" rel="stylesheet" type="text/css" />

 

Comme quoi, google à du bon dans son arsenal.

 

Mise en Place

 

http://vivageek.com/data/images/dev/videoback3.jpg

 

On a donc notre background et l'on veut qu'une vidéo soit à son lieu et place. Pour l'occasion, je suis allé chercher cette vidéo "Cavernae" de Nicolas Huffman assez connus mais que j'adore. Il l'a reprise sur la base d'une vidéo de Franck Doassans du très bon site 7thcircle.

 

Fouillez vous en trouverez de très belle soit filmer ou alors en C4D.

 

Le but sera de mettre cette vidéo dans plusieurs formats. Souvenez vous mon article sur flash est mort.

 

Il faudra mettre la même vidéo en format .mov, .Mp4, .ogv, .webm. Cela permettra de pallier à tous les lecteurs rencontrés. Vous allez ensuite mettre vos vidéos soit à la racine, soit dans un dossier et vous ferez suivre l'url dans le code.

 

<source src="http://vivageek.livehost.fr/Path vers vos vidéos" type="video/format">

 

 

Attention, il est important de fournir ces formats, car cette vidéo fera office de background par conséquent, on va miser sur son impact visuel pour tous les futurs auditeurs.

 

Ce code va être placé dans le corps de notre site afin qu'il récupère toute la partie commune au contenu de votre site.

Il devra être mis juste après la balise d'ouverture body.

 

<video autoplay loop>
<source src="http://vivageek.livehost.fr/Cavernae.mp4" type="video/mp4">
<source src="http://vivageek.livehost.fr/Cavernae.webm" type="video/webm">
<source src="http://vivageek.livehost.fr/Cavernae" type="video/ogg">
</video>

 

Dans un premier temps, vous allez être surpris de voir qu'elle ne s'affiche qu'en haut de votre page et non en arrière-plan, ne vous inquiétez pas et suivez la suite.

 

 

CSS3 à la rescousse

 

http://vivageek.com/data/images/dev/videoback5.jpg

 

HTML5 a besoin de sa copine de toujours CSS3 pour mettre, non par magie mais plutôt grâce à la propriété z-index. Voici 2 liens qui explique le fonctionnement :

 

 

Ce code source est a inséré sur votre fichier style css appelé.

 

video{
position:fixed;
left:0;top:0;
min-width:100%;
min-height:100%;
width:auto;
height:auto;
z-index:-100;
visibility: visible;
}

 

 

Une image en bouée de sauvetage

 

 

 http://vivageek.com/data/images/dev/videoback4.jpg

N'oubliez pas d'attribuer à votre body une image de secours en cas de bug ou de souci. Vous ne laisseriez pas vos auditeurs sans rien en retour, ce qui serait navrant.

 

 

 

Code CSS

 

background: url(images/image.jpg) #000 norepeat center center fixed;
-webkit-background-size: cover;

 

Vous remarquerez que j'ai mis aussi une couleur en 2e roué de secours, au moins là on a couvert tous les côtés.

 

Voilà votre vidéo, va pouvoir tourner en boucle comme background sur votre page web. Si vous avez laissé le son, il sera également de la partie, pensez à supprimer le son de votre vidéo si vous ne souhaitez pas qu'il soit présent.

 

http://vivageek.com/data/images/dev/videoback2.jpg

 

Personnellement, je préfère sans le son pour le confort de l'auditeur qui n'a pas besoin d'être agressé. Souvenez-vous mes conseils dans l'article la psychologie web : agression par l'image?

 

Pour enlever le son, il y a assez de plates-formes en ligne et de logiciels dont ceux de Windows pour le faire.

 

Vous pouvez le laisser si vous pensez qu'il est un renfort supplémentaire de publicité.

 

Par exemple, si Darty me demander de lui faire un blogue responsive avec un background vidéo, je pense que laisser sur la page d'entrée le son d'un animateur Darty serait un plus. On pourrait ensuite changer la vidéo lors du chargement d'une autre page menant vers les services où là elle aurait le son coupé pour le confort de lecture du client.

 

Vous voyez tout êtes possible. HTML5 et CSS3 ont permis d'agencer nos rêves les plus fous.

 

Voici quelques exemples du rendu du vidéo background :

 

 

Merci de m'avoir lu et à bientôt.

 

Pensez à partagez sur vos réseaux sociaux favoris.






 Geek me     Je suis un Geek dans l'âme. 18 ans à silloner internet pour récolter des informations afin de comprendre son fonctionnement. Idéalement j'étudie également le comportement humain.

C'est afin de vous partager mes connaissances que j'ai ouvert ce blog alors je vous souhaite une bonne lecture.



À lire également


Écrire un commentaire

Votre adresse de messagerie ne sera pas publiée.

Quelle est la deuxième lettre du mot swty ? :