HTML5 sortant de la vidéo en plein écran

Vous pouvez uniquement appeler document.mozCancelFullScreen()si vous êtes à l'intérieur d'un document qui est plein écran. par exemple si vous êtes dans une qui est contenue à l'intérieur d'un autre document, qui est plein écranmozCancelFullScreen() ne fait rien à l'intérieur de l'iframe, comme seule l'extérieur du document est acutally plein écran. c'est à dire l'appel de mozCancelFullScreen à l'extérieur du document d'annuler plein écranmais de le remettre à l'intérieur du document ne sera pas.

Aussi être conscient que mozCancelFullScreen() revient plein écran pour le précédent plein écran de l'élément de plein écran. Donc, si vous avez demandé plein écran plusieurs fois, à l'annulation plein écran ne sera pas nécessairement la sortie plein écran entièrement, il peut revenir à la précédente plein écran état.

Exemples:

1. Vous pourriez aller avec:

$(document).on('webkitExitFullScreen', function()      {       
  alert("Full Screen Closed"); 
});

2. Vous pouvez utiliser une variable pour la poursuite de l'utilisation:

var exitedFullScreen;
$(document).on("webkitExitFullScreen", function() {
   exitedFullScreen = !!$(document).fullScreen();
}

3. en l'Appliquant à votre conteneur:

$('video')[0].webkitExitFullScreen();

4. à l'Aide de JavaScript:

<script type="text/javascript">
  function ExitVideo() {
      document.getElementsByTagName('video')[0].webkitExitFullScreen();
  }
</script>

5. Il y a aussi plusieurs plug-ins tiers, qui vous offrent l'accès à l'événement dont vous avez besoin:

• http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
• https://github.com/ruidlopes/jquery-fullscreen

EDIT 1

Il y a des problème de compatibilité entre les navigateurs, voici l'exemple de différents états:

document.webkitExitFullscreen();
document.mozCancelFullscreen();
document.exitFullscreen();

EDIT 2

Le plein écran de l'API est activé par défaut dans Chrome 15Firefox 14et Opera 12. Pour plus d'informations sur le reste de l'API, voir la spec.

Mis à jour 2012-10-11: pour être en ligne avec les spec de changements. Lowercase le "S"
dans requestFullscreen() et document modifié.webkitCancelFullScreen()
document.webkitExitFullscreen().

MODIFIER 3

Essayez ce qui suit, sans l'aide de jQuery pour déboguer dans Firefox:

var videoElement = document.getElementById("myvideo");

  function toggleFullScreen() {
    if (!document.mozFullScreen && !document.webkitFullScreen) {
      if (videoElement.mozRequestFullScreen) {
        videoElement.mozRequestFullScreen();
      } else {
        videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
      }
    } else {
      if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else {
        document.webkitCancelFullScreen();
      }
    }
  }

  document.addEventListener("keydown", function(e) {
    if (e.keyCode == 13) {
      toggleFullScreen();
    }
  }, false);

EDITION 4

Pour l'utilisation de jQuery dans Firefox, essayez les différentes exemple:

if (document.mozCancelFullScreen) { 
    alert('Full Screen Closed') 
}

Voici un code mis à jour pour l'instant (4 Juin 2017), fonctionne sur tous les navigateurs:

if (document.exitFullscreen)
    document.exitFullscreen();
else if (document.webkitExitFullscreen)
    document.webkitExitFullscreen();
else if (document.mozCancelFullScreen)
    document.mozCancelFullScreen();
else if (document.msExitFullscreen)
    document.msExitFullscreen();