2013-02-26 20 views
40

Per il mio problema, ho un collegamento <a href="http://www.youtube.com/embed/YT-ID" class="overlay_video"></a>. Voglio riprodurre il video facendo clic sul collegamento in una finestra di sovrapposizione fancybox. Questo non è un problema. Il problema sono i parametri, ad esempio "autoplay" o "autohide".La riproduzione automatica di YouTube non funziona su dispositivi mobili con lettore HTML5 incorporato

Il seguente link non funzionano:

<a href="http://www.youtube.com/embed/YT-ID?autoplay=1" class="overlay_video"></a> 

L'Overlay-finestra che si apre, ma il video non viene riprodotto automaticamente.

MODIFICA: desidero utilizzare il lettore HTML5 su dispositivi mobili. Su un browser desktop funziona con i parametri, ma non su dispositivi mobili.

+0

il problema deve essere da qualche altra parte, come la sintassi è esattamente come nella fancybox demo: '' Youtube (iframe) E non c'è nessun problema con la riproduzione automatica. Come invochi la fancybox? – orzechow

+0

Per richiamare la fancybox, utilizzo uno snippet standard, ad esempio $ (". Overlay_video"). Fancybox ({ 'width': 95%, [..] 'type': 'iframe' }); – theowi

+0

Ho dimenticato un piccolo dettaglio. Nuove informazioni nella descrizione. Scusate. – theowi

risposta

45

Come risulta, la riproduzione automatica non può essere eseguita su dispositivi iOS (iPhone, iPad, iPod touch) e Android.

Vedi https://stackoverflow.com/a/8142187/2054512 e https://stackoverflow.com/a/3056220/2054512

+0

Grazie :) Lo testerò più tardi sul mio tablet Android. – theowi

+0

A proposito: gli altri parametri, come autohide o rel sono completamente funzionanti. :) – theowi

+0

Sì, perché Apple vuole evitare finalmente il traffico non necessario sui propri dispositivi mobili - che riguarda solo la funzionalità di autoplay;) – orzechow

1

C'è un modo per rendere YouTube autoplay, e le playlist complete gioca attraverso. Ottieni il browser Adblock per Android, quindi vai al sito web di youtube e configuralo per la versione desktop della pagina, chiudi il browser Adblock e riaprilo, e avrai la versione desktop, dove funzionerà la riproduzione automatica.

L'uso della versione desktop significa anche che AdBlock funzionerà. La versione mobile richiama il player YouTube standalone, motivo per cui si desidera la versione desktop della pagina, in modo che la riproduzione automatica funzioni, e quindi il blocco degli annunci funzionerà.

+0

Grazie per il tuo commento. Questo modo è per qualsiasi - ho nominato - utente del cliente - ma non un modo per qualsiasi cliente "standard". – theowi

4

Dai un'occhiata al codice qui sotto. Testato e trovato funzionante su dispositivi mobili e tablet.

 


(video player) will replace this tag. --> 
    

    
     // 2. This code loads the IFrame Player API code asynchronously. 
     var tag = document.createElement('script'); 

     tag.src = "https://www.youtube.com/iframe_api"; 
     var firstScriptTag = document.getElementsByTagName('script')[0]; 
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

     // 3. This function creates an (and YouTube player) 
     // after the API code downloads. 
     var player; 
     function onYouTubeIframeAPIReady() { 
     player = new YT.Player('player', { 
      height: '390', 
      width: '640', 
      videoId: 'M7lc1UVf-VE', 
      events: { 
      'onReady': onPlayerReady, 
      'onStateChange': onPlayerStateChange 
      } 
     }); 
     } 

     // 4. The API will call this function when the video player is ready. 
     function onPlayerReady(event) { 
     event.target.playVideo(); 
     } 

     // 5. The API calls this function when the player's state changes. 
     // The function indicates that when playing a video (state=1), 
     // the player should play for six seconds and then stop. 
     var done = false; 
     function onPlayerStateChange(event) { 
     if (event.data == YT.PlayerState.PLAYING && !done) { 
      setTimeout(stopVideo, 6000); 
      done = true; 
     } 
     } 
     function stopVideo() { 
     player.stopVideo(); 
     } 
    
    


+0

Ciao! Ho provato il tuo codice e funziona davvero! Molto bene! Tuttavia, ho trovato un'eccezione in Safari 8 su iPad che inizia a caricare il video e non finisce mai a meno che non ti fermi e poi lo suoni. Qualcuno ha qualche suggerimento? (La pausa di trigger e la riproduzione con setTimeout non funziona ...) –

+0

Sembra che ci sia stato un aggiornamento per iOS che richiede di disattivare l'audio del video prima di riprodurlo, se si desidera che venga riprodotto automaticamente. se chiamassi event.target.mute(); subito prima event.target.playVideo(); dovresti essere buono – skribbz14

+0

Con questa soluzione sono riuscito a riprodurre automaticamente YouTube sull'ultimo Safari OS di alta Sierra ma non ho avuto molta fortuna su iPhone. – ramin

Problemi correlati