我目前正在做一个包含很多视频的项目,这个项目需要在 iphone 上运行。
但实际上,ios 的视频占位符不允许我在我的页面中滚动。我尝试在我的视频标签上应用 webkit-playsinline 属性,但它不起作用。
有没有办法 - 在完整的 HTML5/JS 中 - 阻止 ios 视频播放器的 native 行为?
我注意到这个问题只出现在 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');
}
最佳答案
我也一直在广泛研究这个问题。
不幸的是,“webkit-playsinline”仅在 native 应用程序的 UIWebView 中有效,并且仅当在 native 代码中设置标志时才有效。参见 this问题。
从 Apple 的文档来看,似乎没有办法阻止这种默认行为,但您仍然可以从 native 播放器捕获“结束”和“暂停”事件,就好像它只是页面中内联的 HTML5 播放器一样。 IE。 “结束”等事件监听器应该仍然有效。
您还可以从 native 播放器获取一些状态信息:https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html
总的来说,您只能以非常有限的方式与 native 播放器交互,并且不存在已知的覆盖。
关于javascript - Webkit-playsinline 在 iphone 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22697311/