YouTube 视频(使用最新 API)无法在 Android 的 Chrome 上播放?

YouTube videos (using latest API) won't play on Chrome on Android?

我正在为一个客户开发一个网站,我被卡在了这一点上,因为我们都能够在 Chrome 的 Android 上重现这个问题。

无论出于何种原因,当我们在 Chrome 中将此页面加载到 Android 时:

http://miso.gostppro.com

视频加载器不停地旋转,视频从不播放。

点击它也没有任何作用(不开始播放,不在 YouTube 应用程序中打开,什么都没有)。

它在其他浏览器中工作得很好(Android 的 Firefox 加载它并播放它很好),所以我很困惑为什么会这样。

我错过了什么?

是 API 中的某个电话吗?

我迷路了。

总之,不行。引用 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.

您在 onPlayerReady 处理程序中调用 event.target.playVideo();,这在移动环境中是不允许的,并且会在控制台中引发警告(以供将来参考 - 我强烈建议使用 Remote Debugging在 Chrome).

所以,回到您的问题 - 我只是摆脱 onPlayerReady 处理程序并改用 autoplay 播放器变量。它应该可以在台式机上运行,​​也不会破坏移动设备上的播放器。

我在 Nexus 5 运行 Android 5.1.1 上测试了您的网页,发现了一些问题:

首先我遇到了这个错误:

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

我以为是 http vs https 错误,但在我刷新页面后错误消失了,我看到了一个新警告:

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

正如 jkondratowicz 的回答中所指出的,这是移动浏览器不允许在 HTML5 视频上自动播放的副产品。我唯一能想到的就是删除与播放器和自动播放参数相关的任何 JavaScript,并允许用户在准备好时手动开始视频播放。

我还通过向页面加载事件添加一个侦听器来获得混合结果,该事件在 iframe 上调用 play():

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

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