Les vidéos YouTube (utilisant la dernière API) ne seront pas lues sur Chrome sur Android?

Question

Je suis en train de développer un site pour un client et je suis coincé à ce stade, car nous avons tous deux été en mesure de recréer ce problème dans Chrome sur Android.

Pour une raison quelconque, quand on charge cette page sur Android dans Chrome:

http://miso.gostppro.com

Le chargeur vidéo continue à filer et la filature et la vidéo ne joue jamais. Et taper dessus ne fait rien non plus (ne démarre pas la lecture, ne l'ouvre pas dans l'application YouTube, rien ...).

Cela fonctionne très bien dans d'autres navigateurs (Firefox pour Android le charge et le joue très bien), donc je suis confus quant à la raison pour laquelle cela se produit.

Qu'est-ce qui me manque?

Est-ce un appel dans l'API ou quelque chose?

Je suis perdu.

Answer 1

En bref, cela ne fonctionnera pas. Citant le documentation:

The HTML5 element, in certain mobile browsers (such as Chrome and Safari), only allows playback to take place if it's initiated by a user interaction (such as tapping on the player). (...) Due to this restriction, functions and parameters such as autoplay, playVideo(), loadVideoById() won't work in all mobile environments.

Vous appelez event.target.playVideo(); dans votre gestionnaire onPlayerReady, ce qui est interdit dans les environnements mobiles et lance un avertissement dans la console (pour référence ultérieure - Je recommande fortement d'utiliser Remote Debugging dans Chrome). Donc, revenons à votre problème - je voudrais juste me débarrasser du gestionnaire onPlayerReady et utiliser autoplay variable de joueur à la place. Il devrait fonctionner sur les ordinateurs de bureau et ne pas casser le joueur sur le mobile non plus.

Answer 2

Je l'ai testé votre page Web sur mon Nexus 5 en cours d'exécution Android 5.1.1 et trouvé quelques problèmes:

D'abord, je recevais cette erreur:

Failed to execute 'postMessage' on 'DOMWindow': https://www.youtube.com !== http://miso.gostppro.com

que je croyais un http vs https erreur , mais après avoir rafraîchi la page avec l'erreur est parti et j'ai vu un nouvel avertissement:

Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture.

Comme indiqué dans la réponse de jkondratowicz, c'est un sous-produit des navigateurs mobiles désavouant autoplay sur des vidéos HTML5. La seule chose à laquelle je peux penser est de supprimer tout JavaScript lié au lecteur et au paramètre de lecture automatique et de permettre à l'utilisateur de démarrer manuellement la lecture de la vidéo lorsqu'il est prêt.

je suis également obtenir des résultats mitigés des résultats avec l'ajout d'un auditeur à l'événement de chargement de la page qui appelle play() sur le iframe:

function callback() { 
    document.querySelector('ytplayer').play(); 
} 

window.addEventListener("load", callback, false);