Utiliser le Fullscreen HTML5 dans vos sites internet

Parmi les avancées intéressantes du HTML5 il y a la possibilité de mettre une page en plein écran directement à l'aide de Javascript. Idéal pour ouvrir une galerie d'image par exemple.

Suivant le navigateur utilisé la règle change un peu, c'est pourquoi on ne peut avoir une condition unique. D'autres navigateurs ne supporte pas le plein écran, il faut donc une solution qui ne les fasse pas planter.

Le script de base

Voici le premier script a implanter avant l'utilisation. Il contient deux fonctions, une pour entrer en fullscreen et l'autre pour en sortir.

 

// Entrer en plein écran
function doFullScreen(){
    var d = document.documentElement;
    if (d.requestFullscreen) {
        d.requestFullscreen();
        return true;
    }elseif (d.mozRequestFullScreen) {
        d.mozRequestFullScreen();
        return true;
    }elseif (d.webkitRequestFullScreen) {
        d.webkitRequestFullScreen();
        return true;
    }
    else{
        return false;
    }
}
// Sortir du plein écran
function closeFullScreen(){
    if (document.exitFullscreen) {
        document.exitFullscreen();
    }
    else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }
    else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }
}

 

L'utilisation

Une fois le script implanté l'utilisation est simple, pour entrer en plein écran il suffit d’exécuter la fonction comme suit :

doFullscreen();

Et pour fermer le plein écran, rien de plus simple

closeFullScreen(); 

Commentaires