webview中用html5的video方式播放视频时,在ipad上是默认原来大小的,而在iphone上是默认全屏播放的。解决办法需要在网页端和ios前端都要修改
一、网页设置
HTML里video必须加上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&Expires=1493114774&Signature=O5LHN9DAnH7SJnV4D83sc9fmVJ8%3D" poster="https://jianlixiu-app-image-001.oss-cn-shanghai.aliyuncs.com/image_621_14931060835676.jpg?OSSAccessKeyId=LTAInnNu50jkDr90&Expires=1493114774&Signature=z0yv7zFzTBSva76u5VCK32E9s9E%3D" controls="" webkit-playsinline=""></video>
<div class="question">#展示形象或才艺#</div>
</div>
如果是IOS10设备,需要加上playsinline
属性。
在iOS 10 下支持网页播放只需要将以前的webkit-playsinline更改为playsinline,或者增加上playsinline
因为webkit的video
标签在iOS 10中发生了一些变化,导致webview在网页播放视频失效。
所有变更具体细节参考:New video Policies
A note about the playsinline attribute: this attribute has recently been added to the HTML specification, and WebKit has adopted this new attribute by unprefixing its legacy webkit-playsinline attribute. This legacy attribute has been supported since iPhoneOS 4.0, and accordance with our updated unprefixing policy, we’re pleased to have been able to unprefix webkit-playsinline
二、前端修改
2.1、如果使用的UIWebView
Obj-C里,webview设置allowsInlineMediaPlayback属性为YES即可
webview.allowsInlineMediaPlayback = YES;
2.2、如果使用的WKWebView
iOS8以后,苹果推出了新的框架Webkit,提供了替换UIWebView的组件WKWebView。相比之前的UIWebView,运行内存的占用更少,运行的速度更快。
WKWebView有一个配置的类WKWebViewConfiguration,类似于UIScrollView设置FlowLayout。
WKWebViewConfiguration *configuration = [[WKWebViewConfigurationalloc]init];
configuration.allowsInlineMediaPlayback=true;
WKWebView创建时把这个配置带上就OK
self.webView=[[WKWebViewalloc]initWithFrame:CGRectMake(0,20,W,H-20)configuration: configuration];
三、参考文章
版权属于:东哥笔记 - DongGe.org
本文链接:https://dongge.org/blog/534.html
自2017年12月26日起,『转载以及大段采集进行后续编辑』须注明本文标题和链接!否则禁止所有转载和采集行为!