Il player Youtube incorporato non esce dallo schermo intero

Bene, penso che questo sia un grosso bug di YouTube ma non trovo alcun rapporto a riguardo.Il player Youtube incorporato non esce dallo schermo intero

Ho un'app Web che viene visualizzata nel browser a schermo intero utilizzando l'API JavaScript Fullscreen.

Nell'app Web è presente un player Youtube incorporato. Quando apri il player Youtube a schermo intero, quindi fai nuovamente clic sul pulsante a schermo intero di YouTube per uscire dalla schermata a schermo intero, non risponde!

Sono sicuro che è correlato al fatto che il browser è già in modalità a schermo intero quindi c'è un qualche tipo di conflitto.

ho creato un esempio semplificato che può essere vista qui: http://run.plnkr.co/CjrrBGBvrSspfa92/

Fare clic sul pulsante "Go Fullscreen".
Riproduci il video e fai clic sul pulsante a schermo intero . Il video andrà a schermo intero.
Fare di nuovo clic sul pulsante a schermo intero . Non uscirà.

EDIT: Il codice per il file HTML di cui sopra è qui:

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

fonte

2015-06-21 Light

-1

Perché il vostro click gestore di pulsante va solo a schermo intero, ma non esce da esso.

Prova a utilizzare la funzione exitFullscreen() e l'attributo fullscreenElement.

Qualcosa di simile a questo:

UPDATE:

Provato solo in Firefox. Ha i suoi attrs (mozFullScreenElement e 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 
});

La stessa logica dovrebbe essere in altri browser.

fonte

2015-06-21 11:19:01 phts

Grazie, ma non è correlato al problema che ho descritto. Il problema è che il pulsante a schermo intero nel lettore YOUTUBE non risponde quando sei già in modalità a schermo intero. Segui i passaggi che ho descritto per riprodurre. – Light

Il fatto è che ho fatto qualche ricerca e cuciture Youtube non sa se il video è a schermo intero o no quando si utilizza l'API JavaScript a tutto schermo né Google fornisce una chiamata API per FO o fuori schermo intero. Quindi, quando si fa clic sul pulsante e viene visualizzato a schermo intero, verrà visualizzato il pulsante a schermo intero del lettore non premuto. Quindi, per tornare alla finestra, l'utente ha due opzioni: 1) clicca sul pulsante 2 volte (la prima volta, il giocatore prova ad andare a schermo intero e il pulsante cambia stato, la seconda volta, il il giocatore va in modalità finestra) - questa è la soluzione 2) fai clic su Esc sulla tastiera.

Ho controllato con il lettore HTML5.

Inoltre, ho provato a iniettare un pulsante all'interno di iframe di YouTube in modo da poterlo selezionare per uscire a schermo intero, ma non ha funzionato ... sarebbe stato sciocco in realtà.

Questo dovrebbe funzionare:

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

È possibile utilizzare l'embed classico, I belive.

Working demo

fonte

2015-06-26 23:40:41 mihaidp

Grazie per la risposta, apprezzo il fatto che abbiate davvero risposto alla domanda. Comunque non funziona per me. Ho fatto clic sul video per riprodurlo, quindi ho fatto clic sul pulsante "vai a schermo intero". Quindi ha fatto clic sul pulsante a schermo intero sul lettore, al primo clic non fa nulla e al secondo clic esce dallo schermo intero del browser, ma il lettore yt rimane a schermo intero. – Light

È passato un po 'di tempo da quando la domanda è stata risolta, ma solo un avviso, collegamento interrotto su "demo funzionante" – dmr07

Questo può aiutare: "Uscire dalla modalità a tutto schermo":

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

Nota a margine: API di Youtube è ancora piuttosto scarsa in termini di ciò che è possibile personalizzare anche nel 2015 (a causa di come si basa su così tanto iFrame, e non voglio che tu a ReSkin loro lettore). Probabilmente arriverai a un punto in cui utilizzi una serie di intrighi JavaScript funky per ottenere ciò che desideri, il che può diventare disordinato e instabile. Sarebbe meglio usare uno dei tanti lettori video personalizzabili in cui è possibile avere maggiore controllo con JS; like JW player, Video.js, Flow player, popcorn.js ecc.

fonte

2015-06-30 18:45:45

Il player Youtube incorporato non esce dallo schermo intero

risposta

Problemi correlati