WKWebView加载页面,内部的视频播放默认只能在用户主动操作之后才能播放,而且播放时必须全屏,这样的默认配置可能并不满足业务需求,要在页面中内联自动播放网络视频。
内联播放,可以理解为在页面制定区内播放
在WKWebView中,有一个web配置类WKWebViewConfiguration
,类似于UIScrollView
的FlowLayout
设置。
本地WKWebView设置
// 初始化配置对象
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
// 默认是NO,这个值决定了用内嵌HTML5播放视频还是用本地的全屏控制
configuration.allowsInlineMediaPlayback = YES;
// 自动播放, 不需要用户采取任何手势开启播放
if (@available(iOS 10.0, *)) {
// WKAudiovisualMediaTypeNone 音视频的播放不需要用户手势触发, 即为自动播放
configuration.mediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypeNone;
} else {
configuration.requiresUserActionForMediaPlayback = NO;
}
WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectZero configuration:configuration];
前端设置
<video width="320" height="240" controls="" webkit-playsinline="true" playsinline="true">
<source src="https://xx.com.xxx.mp4" type="video/mp4">
</video>
其中video标签,在iOS10以下支持播放需要添加webkit-playsinline
,iOS10以上需要添加playsinline
,做适配最好两个都添加
客户端页面中要能正常播放,需要在WKWebView中做配置,也需要前端支持,以免WKWebView怎么配置都不能达到预期效果
文章参考
WKWebViewConfiguration
New <video> Policies for iOS
iOS 10 Safari 视频播放新政策