最近一年都在做直播,遭video 全屏的问题困扰了很久。
下面将阻止 ios视频自动全屏的办法写出来。
添加
playsinline 和 webkit-playsinline="true";
例如:
<video id="video" playsinline webkit-playsinline ></video> 备注:
  1、此方法仅仅针对 ios有效(safari、微信都有效)。
  2、
playsinline属性针对ios 10以上系统有效。
  3、
webkit-playsinline属性针对ios10以下系统有效。
  4、安卓目前没有办法(机型不一样自带浏览器也效果也不一样,有一部分浏览器是可以小窗播放的。)
--------------------
更新 2017-11-6
阻止安卓版微信 视频自动全屏的代码。
添加 x5-playsinline
例如:
<video id="video"
x5-playsinline ></video>
备注:此方法仅仅针对安卓版微信有效。
 

阻止 iPhone 视频自动全屏的更多相关文章

  1. 如何禁止 iPhone Safari video标签视频自动全屏?

    最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止IOS的自动全屏播放(前提必须使用video标签).如: <video id="post" autoplay ...

  2. 防止html5的video标签在iphone中自动全屏

    问题: 当在iphone中打开html5页面中的video视频时,会默认调取系统播放器,全屏播放视频资源. 解决方式: 1. 首先在html5页面的video标签中添加webkit-playsinli ...

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

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

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

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

  5. 【转】Android HTML5 Video视频标签自动播放与自动全屏问题解决

    为了解决 HTML5Video视频标签自动播放与全屏问题,在网上找了很多相关资料,网上也很多关于此问题解决方法,但几乎都不能解决问题,特别对各大视频网站传回来的html5网页视频自动播放与全屏问题,我 ...

  6. 微信 vue中使用video.js播放m3u8视频,解决安卓自动全屏的问题。

    最近一个项目中需要在微信中播放m3u8格式的视频,刚开始用了 vue-video-player 这个插件,在IOS手机体验良好,本以为完事了, 结果安卓手机一点播放就自动全屏,心态略崩.查了资料说是安 ...

  7. iOS APP 中H5视频默认全屏播放问题解决

    问题描述:在Android中,视频可以正常在H5页面局部播放,iOS中则自动切换至全屏模式. 查看资料得以解决,20190301记录下来. 解决方法:IOS10及以后,在 video标签页中只包含 w ...

  8. 【极品代码】一般人我不告诉他,手机端h5播放时不自动全屏代码

    已测适用于ios,某些安卓手机微信下播放视频会出现播放器控件(这个实在是无力吐槽噢,因为之前还遇到过微信播放完视频后竟然无法退出全屏出现广告的情况,只有播放完后刷新页面并且要放到框架页里才能屏蔽微信视 ...

  9. audio与video控件/标签的隐藏,iso/Android下自动全屏播放,短暂黑屏问题

    (一)audio音频标签 <audio src="xxx.mp3"></audio> (二)video视频标签 <video src="xx ...

随机推荐

  1. 重学 Java 设计模式:实战享元模式「基于Redis秒杀,提供活动与库存信息查询场景」

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 程序员‍‍的上下文是什么? 很多时候一大部分编程开发的人员都只是关注于功能的实现,只 ...

  2. 使用SSH远程管理时本地文件被修改了

    背景: 有两个网段:1段作为工作网段即员工办公用:2段作为专用网段配置了一系列需要的环境. 在Ubuntu 16.04用Python的SSH工具在对这两个网段远程管理,我写了一个检测环境的脚本,用SF ...

  3. 菜渣开源一个基于 EMIT 的 AOP 库(.NET Core)

    目录 1,快速入门 1.1 继承 ActionAttribute 特性 1.2 标记代理类型 2,如何创建代理类型 2.1 通过API直接创建 2,创建代理类型 通过API 通过 Microsoft. ...

  4. Head First 设计模式

    OO基础 抽象 封装 多态 继承 OO原则 封装变化 多用组合,少用继承 针对接口编程,不针对实现编程 为交互对象之间的松耦合设计而努力 对扩展开放,对修改关闭 依赖抽象,不要依赖具体类 最少知识原则 ...

  5. Perl入门(四)Perl的正则表达式

    正则表达式是Perl语言的特色,基本的语法不是很难,但是编写一个符合需求.高效的正则表达式,还是有一些挑战的. Perl的三种匹配模式 1.查找 语法:m/正则表达式内容/; 作用:查找匹配内容中是否 ...

  6. elk5

    在百度指数上面可以看到二者热度的一个对比 es要先建立索引index,才能进行检索 elasticSearch的安装 1.jdk要1.8版本以上,并且每台elasticserach的jdk版本要一致 ...

  7. The main method caused an error: java.util.concurrent.ExecutionException: org.apache.flink.runtime.client.JobSubmissionException: Failed to submit JobGraph.

    在使用flink run命令提交任务可能会遇到如下错误: The program finished with the following exception: org.apache.flink.cli ...

  8. 作为一个Java开发你用过Jib吗

    1. 前言 Jib是Google开发的可以直接构建 Java应用的Docker和OCI镜像的类库,以Maven和Gradle插件形式提供.它最骚操作的是可以在没有Docker守护程序的情况下构建,也就 ...

  9. Python实用笔记 (13)函数式编程——返回函数

    函数作为返回值 我们来实现一个可变参数的求和.通常情况下,求和的函数是这样定义的: def calc_sum(*args): ax = 0 for n in args: ax = ax + n ret ...

  10. 日期类&&包装类&&System类&&Math类&&Arrays数组类&&大数据类

    day 07 日期类 Date 构造函数 Date():返还当前日期. Date(long date):返还指定日期 date:时间戳--->距离1970年1月1日 零时的毫秒数 常用方法 日期 ...