IOS网页视频在网页中播放

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&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>

如果是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];

三、参考文章

Last modification:April 26th, 2017 at 01:41 pm
如果看了这个文章可以让你少加会班,可以请我喝杯可乐
已打赏名单
微信公众号

Leave a Comment