Webkit-playinline on iphone

时间:2014-03-27 19:27:10

标签: javascript ios iphone html5 video

我目前正在开发一个包含大量视频的项目,这个项目需要在iphone上运行。

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

有没有办法 - 在完整的HTML5 / JS中 - 防止ios视频​​播放器的原生行为?

我注意到这个问题只出现在iphone(ios 7)上,而不是ipad。

谢谢!

这是我的视频标记:

<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');
}

2 个答案:

答案 0 :(得分:7)

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

不幸的是,'webkit-playsinline'仅适用于本机应用程序中的UIWebView,然后仅在本机代码中设置标志时才有效。请参阅this问题。

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

您还可以从原生播放器获取一些州信息:https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html

总的来说,您只能以非常有限的方式与本机播放器进行交互,并且不存在已知的覆盖。

答案 1 :(得分:1)

在iOS 10 +

Apple将最终在iOS 10上的所有浏览器中启用属性playsinline,因此这将无缝运行:

<video src="file.mp4" playsinline>

在iOS 8和iOS 9中

您可以通过略过视频而不是实际.play()来模拟播放来重现行为。

iphone-inline-video可以处理播放和音频同步(如果有的话),并使<video>保持正常工作。