WKWebView页面上播放视频

代码设置

iOS端设置

WKWebViewConfiguration *webViewConfig = [[WKWebViewConfiguration alloc]init];
// 视频页面播放支持
webViewConfig.allowsInlineMediaPlayback = YES;
WKWebView *webView = [[WKWebView alloc]initWithFrame:CGRectZero configuration:webViewConfig];

需要WKWebView支持页面内视频播放
设置 allowsInlineMediaPlayback 为 YES

前端设置

<video width="320" height="240" controls="" webkit-playsinline="true" playsinline="true">
   <source src="https://xx.com.xxx.mp4" type="video/mp4">
</video>

需要HTML支持页面内视频播放

添加 webkit-playsinline (iOS10以下) 、 playsinline iOS10及以上标签

效果

展示效果

视频在网页内播放，而不是打开视频播放器全屏播放。

例如下图中的视频

WechatIMG14.png

页面内播放说明

页面内播放说明

想要视频在网页页面上播放，除了需要客户端做设置外，还需要前端的支持。否则无论客户端怎么设置，都是无法在页面内播放视频的。