HTML5 FullScreen API basculer avec JavaScript

Question

J'essaye de faire un bouton qui permuterait (on/off) HTML5 en plein écran sur un certain site Web. Après avoir lu beaucoup de documentation, il semble qu'il y ait encore des incohérences dans la façon dont les navigateurs traitent certaines propriétés pour cela.

Je suis allé pour une sorte de "cross-browser" approche fonctionne dans Firefox et Safari/MacOS, fonctionne partiellement dans Safari/Windows et échoue totalement à travailler dans Chrome et Opera.

Quelques extraits de code castrés:

// class init 
initialize: function() { 

    this.elmButtonFullscreen = $('fullscreen'); 
    this.elmButtonFullscreen.on('click', this.onClickFullscreen.bindAsEventListener(this)); 
}, 

// helper methods 
_launchFullScreen: function(element) { 

    if(element.requestFullScreen) { element.requestFullScreen(); } 
    else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } 
    else if(element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); } 
}, 
_cancelFullScreen: function() { 

    if(document.cancelFullScreen) { document.cancelFullScreen(); } 
    else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } 
    else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } 
}, 
_isFullScreen: function() { 

    fullScreen = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled ? true : false; 
    if(this.debug) console.log('Fullscreen enabled? ' + fullScreen); 
    return fullScreen; 
}, 

// callbacks 
onClickFullscreen: function(e) { 

    e.stop(); 
    if(this._isFullScreen()) this._cancelFullScreen(); 
    else this._launchFullScreen(document.documentElement); 
} 

Answer 1

Modification de la 1ère ligne de _isFullScreen fonction

fullScreen = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitIsFullScreen ? true : false; 

le tour est joué (au moins pour Firefox, Chrome et Safari sur Mac et Windows)

Answer 2

Sur la base de ce I found on Mozilla's Developer Network la fonction pour Webkit est effectivement orthographié légèrement différente.

document.webkitRequestFullscreen avec un "s" minuscule pour l'écran.

Et from W3 spec, il est destiné à être avec un "s" minuscule.

Sur le lien ils disent MDN:

Note: La spécification utilise l'étiquette, "Fullscreen" comme dans "requestFullscreen" ou "fullscreenEnabled" - sans 'd' un capital. L'implémentation décrite ici et d'autres implémentations préfixées peuvent utiliser un «S» majuscule.

Answer 3

Cliquez Handler:

$("#toolFullScreen").click(function() { 
    goFullScreen(); 
}); 

Fonction:

function goFullScreen() { 
    var el = document.documentElement, 
     rfs = el.requestFullScreen 
     || el.webkitRequestFullScreen 
     || el.mozRequestFullScreen 
     || el.msRequestFullscreen; 

    rfs.call(el); 
} 

---

Gardez à l'esprit que la demande fullScreen a besoin d'être fait par un événement déclenché par l'utilisateur comme un événement click -mousedown, etc .. mouseup