Utiliser l’API FullScreen via un plugin jQuery

Utiliser l’API FullScreen via un plugin jQuery

Html5, CSS3, Javascript

Vous le savez sans doute, Html5 permet l’affichage d’un élément voir de votre page entière en mode plein écran.

Voici un plugin jQuery bête et méchant pour gérer le passage et la sortie du mode plein écran.

(function($){
   $.fn.enterFullScreenMode = function(){
      var el = this.get(0) == document ? document.documentElement : this.get(0);
      var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || null;
      if(rfs){
         rfs.call(el);
      }else{
         alert('Votre navigateur ne supporte pas le passage en mode plein écran.');
      }
   };

   $.fn.exitFullScreenMode = function(){
      var rfs = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen;
      rfs.call(document);
   };
})(jQuery);

Exemples d’utilisations :

/* Basculer toute la page en plein écran */
$(document).enterFullScreenMode();

/* Sortir du mode plein écran */
$(document).exitFullScreenMode();

/* Passer un élément particulier en plein écran */
$('#maVideo').enterFullScreenMode();

A propos de l'auteur

Commentaires

  • Anthony le 31/03/2013 à 19:12

    Indeed... :)

  • Sébastien Decamme le 31/03/2013 à 19:17

    Je dirais même plus : what else ?

* KeywordLuv ! Entrez VotreNom@VosMotsClés dans le champ "Nom" pour bénéficier d'un mot-clef ciblé.