微信浏览器安卓手机video浮在最上层问题

//x5-video-player-type="h5" x5-video-player-fullscreen="true"

<video id="video" src="http://200011112.vod.myqcloud.com/200011112_733d3cea0f8a11e7afae899fa40866b8.f0.mp4" x5-video-player-type="h5" x5-video-player-fullscreen="true" style="background: rgb(0, 0, 0); width: 102.2%; height: 569px; margin-top: -1px; margin-left: -1.1%; margin-right: -1.1%;" id="video" loop="loop" width="100%" preload="auto" poster="" webkit-playsinline="true" playsinline="true" x-webkit-airplay="true" controls="controls"></video>

在微信浏览器里面使用video标签，会自动变成全屏，改成下面就好了，起码可以在video标签之上加入其他元素。

<video id="videoID"webkit-playsinline="true" x-webkit-airplay="true"  playsinline="true"x5-video-player-type="h5"x5-video-player-fullscreen="true"width="100%" height="100%"preload="auto"  poster="" src="">

</video>

还有个问题，在Android的微信里面，就算加上了上面的属性，还会出现上下有黑边，不能全屏的问题。

解决办法：给video加上object-fit: fill;的style属性。

微信浏览器安卓手机video浮在最上层问题的更多相关文章

  1. 移动端判断微信浏览器安卓浏览器和ios浏览器

    $(function(){ var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf ...

  2. 大事记 - 安卓微信浏览器 video 标签层级过高

    // 为什么叫<大事记>? // 以前总有面试官问这样一个问题:“你在项目中遇到过最头疼的问题是什么,是怎么解决的?” // 当时总觉得,已解决的问题都算不上头疼,所以回答总是不尽人意. ...

  3. 解决微信浏览器内video全屏问题

    前端离职,让我写个视频播放页面,木办法只有我来搞了. 默认用h5的 video标签 测试时候发现微信浏览器内访问video自动全屏播放. 搜了下 webkit-playsinline="tr ...

  4. 防止微信浏览器video标签全屏的问题

    在微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之上加入其他元素. <video id="videoID" webkit-play ...

  5. 解决微信浏览器video全屏的问题

    解决微信浏览器video全屏的问题 在微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之上加入其他元素. <video id="videoID ...

  6. 部分安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法

    前端JS中使用XMLHttpRequest 2上传图片到服务器,PC端和大部分手机上都正常,但在少部分安卓手机上上传失败,服务器上查看图片,显示字节数为0.下面是上传图片的核心代码: HTML < ...

  7. 手机、电脑、安卓、iOS、微信浏览器判断

    微信浏览器判断: // true为微信浏览器function is_weixin() { var ua = window.navigator.userAgent.toLowerCase(); if ( ...

  8. video 标签在微信浏览器的问题解决方法

    最近做的些web页面,内嵌许多小视频,在ios和安卓手机上播放时,遇到不少问题: 在微信浏览器内播放时,视频会自动全屏 如果每个视频都有一张自定义的图片作为封面,在显示视频的同时,如果没有给这个视频设 ...

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

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

随机推荐

  1. echarts 角度渐变环形图心得

    今天做了一个图,把自己的遇到的问题和体会记录一下,以防忘记 echarts地址 https://gallery.echartsjs.com/editor.html?c=xEPtLLmG4G 参考官网地 ...

  2. Hadoop之运行环境搭建

    一.虚拟机环境准备 1.克隆虚拟机 2.修改克隆虚拟机静态IP 3.修改主机名 4.关闭防火墙 5.创建hadoop用户 6.配置hadoop用户具有root权限 7.在/opt 目录下创建文件夹 1 ...

  3. 【云短信】腾讯&阿里

    腾讯 : https://github.com/qcloudsms/qcloudsms_csharp 安装nuget包: using qcloudsms_csharp; using System.Co ...

  4. 1047 Integer Inquiry

    String 大数加法模板 #include<stdio.h> #include<string> #include<iostream> using namespac ...

  5. Qt551.窗口滚动条

    1.代码的方式来创建 ScrollArea,然后使用 倒是 正常(有滚动条显示),但是此方式太麻烦 不如直接拖控件来的方便直观快捷. 但是,直接拖控件的方式 ScrollArea中无法显示出 滚动条, ...

  6. 一款好用的JS时间日期插件layDate

    觉得这个插件很不错,使用起来也很方便,推荐使用 1.插件截图 2.插件配置 选择很多,配置也很简单,插件官网:https://www.layui.com/laydate/配置说得很明确,基本操作就是: ...

  7. git同时存在两个账号（在同一台电脑上）——三步完成

    目录 1.首先是常规设置 2.同时添加两个账号 3.最后一步,配置~/.ssh/config文件 4.补充:有时因为设置了全局账号,因此需要清除 由于本人有连个git账号,个人github账号和公司g ...

  8. 前后端token机制 识别用户登录信息

    Token,就是令牌,最大的特点就是随机性,不可预测.一般黑客或软件无法猜测出来. 那么,Token有什么作用?又是什么原理呢? Token一般用在两个地方: 1)防止表单重复提交. 2)anti c ...

  9. helm一键 安装mariadb-ha（详细）

    一. 二.单机安装一主一从 先创建对应pv https://github.com/helm/charts/blob/master/stable/mariadb/templates/master-sta ...

  10. MongoDB之 分组查询

    分组查询 可视化工具 https://robomongo.org pymongo from pymongo import MongoClient # 方式一: c = MongoClient(host ...