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;

  • 精彩推荐

  • 2018-05-21 13:54:06

    laravel-nestedset：多级无限分类正确姿势

    Nested Set Model 是一种实现有序树的高明的方法，它快速且不需要递归查询，例如不管树有多少层，你可以仅使用一条查询来获取某个节点下的所有的后代，缺点是它的插入、移动、删除需要执行复杂的sql语句，但是这些都在这个插件内处理了！

  • 2018-06-02 00:29:58

    Android实现沉浸式状态栏的那些坑

    最近项目需要实现沉浸式的状态栏，其实我在之前就了解过Android的沉浸式，发现有些棘手就放弃了，但是此次是公司的项目需要的，就花了几天把这个问题搞定了，在此记录一下，并mark几个坑。 首先，沉浸式是Android 4.4及以上才有的，在后续的5.0及6.0上面都增加了一些相关支持，于是问题就不太好办了。先看我实现的效果：

  • 2018-06-02 00:30:35

    Android 解决沉浸式状态栏下，输入法弹出，布局不会自动调整的BUG

    在开发中，如果输入框在布局的底部。在弹出输入发时，为了使输入法不遮挡输入框通常有两种做法： 1.将布局压缩（Activity的android:windowSoftInputMode属性设置为”adjustResize”）。 2.移动布局，将布局顶到输入框之上（Activity的android:windowSoftInputMode属性设置为”adjustPan”）

  • 2018-06-02 00:31:27

    Android layout实现输入法弹出后，布局整体上移

    那如果要实现沉浸式状态栏又要保持布局不会被输入法遮挡，怎么办呢？ 只要在根布局加上android:fitsSystemWindows=”true”即可，效果如下（为方便看效果我把背景改成了黄色）：

  • 2018-06-04 10:06:43

    mysql查询数据的同时对它进行删除操作

    今天遇见一个问题，需要把mysql数据库里面的 商品主表 和它的每一个条目对应不上的数据给全部删除(数据如下图);也就是整理一下数据库里的数据保证数据的可用;