最近一年都在做直播,遭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. Flask URL构建

    Flask URL构建 url_for()函数对于动态构建特定函数的URL非常有用.该函数接受函数的名称作为第一个参数,以及一个或多个关键字参数,每个参数对应于URL的变量部分. 以下脚本演示了如何使 ...

  2. HBase 中加盐(Salting)之后的表如何读取:Spark 篇

    我们知道,HBase 为我们提供了 hbase-mapreduce 工程包含了读取 HBase 表的 InputFormat.OutputFormat 等类.这个工程的描述如下:This module ...

  3. numpy矩阵相加时需注意的一个点

    今天在进行numpy矩阵相加的时候出现了一个小的奇怪的地方,下面我们来看看: >>>P = np.array([1,2,3,4]) >>>F = np.array( ...

  4. cb33a_c++_STL_算法_查找算法_(6)binary_search_includes

    cb33a_c++_STL_算法_查找算法_(6)binary_search_includes//针对已序区间的查找算法,如set,multiset关联容器-自动排序binary_search(b,e ...

  5. cb23a_c++_标准模板库STL_set_multiset_关联容器

    cb23a_c++_标准模板库STL_set_multiset_关联容器 set(集)数据不能重复.multiset(多集)可以重复.操作数据速度快,数据自动排序.红黑树(数据结构)红黑树-二叉树基本 ...

  6. 流媒体学习计划表——pr

    参考教程 视频:b站oeasy 书籍:<adobe premiere pro cc 2018经典教程> 学习教训 一定要多做--实践是检验真理的唯一标准 书籍补充理论知识,视频讲究实操(理 ...

  7. Eureka心跳健康检查机制和Spring boot admin 节点状态一直为DOWN的排查(忽略某一个节点的健康检查)

    https://www.jdon.com/springcloud/eureka-health-monitoring.html 运行阶段执行健康检查的目的是为了从Eureka服务器注册表中识别并删除不可 ...

  8. 慕课网--docker走进第一个javaweb应用

    zh docker镜像就是一系列文件的集合 docker 容器就是一个进程.将docker镜像运行起来就是一个docker容器 docker仓库就是存储docker镜像的 1.docker的安装 do ...

  9. python脚本中调用其他脚本

    如果只关注脚本中调用他脚本直接看代码30行 PS:该脚本功能有:自动清理目录,创建目录,自动运行脚本,以此提升工作效率 import numpy as np import os from shutil ...

  10. Python实用笔记 (9)高级特性——列表生成式

    列表生成式即List Comprehensions,是Python内置的非常简单却强大的可以用来创建list的生成式. 举个例子,要生成list [1, 2, 3, 4, 5, 6, 7, 8, 9, ...