问题描述:在Android中,视频可以正常在H5页面局部播放,iOS中则自动切换至全屏模式. 查看资料得以解决,20190301记录下来。

解决方法:IOS10及以后,在 video标签页中只包含 webkit-playsinline 是不够的,需要再增加 playsinline.

H5端重点代码:

x5-video-player-type='h5' x5-video-player-fullscreen='true' playsinline webkit-playsinline

说明:

  • iOS10以上H5视频不自动全屏播放识别 playsinline这个属性
  • iOS10以下H5视频不自动全屏播放识别 webkit-playsinline这个属性

iOS 端实现代码:

_myWebView.allowsInlineMediaPlayback = YES;

UIWebView 有一个属性如下:

@property (nonatomic) BOOL allowsInlineMediaPlayback NS_AVAILABLE_IOS(4_0); // iPhone Safari defaults to NO. iPad Safari defaults to YES

设置UIWebView 的allowsInlineMediaPlayback属性为YES即可。

提醒:

要仔细测试下,看看是不是存在H5页面关闭后,视频还在播放的现象。

//新跳转一个空白页 防止webview中正在播放的视频消失后还在播放。
[_myWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"about:blank"]]];

iOS APP 中H5视频默认全屏播放问题解决的更多相关文章

  1. MUI ios下用video标签默认全屏播放

    前几天用Hbuilder+MUI做了个应用,里边用到<video>标签,在Android下正常,但是在苹果手机老是默认全屏播放. 解决办法: 首先在video标签加上playsinline ...

  2. Chrome浏览器中使用 iframe 嵌入网页导致视频不能全屏的问题解决方法

    今天无意中测试了下在 iframe 中嵌入视频, 发现全屏按钮在 Chrome 浏览器中居然无效, 试了好几个视频网站的视频都不能全屏, 但在其他浏览器中似乎都很正常, 应该是 Chrome 60 新 ...

  3. HTML5新标签video在iOS上默认全屏播放

    今天做一个app时发现一个问题,应用html5中的video标签加载视频,在Android手机上默认播放大小,但是换成iPhone手机上出问题了,默认弹出全屏播放,查找了好多论坛,都没有谈论这个的.然 ...

  4. html-----vedio标签(HTML5新标签VIDEO在IOS上默认全屏播放)

    今天做一个app时发现一个问题,应用html5中的video标签加载视频,在Android手机上默认播放大小,但是换成iPhone手机上出问题了,默认弹出全屏播放,查找了好多论坛,都没有谈论这个的.然 ...

  5. andriod\iphone视频禁止全屏播放

    x-webkit-airplay="true" x5-playsinline="true" webkit-playsinline="true" ...

  6. video.js 视频自动全屏播放

    1.头部引用脚本 <link href="css/video-js.min.css" rel="stylesheet"> <link href ...

  7. VideoView的视频的全屏播放

    import android.net.Uri;import android.os.Bundle;import android.app.Activity;import android.content.I ...

  8. 【wpf基础】wpf MediaElement全屏播放视频功能

    最近在研究如何将视频全屏播放,一开始思路A:弹窗将MediaElement对象add到一个新的全屏窗体,报错 指定的元素已经是另一个元素的逻辑子元素.请先将其断开连接. 后续转换思路B:将本窗体其他控 ...

  9. vue video全屏播放

    需求: 1.视频为长方形,页面初始化打开为横屏全屏播放视频. 2.微信不支持自动播放,故自动播放需求删除. 方法: 1.vue-video-player插件 因需求较简单,仅要求播放本地一个视频,故未 ...

随机推荐

  1. webrtc 实时视频 .net websocket信令服务器

    这篇文章主要参考了 Webrtc WebSocket实现音视频通讯,非常感谢提供代码 前端部分完全是从这篇文章复制过来的,只是修改了webscket的url,还有加入了webrtc-adapterjs ...

  2. 说说Android6.0动态申请权限的那些坑

    白天在做SDK23版本的适配,遇到了不少坑,现在抽空记下来,以此为戒. 首先要知道哪些坑,就得先了解一些定义和基本使用方式. 那么先介绍一下动态申请的权限分组情况. 下面的权限组是由谷歌官方定义的,目 ...

  3. 【PAT】B1038 统计同成绩学生(20)(20 分)

    #include<stdio.h> int arr[102]={0};//分数作为自己的下标,注意 int main(){ int N;scanf("%d",& ...

  4. 【Beta Scrum】冲刺! 2/5

    1. 今日完成情况 人员 学号 分工 是否完成 完成情况 胡武成 031502610 学习java后端登录验证方式,尝试编写登录api N 刚学会springmvc登录token拦截,准备明天登录注册 ...

  5. vue_表单控件

    Vue.js中提供 v-model 的指令对表单元素进行双向数据绑定,在修改表单元素值的同时,实例 vm 中对应的属性值也同时更新,反之亦然.本小节介绍主要input元素绑定v-model 后的具体用 ...

  6. luogu P4718 【模板】Pollard-Rho算法(贴代码)

    嘟嘟嘟 从标题中能看出来,我只是想贴一个代码. 先扯一会儿. 前几天模拟考到了这东西,今天有空就学了一下. 到网上找资料,发现前置技能是miller-rabin筛法,于是我还得先学这么个东西. 学mi ...

  7. Java中集合删除元素时候关于ConcurrentModificationException的迷惑点

    下面的示例来至于阿里巴巴Java开发手册的集合处理部分的第7条: 运行如下代码,会发现正确运行. public static void hasNotExcption() { List<Strin ...

  8. github(1)安装及使用图文详解

    教程https://blog.csdn.net/qq_32166627/article/details/54427622 下载地址:https://desktop.github.com/

  9. mafintosh/end-of-stream

    https://github.com/mafintosh/end-of-stream Call a callback when a readable/writable/duplex stream ha ...

  10. 移动App测试实战—专项测试

       我们在进行了手工的功能测试之后,也开发了一些自动化测试用例,并且做了性能测试之后,测试工作看似比较完整了.但是当我们的App在大量的用户那里被安装和使用的时候,还是会有很多我们之前没有预料的问题 ...