在iPhone 6s上的一个three.jsvideo的例子没有工作(只有黑色面板)

在iPhone 6s上的一个three.jsvideo的例子没有工作(只有黑色面板)

https://stemkoski.github.io/Three.js/Video.html

但是这个例子在PC桌面浏览器上运行良好。 它在iPhone 6s上的Safari和Chronme上失败了

所以这已经变成了一个大的失败:(

本来我觉得问题是video(和audio)不允许在手机上自动播放,这是真的。 但….

事实certificate,不可能在iOS中的元素(或者至lessiPhone,我没有检查过iPad)中播放video。 video只播放全屏,这意味着你不能用它作为纹理源。

我不知道这是由苹果logging,但显然在某些时候,他们禁止在背景中播放video,打破所有使用video作为源的WebGL和Canvas演示

根据这个post有一个解决方法。

解决方法是使用与video相同的文件制作audio标签。 从触摸事件开始播放audio标签,但不播放video。 然后,每帧,设置video的currentTime以匹配audio的currentTime

所以从video的POV它永远不会玩,但目前的Safari基础设施设法仍然让这个工作。

以下是iOS 9.3的一个实例

http://webglsamples.org/video/video.html

我怀疑苹果将在不久的将来closures这个漏洞,因为它清楚地解决了他们首先想要禁止的任何事情。 我敢肯定,当人们点击东西或其他东西时,他们会试图阻止网页上的半自动播放广告,这是很好的意图。

另一方面,我希望他们只是让人们点击进行投票。 换句话说,如果人们发现这种烦人的东西,他们会停止访问这样做的网站。 那样想要制作酷HTML5的东西的开发者仍然可以使用这个技术。

或者,也许有很多网站的video控制太小,他们想在手机上做这个工作。 如果是这样的话,如果有一些属性,我们可以设置“嘿,这个video是不显示它的处理”

我在https://bugs.webkit.org/show_bug.cgi?id=160685上提交了一个bug。 请在那里expression您的关注/兴趣

这里也有类似的问题,原因是我猜。

Three.js WebGLRendereredvideo不能在Android手机上播放

我发现另一个播放video文件的过程是由HTML5网站启动的。 但我认为这不是iPhone 5的良好用户体验。暂时通过编程video播放的本地代码并将应用程序发送到ios 9.3中的iPhone 6s上解决了这个问题。