Quitter le plein écran Avec La Balise Vidéo HTML5

Je vais essayer d'obtenir la vidéo de sortie en plein écran à la fin de la vidéo, mais il ne sera pas. J'ai cherché et trouvé des façons de le faire, mais pour la vie de moi je ne peux pas le faire fonctionner. Je me suis mise à l'essai dans la dernière version de Chrome (15) et iOS 5 sur l'iPad2.
Voici le code que j'utilise:

<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function(){
  $("#myVideoTag").on('ended', function(){
    webkitExitFullScreen();
  });
});

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>854x480</title>
</head>
<body>
<video  width="854" height="480"
        src="video/854x480-Template_1.mp4"
        poster="images/poster.jpg"
        id="myVideoTag"
        type="video/mp4"
        preload="auto"
        autobuffer
        controls>
  <p>Requires HTML5 capable browser.</p>
</video>

</body>
</html>

Toute aide sera appréciée.

OriginalL'auteur ShockTower | 2011-11-17

  1. 15

    webkitExitFullScreen est une méthode de la video élément, de sorte qu'il doit être appelé de cette façon:

    videoElement.webkitExitFullscreen();
//or
$("#myVideoTag")[0].webkitExitFullscreen();
//or, without needing jQuery
document.getElementsById('myVideoTag').webkitExitFullscreen();

    Puisque c'est à l'intérieur d'un gestionnaire d'événement, this sera le video que ended, donc:

    $("#myVideoTag").on('ended', function(){
  this.webkitExitFullscreen();
});

    Il devient un peu plus compliqué parce que webkitExitFullscreen ne fonctionne que dans webkit-navigateurs (Safari, Chrome, Opera), de sorte que vous pouvez en apprendre davantage à propos de son utilisation sur MDN

    Grâce cbaigorri. Qui était-il! Merci pour l'aide.
    Ne semble pas fonctionner sur iOS7
    Méfiez-vous! Le nom de la fonction est webkitExitFullscreen pas webkitExitFullScreen (note de la lettre minuscule "s")
    N doit être un vote webkit seule réponse. Mise à jour de votre réponse pour inclure le support pour tous navigateurs. Les développeurs qui ne supporte qu'un seul moteur de rendu sont PAS développeurs à tous!
    Ces jours, vous peut être en mesure d'utiliser document.webkitFullscreenElement FWIW...

    OriginalL'auteur cbaigorri

  2. 3

    Je sais que c'est déjà répondu, mais ici, c'est le petit extrait de code j'ai fini par utiliser pour tous les navigateurs pour fermer la vidéo en plein écran après qu'il se termine.

    Fonctionne sur Chrome, IE11, Firefox jusqu'à présent:

    $("#myVideoTag").on('ended', function(){
    if (document.exitFullscreen) {
        document.exitFullscreen(); //Standard
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen(); //Blink
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen(); //Gecko
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen(); //Old IE
    }
});

    Vous pouvez également trouver tous les élément de l'écran (le cas échéant) comme:

      var fullscreenElement = document.fullscreenElement || 
   document.mozFullScreenElement || document.webkitFullscreenElement;

    Source: https://www.sitepoint.com/use-html5-full-screen-api/

    Juste pensé que je voudrais ajouter à la réponse que c'était la première question que j'ai croisé lors de la recherche d'une solution à cette question.

    OriginalL'auteur elzaer