Eingebetteter Youtube-Player verlässt den Vollbildmodus nicht

Nun, ich denke, das ist ein großer Youtube-Bug, aber ich finde keinen Bericht darüber.Eingebetteter Youtube-Player verlässt den Vollbildmodus nicht

Ich habe eine Web-App, die im Vollbild-Browser mit der JavaScript Fullscreen API angezeigt wird.

In der Web-App gibt es einen eingebetteten Youtube-Player. Wenn du den Youtube-Player im Vollbildmodus öffnest, dann klickst du erneut auf den Vollbild-Button des Youtube, um den Vollbildmodus des Players zu verlassen. Er reagiert nicht!

Ich bin sicher, dass es mit der Tatsache zusammenhängt, dass der Browser bereits im Vollbildmodus ist, so gibt es eine Art von Konflikt.

Ich habe ein vereinfachtes Beispiel geschaffen, die hier eingesehen werden können: http://run.plnkr.co/CjrrBGBvrSspfa92/

Klicken Sie auf die „Go Fullscreen“ -Taste.
Spielen Sie das Video und klicken Sie auf den Vollbild-Button . Das Video wird im Vollbildmodus angezeigt.
Klicken Sie erneut auf die Vollbildschaltfläche . Es wird nicht beendet.

EDIT: Der Code für die HTML-Datei oben ist hier:

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
<iframe width="560" height="315" src="https://www.youtube.com/embed/b-6B2zyoFsI" frameborder="0" allowfullscreen></iframe> 
<button id="btn">GO FULLSCREEN</button> 

<script type="text/javascript"> 
    document.getElementById("btn").addEventListener("click", function() { 
     var elem = document.documentElement; 
     if (elem.requestFullscreen) { 
      elem.requestFullscreen(); 
     } else if (elem.msRequestFullscreen) { 
      elem.msRequestFullscreen(); 
     } else if (elem.mozRequestFullScreen) { 
      elem.mozRequestFullScreen(); 
     } else if (elem.webkitRequestFullscreen) { 
      elem.webkitRequestFullscreen(); 
     } 
    }); 
</script> 
</body> 
</html>

Quelle

2015-06-21 Light

-1

Weil Ihre Schaltfläche nur Click-Handler Vollbild geht aber nicht verlassen es.

Versuchen Sie, exitFullscreen() Funktion und fullscreenElement Attribut zu verwenden.

Etwas wie folgt aus:

UPDATE:

Getestet nur in Firefox. Es hat seine eigene attrs (mozFullScreenElement und mozCancelFullScreen)

document.getElementById("btn").addEventListener("click", function() { 
    var elem = document.documentElement; 
    if (document.mozFullScreenElement) { // null if not in fullscreen 
     document.mozCancelFullScreen(); 
    } else { 
     elem.mozRequestFullScreen(); 
    } 
    // and other prefixes omitted 
});

Die gleiche Logik in anderen Browsern sein sollte.

Quelle

2015-06-21 11:19:01 phts

Danke, aber es ist nicht auf das Problem, das ich beschrieben habe, verwandt. Das Problem ist, dass die Vollbild-Taste im YOUTUBE-Player nicht reagiert, wenn Sie sich bereits im Vollbildmodus befinden. Befolgen Sie die Schritte, die ich beschrieben habe, um sie zu reproduzieren. – Light

Die Sache ist ich einige der Suche tat und es Nähte Youtube nicht weiß, ob das Video im Vollbild ist oder nicht, wenn die JavaScript Vollbild-API mit noch nicht Google einen API-Aufruf zur Verfügung stellen oder aus Vollbild-fo. Wenn Sie auf die Schaltfläche klicken und im Vollbildmodus erscheint, wird die Vollbild-Schaltfläche des Players nicht gedrückt. Um also zur Fensteransicht zurückzukehren, hat der Benutzer zwei Optionen: 1) klicken Sie zweimal auf die Schaltfläche (das erste Mal versucht der Spieler, im Vollbildmodus zu gehen und die Schaltfläche ändert den Status, das zweite Mal den Player geht in den Fenstermodus) - das ist die Lösung 2) klicken Sie auf Esc auf der Tastatur.

Ich habe mit dem HTML5-Player überprüft.

Außerdem habe ich versucht, eine Schaltfläche in Youtube iFrame zu injizieren, so dass ich es auswählen kann, um den Vollbildmodus zu beenden, aber es hat nicht funktioniert ... wäre eigentlich dumm gewesen.

Diese Arbeit sollte:

<div id="videoplayer"></div> 
<p><button id="btn">GO FULLSCREEN</button></p> 

<script type="text/javascript"> 
var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/player_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
    var player; 
    function onYouTubePlayerAPIReady() { 
    player = new YT.Player('videoplayer', { 
     height: '380', 
     width: '500', 
     videoId: 'h7ArUgxtlJs', 
     fs: 1 
    }); 
} 

document.getElementById("btn").addEventListener("click", function() { 
    var elem = document.getElementById('videoplayer'); 
    var requestFullScreen = elem.requestFullscreen || elem.msRequestFullscreen || elem.mozRequestFullScreen || elem.webkitRequestFullscreen; 
    if (requestFullScreen) { 
    requestFullScreen.bind(elem)(); 
    } 
}); 
</script>

Sie die klassische einbetten können, glaube ich.

Working demo

Quelle

2015-06-26 23:40:41 mihaidp

Vielen Dank für die Antwort Ich schätze, dass Sie Ihre Frage wirklich beantwortet haben. Aber es funktioniert nicht für mich. Ich habe auf das Video geklickt, um es abzuspielen, und dann auf "Gehe zum Vollbild" geklickt. Dann klickte die Vollbild-Taste auf dem Player, beim ersten Klick tut es nichts und beim zweiten Klick beendet es den Vollbildmodus des Browsers, aber der Yt-Player bleibt im Vollbildmodus. – Light

Es ist eine Weile her, seit die Frage beantwortet wurde, aber nur ein heads-up, gebrochener Link auf "Arbeitsdemo" – dmr07

Dies kann helfen: "Beenden von Vollbild-Modus":

// Whack fullscreen 
function exitFullscreen() { 
    if(document.exitFullscreen) { 
    document.exitFullscreen(); 
    } else if(document.mozCancelFullScreen) { 
    document.mozCancelFullScreen(); 
    } else if(document.webkitExitFullscreen) { 
    document.webkitExitFullscreen(); 
    } 
} 

// Cancel fullscreen for browsers that support it! 
exitFullscreen();

Source.

Randbemerkung: API Youtube ist immer noch ziemlich knapp in Hinblick darauf, was Sie selbst im Jahr 2015 anpassen können (wegen, wie es so viel iFrame verläßt sich auf, und sie wollen nicht, dass Sie sich Reskin Spieler). Sie werden wahrscheinlich zu einem Punkt kommen, an dem Sie eine Menge funky JavaScript-Hacks verwenden, um zu bekommen, was Sie wollen, was unordentlich und instabil werden kann. Es wäre besser, einen von vielen anpassbaren Video-Playern zu verwenden, wo Sie mehr Kontrolle über JS haben können; wie JW player, Video.js, Flow player, popcorn.js usw.

Quelle

2015-06-30 18:45:45

Eingebetteter Youtube-Player verlässt den Vollbildmodus nicht

Antwort

Verwandte Themen