création de site internet

flus RSS du blogsur Facebooksur Twitter

06
11

Background HTML en vidéo ou en image

dans Javascript jQuery

En terme de créa, avoir un fond de site habillé avec une grande image est souvent un effet assez réussi. Mais des contraintes techniques rendent souvent difficile une telle opération, ne serait-ce que le poids de l'image ou son rendu lors du redimensionnement de la fenêtre.

J'ai trouvé 3 plugins jQuery qui viennent solutionner ça et en plus permettent d'utiliser une vidéo en background HTML.

BigVideo.js, des vidéos fullscreen en fond d'écran

Le plugin jQuery BigVideo.js est basée sur le player vidéo en HTML5 Video.js. Il permet d'afficher en fond de site, une vidéo HTML5, fullscreen, silencieuse et qui se redimensionne automatiquement.

Son installation est relativement fastidieuse car elle nécessite l'appel à de nombreux scripts et plugins :

<!-- 1. jQuery, évidemment -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
<!-- 2. jQuery UI -->
<script src="javascript/jquery-ui-1.8.22.custom.min.js"></script>
<!-- 3. le plugin jQuery imagesloaded -->
<script src="javascript/jquery.imagesloaded.min.js"></script>
<!-- 4. le plugin Video.js -->
<script src="http://vjs.zencdn.net/c/video.js"></script>
<!-- 5. et enfin, le plugin BigVideo -->
<script src="javascript/bigvideo.js"></script>

En revanche son intégration est très simple, il suffit d'utiliser le code suivant :

<script>
     $(function() {
          var BV = new $.BigVideo();
          BV.init();
          BV.show('http://www.mon_site_video.com/ma_video.mp4',{ambient:true});
     });
</script>

Notez le paramètre {ambient:true} qui permet de dire que la vidéo est une vidéo d'ambiance, sans son donc et en autoplay. En détournant le plugin on peut également en tirer un player vidéo fullscreen et qui se redimensionne automatiquement avec le navigateur. On peut également combiner plusieurs vidéos en une playlist automatique. On peut exploiter aussi une image à la place de la vidéo, et notamment comme alternative. Enfin, BigVideo.js étant basé sur le plugin Video.js, il est possible d'exploiter son API javascript pour prendre le contrôle de la vidéo.

Plus d'information : BigVideo.js sur GitHub

Tubular, vidéos YouTube en background fullscreen

A l'instar de BigVideo.js, Tubular est un plugin Jquery qui permet d'appliquer une vidéo fullscreen à son background HTML. Comme pour BigVideo.js, la vidéo s'adapte aux dimensions du navigateur et se redimensionne automatiquement. La seule différence est que la vidéo appelée par Tubular doit être une vidéo hébergée sur YouTube.

Son installation se fait par l'appel du fichier .js (et bien évidemment de jQuery au préalable) :

<script type="text/javascript" charset="utf-8" src="javascript/jquery.tubular.1.0.js"></script>

Son intégration nécessite la déclaration d'un wrapper juste après le <body>, un élément de votre structure HTML (ex: un <div>) qui va englober le contenu HTML de votre page :

<body>
     <div id="mon_wrapper">
          [... HTML du contenu de ma page ...]
     </div>
</body>

Tubular va exploiter ce wrapper pour mettre au premier-plan votre contenu et en arrière-plan la vidéo. Ensuite, Tubular est appelé via le code ci-dessous (de préférence à intégrer dans le $('document').ready de jQuery) :

$('document').ready(function() {
     $('#wrapper').tubular({videoId: '0Bmhjf0rKe8'});
});

videoId est l'identifiant YouTube de la vidéo.

Plus d'information : exemple et présentation des options sur le site officiel

bgStretcher, une image fullscreen pour votre background HTML

bgStretcher est un plugin jQuery destiné à l'origine à afficher un slideshow d'images en arrière-plan des pages d'un site. Mais détourné, il peut simplement afficher une image plein écran, aux dimensions du navigateur.

Je vous invite à lire le précédent article du blog "slideshow, diaporama, galerie photo - 1" qui présente ce plugin.

Plus d'informations : le site officiel

Partager :