BigVideo.js : intégrer une vidéo en arrière plan sur son site !

Intégrer une vidéo en arrière-plan de son site à la place d’un motif ou d’une image peut avoir le plus bel effet. Le plugin jQuery BigVideo.js permet de le faire. Le plugin permet même de créer des playlists !

 

Pour fonctionner, il nécessite les librairies suivantes :

 

Comme il fonctionne en HTML5 et utilise la librairie Video.js , il va falloir utiliser des vidéos compatibles HTML5, c’est-à-dire du .mp4 pour les navigateurs comme safari, mais il vaut mieux des  vidéos au format Ogg (.ogv) pour Firefox. Heureusement, le plugin semble fonctionner sous chrome sans avoir à utiliser de vidéos au format .webm (le format de Google).

Heureusement, le plugin gère les deux formats de vidéo facilement (.mp4 et .ogv). Il est donc parfaitement compatible avec les navigateurs modernes. Par contre, il n’a pas de fonction de callback pour les navigateurs anciens qui ne gèrent pas le HTML5 (comme Internet Explorer 6, 7 et 8).

 

Pour finir, ce genre d’effet est très intéressant lorsqu’on consulte un site depuis un ordinateur fixe, mais depuis un mobile, c’est une toute autre histoire. Vous savez, sur mobile les vidéos ne se lancent jamais automatiquement : il faut toujours les lancer manuellement. Donc le plugin ne peut tout simplement pas fonctionner pas sur mobile. Pour exemple, sur iPhone, un petit symbole de lecture de vidéo apparaît en arrière-plan, et lorsqu’on clique dessus, la vidéo se lance en plein écran et on ne peut plus naviguer sur le site. Donc aucun intérêt (mais ce n’est pas la faute du développeur, c’est simplement dû aux limitations des terminaux mobiles). C’est donc à prendre en considération…

A voir et à tester ici : BigVideo.js

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>