Webkit – 在iPhone上玩游戏

我目前正在处理一个有很多video的项目，这个项目需要在iphone上工作。

但实际上，ios的video占位符不允许我滚动页面。 我尝试在我的video标签上应用webkit-playsinline属性，但不起作用。

有没有办法 – 在完整的HTML5 / JS – 防止iosvideo​​播放器的原生行为？

我注意到，这个问题只在iphone（ios 7），而不是ipad。

谢谢 ！

这里我的video标签：

<video vineresizer preload="auto" poster="{{vine.src_poster}}" loop webkit-playsinline="webkit-playsinline" controls="controls"> <source ng-src="{{ trustSrc(vine.src_video) }}" type="video/mp4"> </video> 

而我的js：

 var video = element[0]; video.addEventListener('contextmenu', function (e) { e.preventDefault(); e.stopPropagation(); }, false); if (video.hasAttribute('controls')) { video.removeAttribute('controls'); } 

Answer 1

我也一直在广泛研究这个问题。

不幸的是，'webkit-playsinline'只能在原生应用程序中的UIWebView中使用，然后只有在本机代码中设置了标志。 看到这个问题。

从Apple的文档看来，似乎没有办法阻止这种默认行为，但是您仍然可以从本地播放器捕获“已结束”事件和“已暂停”事件，就好像它只是内嵌在页面中的HTML5播放器一样。 即“结束”等事件监听器应仍然工作。

您还可以从本地播放器获取一些状态信息： https ： //developer.apple.com/library/safari/documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html

总体而言，您只能以非常有限的方式与本地玩家进行互动，并且不存在已知的覆盖。

Answer 2

在iOS 10+

苹果公司将最终在iOS 10的所有浏览器中启用playsinline属性，所以这将无缝工作：

 <video src="file.mp4" playsinline> 

在iOS 8和iOS 9中

您可以通过浏览video来模拟播放，而不是实际.play() 。

iphone-inline-video可以处理播放和audio同步（如果有的话），并保持<video>正常工作。