6 ressources Javascript pour manipuler la vidéo de manière originale

Le 15/10/2014

Dans Webdesign

De plus en plus de sites se mettent en valeur grâce à diverses animations au survol, au scroll de la page ou tout simplement en continu. Pour les réaliser, il est bien sûr possible de faire appel à des techniques comme canvas, ou des animations en SVG, mais la barrière technique est assez lourde : trop peu de ressources, et beaucoup trop de temps nécessaire pour obtenir un résultat satisfaisant.

Et si la vidéo était une solution de secours ? Que ce soit sous forme naturelle en HTML 5 ou transformée sous forme de Gif, elle pourrait bien remplacer certaines animations nécessaires à votre site !

Gifshot

Gifshot est une library Javascript vous permettant de transformer une vidéo, une pile d'images ou un flux (une webcam par exemple) en gif, que vous pourrez contrôler avec d'autres outils ensuite.

Gifshot

Scroll video

Ce petit pen vous propose un moyen de gérer la position de la vidéo avec le scroll de la page. Vers le bas pour avancer, vers le haut pour reculer !

Codepen scroll video

CoverVid

Vous rêviez de pouvoir mettre une balise du style background-video dans votre CSS à la place de background-image ? CoverVid est sans doute ce qui se rapproche le plus de cela a l'heure actuelle !

Covervid

FitVids

FitVids vous propose d'insérer vos vidéos de manière responsive dans votre page.

Fitvids

PrettyEmbed

Tous ceux qui ont déjà importé une vidéo depuis Youtube le savent, le skin par défaut n'est pas un modèle de beauté.
PrettyEmbed vous propose de nettoyer un peu tout ça simplement.

Pretty embed

HTML5 Video Voting

Zurb, les créateurs du framework Foundation, nous propose cette ressource permettant de voter pour notre partie favorite de vidéos grace à un simple appuie sur la barre espace. Il est aussi possible de visualiser le nombre de votes grace à un graphe s'affichant au survol de la vidéo.

Video voting