问题描述:在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. web自动化--如何在不同页面间游刃有余

    大家都知道,selenium中对页面元素的操作都是基于当前页面进行操作的,有时会有这种情况,在这个页面操作完一个步骤后,要去另一个页面查看,这就涉及到页面间的操作 # -*- coding:utf-8 ...

  2. Django之知识总结

    1. 课程介绍 - 数据类型 - 函数 - 面向对象三大特性:继承,封装,多态 - socket:本质传输字节:所有网络通信都基于socket - 数据库设计:单表.FK.M2M (自己作业:自己领域 ...

  3. Linux基础第五课——用户管理

    用户管理 一个用户必须有一个主组 一个用户可以拥有多个组 但是必须一个主组 其它组是临时组 一个组可以拥有多个用户 用户的信息放到 /etc/passwd 用户的密码 存入 /etc/shadow 组 ...

  4. SSM搭建一个后台管理系统

    看一下效果图: 登陆界面: 图片上传页面: 我也把项目放到服务器上了,可以直接查看项目内容: http://codingcoge.cn/ssm-demo/login.html 1 我也放到github ...

  5. Hue添加Spark notebook

    参考自https://blogs.msdn.microsoft.com/pliu/2016/06/18/run-hue-spark-notebook-on-cloudera/ 说明 使用Clouder ...

  6. ORB-SLAM2(3) ROS下实时跑ORB_SLAM2

    Step1 : 运行内核 roscore Step2 : 启动相机 cd catkin_ws/src/usb_cam/launch #进入usb_cam驱动的安装目录 roslaunch my_cam ...

  7. smartpass

    1.smartpass 是用户注册后,产生的用户名密码 与每个摄像头的用户名密码不一致 2.每个设备初始化登录密码为admin admin,如果需要修改,则在进入该设备IP地址,设置——>用户管 ...

  8. Echo团队Alpha冲刺随笔 - 第四天

    项目冲刺情况 进展 前端:完成了差不多一半,小程序部分界面基本完工,WEB端也完成了一部分 后端:也完成了大半了 问题 后端文件上传还没解决 心得 进度还行,团队配合都还不错 今日会议内容 黄少勇 今 ...

  9. ESP8266 wifi钓鱼

    原文链接: https://www.cnblogs.com/xiaowuyi/p/6980072.html https://www.cnblogs.com/xiaowuyi/p/7110652.htm ...

  10. 【第196期】Drupal7 Features模块与 Drupal8 Configuration Management 模块对比

    Drupal 8 最好和最受欢迎的部分之一是新的配置管理系统. 该系统使开发人员很容易将配置导出到代码中.在此之前,开发人员不得不依赖于由Features.Strongarm.UUID.Feature ...