iOS wkwebkit 播放HTML5 视频 全屏问题解决

2018-03-05 11:30:04

使用html5 的video标签播放视频的时候，限制视频的尺寸，在android上是没有问题的，但是在ios上发现，视频没有开始播放的时候还是好的，但是一旦播放开是，就会全屏，非常奇怪。

    <video id="video" width="100%" poster="images/video.jpg" preload width="100%" controls>
    <source type="video/mp4" src="sex8.mp4" >
    </video>123

在一篇博客中发现解决方案如下： 
http://www.cocoachina.com/bbs/read.php?tid=107728

HTML里video必须加上webkit-playsinline属性
<video id="player" width="480" height="320" webkit-playsinline>
Obj-C里，webview设置allowsInlineMediaPlayback属性为YESwebview.allowsInlineMediaPlayback = YES;1234

经过尝试发现果然好用

html代码如下：

 <video id="video" width="100%" poster="images/video.jpg" preload width="100%" controls webkit-playsinline>
 <source type="video/mp4" src="sex8.mp4" >
 </video>123

objective-c 代码如下：

  config.allowsInlineMediaPlayback = YES;

  • 精彩推荐

  • 2019-12-23 23:38:59

    vue-apollo的多客户端的用法

    vue-apollo的多客户端的用法以及apollo.js的配置 关于如何安装和如何使用，这篇文章就先暂时不介绍了，如果不清楚就看我另一篇关于vue-apollo的用法 在做项目中，有时候后端的接口是按模块功能去划分的，那么请求的地址就会不同，关于vue-apollo的多客户端配置如下

  • 2019-12-27 08:40:55

    align-self和align-items的区别

    align-items在伸缩容器上使用它，伸缩容器内部所有的元素都一致地受制于align-items的值。 但是有些时候，我们希望伸缩容器内部某个元素在侧轴上的排列方式有所差异。此时就不能使用 align-items，因为align-items作用于整体。我们希望作用于部分。这就是align-self的发挥场地。

  • 2019-12-29 15:01:37

    修改laravel分页的样式

    首先获取到数据，paginate方法 能够自动判定当前页面正确的数量限制和偏移数。默认情况下，当前页数由HTTP 请求所带的 ?page 参数来决定。当然，该值由 Laravel 自动检测，并自动插入由分页器生成的链接。

  • 2019-12-29 15:05:57

    php 数组分页 array_slice()函数用法

    今天用到一个函数，非常好用，分享给大家 array_slice() -从数组中取出一段 也就是说用这个函数可以和sql语句一样实现分页，原理是将查询出的数组，取出从指定下标开始到指定长度的数组

  • 2019-12-30 10:17:21

    router-link传递参数，query

    在vue-router中，有两大对象被挂载到了实例this； $route（只读、具备信息的对象）； $router（具备功能的函数） 查询字符串： 去哪里 ？ <router-link :to="{name:'detail',query:{id:1}}"> xxx </router-link>