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