L'iframe di YouTube 360 ​​video non funziona nel browser mobile

Question

Sto provando a ottenere un iframe incorporato per un video di YouTube 360 ​​da riprodurre sul mio sito mobile: funziona bene su un browser desktop ma nel browser mobile ottengo solo l'appartamento visione stereoscopica riproduzione. Posso confermare che è sicuramente un lettore HTML5

Questo è chiaramente un problema irrisolto che altri stanno vivendo. Vedere di seguito i messaggi:

• https://productforums.google.com/forum/#!topic/youtube/7sk92Fs1juk
• Make Youtube 360 degree Videos work on mobile

quindi voglio aiutare con almeno uno di questi due potenziali domande/soluzioni.

1) È possibile farlo funzionare in un browser mobile? la documentazione di Google suggerisce che dovrebbe

Per riferimento - qui è il mio codice iframe

<iframe width="1360" height="500" src="https://www.youtube.com/embed/0x16ngo8xfY?autoplay=1&loop=1&playlist=0x16ngo8xfY" frameborder="0" allowfullscreen></iframe> 

2) non Supponendo, qual è il modo migliore per forza mia iframe di lanciare nel mobile app YouTube in cui il 360 il video funziona correttamente

Grazie, Alex

Answer 1

Data la mancanza di altre risposte e nel caso in cui nessun altro trova questo, ho fatto ricorso a questo (purtroppo) sligh la soluzione hacky nel frattempo che sembra funzionare.

if(window.innerWidth < 760){ 
    $('.video').on('click', function(e) { 
     e.preventDefault(); 
     //assumes that by forcing window to go to youtube will kick up option to open in app where experience works - plays my full showreel 
     window.location = "https://www.youtube.com/watch?v=0x16ngo8xfY&list=PLzSXIFcDqpiCiKXMtXtVIHnmor9uUsEhC&autoplay=1"; 
    }); 
    } 

Answer 2

Secondo YouTube, 360 video sarà lavorare su "l'ultima versione di Chrome, Opera, Firefox o Internet Explorer sul computer":

https://support.google.com/youtube/answer/6178631

Questo significa che possiamo usare per l'utente Agent sniffing, che è decisamente subottimale ma leggermente migliore rispetto al controllo dello innerWidth come suggerito da AlexHandy1.

function browserSupports360() { 
    // YouTube supports 360 videos in a limited set of browsers, 
    // see https://support.google.com/youtube/answer/6178631 

    var ua = navigator.userAgent; 

    // No mobile browser is supported at the moment 
    if (/Mobile/.test(ua) || /Tablet/.test(ua)) return false; 

    // Chrome >= 40 
    if (/Chrome\/[^123][0-9]/.test(ua) && !/Edge\//.test(ua) && !/OPR\//.test(ua)) return true; 

    // Firefox >= 40 
    if (/Firefox\/[^123][0-9]/.test(ua)) return true; 

    // Microsoft Edge 
    if (/Edge\//.test(ua)) return true; 

    // Opera >= 30 
    if (/OPR\/[^12][0-9]/.test(ua)) return true; 

    return false; 
} 

V'è una domanda aperta sul YouTube Aiuto Forum chiedendo se è possibile utilizzare il rilevamento funzione invece, è possibile upvote nella speranza che qualcuno da YouTube sarà guardarlo:

https://productforums.google.com/forum/#!topic/youtube/EON00C4h9w4

Answer 3

È un semplice, Vedere l'elemento di ispezione (chrome) su youtube su video 360. Vedrai che questo non è un video player. È una tela con webgl.

Quando google vuole lavorare su un dispositivo mobile, è possibile riprodurlo. Prima che ciò accada, devi creare il tuo video player a 360 gradi. scusa per il mio male!

un'occhiata a:

http://threejs.org/examples/#canvas_geometry_panorama

È necessario fare WebGL panorama app con texture streaming e yuo otterrete 360 ​​video. È necessario utilizzare la variante di sfera non cubica di panorama.

Non è possibile utilizzare il tag video - 100%.

Correzione sul desktop firefox: arrivato a about: config sulla barra degli indirizzi in firefox e setup webgl-disabled su false .... Anche se si installa l'aggiornamento alla versione precedente su firefox, deve ancora farlo. Se disinstalli, installa firefox versione precedente i cosa webgl è abilitato per impostazione predefinita.

Answer 4

Sono stato in grado di ottenere 360 ​​video in un Android WebView modificando lo user-agent in modo che corrisponda al mio MacBook. Ecco quello che ho usato:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.86 Safari/537.36 

L'implementazione completa è composta da VideoJS e l'estensione di YouTube, che utilizza un iframe. Il tocco/trascinamento non è ancora perfetto, ma è stato un passo nella giusta direzione.

Forse è possibile ignorare l'utenteAgent del navigatore JS per ottenere lo stesso risultato.