iOS播放H5视频自动全屏

• 1. 有无设置 allowsInlineMediaPlayback.

WKWebViewConfiguration *configuration = 
[[WKWebViewConfiguration alloc] init];

configuration.allowsInlineMediaPlayback = YES;
_webview = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight - 88) 
                              configuration:configuration];

注意⚠️:必须在WKWebView初始化阶段传递进configuration.

• 2. HTML代码是否添加元素.

H5端：

iOS10以上H5视频不自动全屏播放识别 `playsinline`这个属性
iOS10以下H5视频不自动全屏播放识别 `webkit-playsinline`这个属性

代码示例如下

<div class="video">
        <video width="100%" height="auto" src="https://jianlixiu-app-video-001.oss-cn-shanghai.aliyuncs.com/video_621_14931060906235.mp4?OSSAccessKeyId=LTAInnNu50jkDr90&amp;Expires=1493114774&amp;Signature=O5LHN9DAnH7SJnV4D83sc9fmVJ8%3D" poster="https://jianlixiu-app-image-001.oss-cn-shanghai.aliyuncs.com/image_621_14931060835676.jpg?OSSAccessKeyId=LTAInnNu50jkDr90&amp;Expires=1493114774&amp;Signature=z0yv7zFzTBSva76u5VCK32E9s9E%3D" controls="" webkit-playsinline=""></video>
      <div class="question">#展示形象或才艺#</div>
</div>

• 3. 若条件2未处理

1. H5添加代码
2. Native调用JS,为video添加playsinline

UIWebView示例代码:

[webView stringByEvaluatingJavaScriptFromString:
          @"document.getElementsByTagName('video')[0].setAttribute('playsinline','playsinline');"];

参考链接

1. http://blog.hudongdong.com/ios/534.html
2. 控制webview使用html5的video播放视频不全屏(inline)的方法
3. iOS10 allowsInlineMediaPlayback网页播放视频方法失效的解决办法
4. https://webkit.org/blog/6784/new-video-policies-for-ios/