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-03 16:37:01

    去除options，减少options的访问

    因为跨域请求，浏览器可能（后面讲）会发送一次options请求，如果处理不好，跨域还是会gg的。 之前很少涉及跨域，涉及也是简单请求（下面阮老师文章中区别热简单请求和复杂请求），所以基本不会很少关注options。后面就遇到坑了，下面讲讲注意点。

  • 2019-12-04 10:46:26

    nuxt.js项目中全局捕获异常并生成错误日志全过程

    　需求：客户在使用过程中页面报错时，可以生成错误记录传回服务器，以便改进。 　　步骤： 　　　　一.全局捕获异常， 　　　　二.发送到服务端， 　　　　三.生成错误日志。 　　一.全局捕获异常 如图，vue提供了errorHandle这个方法来处理全局异常，更多详细内容参见官网。

  • 2019-12-04 10:47:59

    nuxt.js项目中全局捕获异常并生成错误日志全过程

    　需求：客户在使用过程中页面报错时，可以生成错误记录传回服务器，以便改进。 　　步骤： 　　　　一.全局捕获异常， 　　　　二.发送到服务端， 　　　　三.生成错误日志。 　　一.全局捕获异常 如图，vue提供了errorHandle这个方法来处理全局异常，更多详细内容参见官网。

  • 2019-12-04 10:48:18

    vue 项目资源文件 static 和 assets 不说区别直接使用?

    assets中资源会webpack构建压缩到你代码中，而static文件直接引用。 static 中长存放类包、插件等第三方的文件，assets里放属资源文件比如自己资源图片、css文件、js文件。 引入资源的方式static文件夹可以使用~/static/方式引入, assets文件夹可以使用 ~@/assets 方式引入

  • 2019-12-05 17:01:36

    Vue 结合 Axios 接口超时统一处理

    当网路慢的时候。又或者公司服务器不在内地的时候，接口数据请求不回来超时报错的情况相信大家肯定遇到过的，这里我把我公司项目请求超时的处理方法分享下，希望看过后有帮助。

  • 2019-12-05 17:13:40

    JS模板工具lodash.template的简单用法

    lodash是从underscore分支的一个项目，之前我写了一篇JS模板工具underscore.template的简单用法，lodash跟underscore很相似，这也简单介绍一下lodash的template方法。 先把underscore的文章中用过的代码贴过来，把underscore的js文件换成lodash的js，其他一字不改，然后我们试试：