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

时间:2016-04-22 17:23:08

标签: youtube-api youtube-javascript-api youtube-iframe-api mobile-chrome chrome-mobile

我正在为客户开发一个网站,我现在陷入困境,因为我们都能够在Android上的Chrome中重新创建此问题。

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

http://miso.gostppro.com

视频加载器只是保持旋转和旋转,视频永远不会播放。

点击它也没有做任何事情(不开始播放,不在YouTube应用中打开它,没有)。

它在其他浏览器中运行得很好(适用于Android的Firefox加载它并播放它很好),所以我很困惑为什么会发生这种情况。

我错过了什么?

是API中的某个调用还是什么?

我迷路了。

2 个答案:

答案 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);