我正在为客户开发一个网站,但目前陷入困境,因为我们俩都能够在 Android 上的 Chrome 中重现此问题。
无论出于何种原因,当我们在 Chrome 中的 Android 上加载此页面时:
http://miso.gostppro.com
视频加载器只是不断旋转和旋转,视频永远不会播放。
点击它也不会做任何事情(不会开始播放,不会在 YouTube 应用程序中打开它,什么都没有)。
它在其他浏览器中运行良好(适用于Android的Firefox加载它并播放它),所以我对为什么会发生这种情况感到困惑。
我错过了什么?
是 API 中的一些调用还是什么?
我迷路了。
简而言之,它不起作用。引用文档:
HTML5 元素,在某些移动浏览器(如 Chrome 和 Safari),仅当它由 用户交互(例如点击播放器)。(...)因此,由于这个 限制、功能和参数,如自动播放, playVideo(), loadVideoById()无法在所有移动环境中工作。
您在onPlayerReady
处理程序中调用event.target.playVideo();
,这在移动环境中是不允许的,并在控制台中引发警告(供将来参考 - 我强烈建议在 Chrome 中使用远程调试)。
所以,回到你的问题 - 我只是摆脱了onPlayerReady
处理程序并改用autoplay
播放器变量。它应该在台式机上运行,也不会破坏移动设备上的播放器。
我在运行Android 5.1.1的Nexus 5上测试了您的网页,发现了一些问题:
首先,我收到此错误:
无法在"DOMWindow"上执行"postMessage":https://www.youtube.com!== http://miso.gostppro.com
我以为是http vs https错误,但是在我刷新页面后,错误消失了,我看到了一个新的警告:
无法在"HTMLMediaElement"上执行"播放":API 只能通过用户手势启动。
正如jkondratowicz的回答所指出的,这是移动浏览器不允许在HTML5视频上自动播放的副产品。 我唯一能想到的是删除与播放器和自动播放参数相关的任何 JavaScript,并允许用户在准备好时手动启动视频播放。
通过在 iframe 上调用play()
的页面加载事件中添加一个侦听器,我也得到了混合的结果结果:
function callback () {
document.querySelector('ytplayer').play();
}
window.addEventListener("load", callback, false);