API plein écran de Chrome

Question

Selon cet article Google Chrome 15 dispose d'une API JavaScript plein écran.

J'ai essayé de le faire fonctionner mais sans succès. J'ai également cherché la documentation officielle en vain.

À quoi ressemble l'API JavaScript plein écran ?

Answer 1

L'API ne fonctionne que pendant l'interaction avec l'utilisateur, elle ne peut donc pas être utilisée de manière malveillante. Essayez le code suivant :

addEventListener("click", function() {
    var el = document.documentElement,
      rfs = el.requestFullscreen
        || el.webkitRequestFullScreen
        || el.mozRequestFullScreen
        || el.msRequestFullscreen 
    ;

    rfs.call(el);
});

Answer 2

J'ai créé un simple wrapper pour l'API Fullscreen, appelé screenfull.js Nous avons donc décidé de mettre en place un nouveau système de gestion des préfixes, afin d'aplanir les difficultés liées aux préfixes et de corriger certaines incohérences dans les différentes implémentations. Consultez le Démonstration pour voir comment l'API Fullscreen fonctionne.

Lecture recommandée :

• Utilisation de l'API plein écran dans les navigateurs web
• MDN - API plein écran

Answer 3

Voici quelques fonctions que j'ai créées pour travailler avec le plein écran dans le navigateur.

Ils permettent à la fois d'entrer et de sortir en plein écran dans la plupart des principaux navigateurs.

function isFullScreen()
{
    return (document.fullScreenElement && document.fullScreenElement !== null)
         || document.mozFullScreen
         || document.webkitIsFullScreen;
}

function requestFullScreen(element)
{
    if (element.requestFullscreen)
        element.requestFullscreen();
    else if (element.msRequestFullscreen)
        element.msRequestFullscreen();
    else if (element.mozRequestFullScreen)
        element.mozRequestFullScreen();
    else if (element.webkitRequestFullscreen)
        element.webkitRequestFullscreen();
}

function exitFullScreen()
{
    if (document.exitFullscreen)
        document.exitFullscreen();
    else if (document.msExitFullscreen)
        document.msExitFullscreen();
    else if (document.mozCancelFullScreen)
        document.mozCancelFullScreen();
    else if (document.webkitExitFullscreen)
        document.webkitExitFullscreen();
}

function toggleFullScreen(element)
{
    if (isFullScreen())
        exitFullScreen();
    else
        requestFullScreen(element || document.documentElement);
}

Answer 4

Le test suivant fonctionne dans Chrome 16 (branche dev) sur X86 et Chrome 15 sur Mac OSX Lion

http://html5-demos.appspot.com/static/fullscreen.html

Answer 5

Dans le projet de bibliothèque de fermeture de Google, il y a un module qui a fait le travail, ci-dessous est l'API et le code source.

Bibliothèque Closure API fullscreen.js

Code Closure libray fullscreen.js