最近一年都在做直播,遭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. 其他函数-web_concurrent

    web_concurrent_start函数是并发组开始的标记.组中所有的函数是并发执行的,并发组的结束符为web_concurrent_end 函数. 在并发组中,可以包含的函数有: web_url ...

  2. LR脚本信息函数-lr_get_host_name

    lr_get_host_name() 返回主机的名称. char * lr_get_host_name(); lr_get_host_name函数返回执行脚本的机器的名称. 示例:lr_get_hos ...

  3. mongodb 数据库 增删改查

    mongodb    数据库      增删改查 增: // 引入express 模块 var express = require('express'); // 路由var router = expr ...

  4. Tensorflow2 自定义数据集图片完成图片分类任务

    对于自定义数据集的图片任务,通用流程一般分为以下几个步骤: Load data Train-Val-Test Build model Transfer Learning 其中大部分精力会花在数据的准备 ...

  5. MongoDB设计方法及技巧

    MongoDB是一种流行的数据库,可以在不受任何表格schema模式的约束下工作.数据以类似JSON的格式存储,并且可以包含不同类型的数据结构.例如,在同一集合collection 中,我们可以拥有以 ...

  6. NodeJs将异步方法改为同步以上传文件为例

    [本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究.若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!] 下面这个例子既写 ...

  7. Linux下如何寻找相同文件?

    大家好,我是良许. 随着电脑的使用,系统里将产生很多垃圾,最典型的就是同一份文件被保存到了不同的位置,这样导致的结果就是磁盘空间被大量占用,系统运行越来越慢. 所以如果你的电脑空间告急的话,可以试着去 ...

  8. 【初学Java学习笔记】SQL语句调优

    1, 对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2,应尽量避免在 where 子句中对字段进行 null 值判断,创建表时NULL是默认 ...

  9. android handle详解2 主线程给子线程发送消息

    按照android handler详解分析的原理我们可以知道,在主线程中创建handle对象的时候,主线程默认创建了一个loop对象使用threalocal函数将loop对象和主线程绑定. 我们能不能 ...

  10. dart快速入门教程 (2)

    2.变量和数据类型 2.1.变量和常量 变量通俗的说就是可以变化的量,作用就是用来存储数据,你可以把一个变量看作是一个水果篮,里面可以装苹果.梨.香蕉等,常量就是一个固定的值,和变量是相对的,变量可以 ...