API iFrame di YouTube: riproduzione programmatica in modo nativo?

Question

Sto tentando di riprodurre un video di YouTube (all'interno di un iFrame) a livello di codice tramite JS. Ecco il codice che sto usando per riprodurre a livello di codice un video di YouTube:

iframe.postMessage('{"event":"command","func":"playVideo","args":""}', '*'); 

Tuttavia, in dispositivi che supportano la funzione di riproduzione nativa di YouTube, il video all'interno del iFrame diventa uno schermo nero e non si apre il nativo lettore video.

Come è possibile utilizzare l'API iFrame per riprodurre un video in modo nativo quando possibile?

Answer 1

Consiglio vivamente di controllare l'API di Iframe Player di Youtube. https://developers.google.com/youtube/iframe_api_reference#Playback_controls

var player; 
    function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
    height: '390', 
    width: '640', 
    videoId: 'M7lc1UVf-VE', 
    events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
    } 
    }); 
} 

function onPlayerReady(event) { 
    event.target.setVolume(100); 
    event.target.playVideo(); 
} 

Answer 2

Se si desidera avere il video a riproduzione automatica quando caricato, utilizzare questo attributo nei vostri JS: "autoplay: 1". Maggiori informazioni qui: https://developers.google.com/youtube/player_parameters#autoplay

Se si utilizza l'evento "onReady", è necessario rilevare se il dispositivo consente la riproduzione automatica, che iOS no. Questa non è una cosa facile da testare a meno che non si usi lo sniffing UA fragile. L'utilizzo del metodo integrato è molto più affidabile in questo caso.

Se si desidera solo per riprodurre un video a livello di codice, è possibile utilizzare questo metodo:

target.playVideo(); 

Tuttavia, è ancora una volta non può fare questo senza l'interazione dell'utente su iOS. E funziona solo su iOS8, le versioni precedenti non consentono a JS di attivare la riproduzione di video.