Beenden Fullscreen Mit Dem HTML5-Video-Tag

Ich versuche, das video beenden Vollbild am Ende des Videos, aber es wird nicht. Ich suchte und fand Wege, dies zu tun, aber für das Leben von mir ich kann nicht ankommen es zu wirken. Ich Teste in der neuesten version von Chrome (15) und iOS 5 auf dem iPad2.
Hier ist der code, den ich verwende:

<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>

Jede Hilfe wird geschätzt.

InformationsquelleAutor ShockTower | 2011-11-17
  1. 16

    webkitExitFullScreen ist eine Methode, die video element, also es muss so aufgerufen werden:

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

    Da es innerhalb eines event-handlers this werden die video dass ended so:

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

    Wird es etwas komplizierter, da webkitExitFullscreen funktioniert nur in webkit-basierten Browsern (Safari, Chrome, Opera), so können Sie lernen, mehr über seine richtige Nutzung auf MDN

    • Dank cbaigorri. Das war es! Vielen Dank für die Hilfe.
    • Scheint nicht zu funktionieren auf iOS7
    • Vorsicht! Der name der Funktion ist webkitExitFullscreen nicht webkitExitFullScreen (beachten Sie die Kleinbuchstaben "s")
    • niemand sollte-voting webkit einzige Antwort. Aktualisieren Sie Ihre Antwort, die Unterstützung für alle Browser. Entwickler, die unterstützt nur eine rendering-engine sind die NICHT Entwickler überhaupt!
    • In diesen Tagen können Sie in der Lage sein zu verwenden document.webkitFullscreenElement FWIW...
    InformationsquelleAutor cbaigorri
  2. 5

    Ich weiß, das ist schon beantwortet, aber hier ist der kleine code-snippet, das ich am Ende mit für alle Browser zu schließen, Vollbild-video, nachdem es endet.

    Funktioniert auf Chrome, IE11, Firefox so weit:

    $("#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
    }
});

    Finden Sie auch die aktuelle full-screen-element (falls vorhanden) wie:

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

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

    Dachte, ich möchte hinzufügen, die Antwort, denn das war die erste Frage, die ich stieß bei der Suche nach einer Lösung für dieses.

    InformationsquelleAutor elzaer
  3. 2

    Danke cbaigorri, es funktionierte wunderbar zu verwenden .webkitExitFullscreen();

    Ich Folgendes zu exit fullscreen, wenn die video-Wiedergabe: 

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

<video controls onended=CloseVideo() >
    <source src="video.mp4" type="video/mp4">
</video>
    • Funktioniert nicht bei IE.
    InformationsquelleAutor Keithasaurus Rex
Schreibe einen Kommentar