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 視頻播放新政策