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;
  • 2017-01-11 08:23:07

    使用jquery.qrcode生成二维码

    二维码应用已经渗透到我们的生活工作当中,您只需要用手机对着二维码“扫一扫”即可获得所对应的信息,方便我们了解商家、购物、观影等等。本文将介绍一款基于jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码。

  • 2017-01-16 15:09:40

    Javascript模块化编程(一):模块的写法

    随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂。网页越来越像桌面程序,需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法,管理网页的业务逻辑。

  • 2017-01-16 15:16:24

    Javascript模块化编程(二):AMD规范

    AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。

  • 2017-01-16 15:19:24

    RequireJS 入门指南

    如今最常用的JavaScript库之一是RequireJS。最近我参与的每个项目,都用到了RequireJS,或者是我向它们推荐了增加RequireJS。在这篇文章中,我将描述RequireJS是什么,以及它的一些基础场景。

  • 2017-01-16 15:22:30

    CommonJS规范

    CommonJS模块规范。 根据这个规范,每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。