微信浏览器安卓手机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. HackerRank－Python攻城歷程-2.List comprehensions

    if __name__ == '__main__': x = int(input()) y = int(input()) z = int(input()) n = int(input()) print ...

  2. Java后台判断是否是ajax请求，并进行处理

    Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,拦截器Ajax请求 >>>>>>>>>>>>>>&g ...

  3. ExtJs写本地ArrayStore,ComboBox调用

    1.自定义本地ArrayStore var sCurStore = new Ext.data.ArrayStore({ //设备状态store fields: ["ckey", & ...

  4. 简单谈谈$.merge()

    var arr1 = [1,2,3]; var arr2 = [1,2,3]; console.log($.merge(arr1,arr2)) //[1,2,3,1,2,3],可见数组间只是合并,不会 ...

  5. Cocos Creator学习一：学习目录以及v2.0 必须关注的网址

    学习目录: <Cocos Creator学习二:查找节点和查找组件> <Cocos Creator学习三:生命周期回调函数> <Cocos Creator学习四:按钮响应 ...

  6. react state成员

    组件中包括state,props与render成员函数. react中,主要通过定义state,根据不同state渲染对应用户界面. 过程调用了成员函数setState(data,callback). ...

  7. php（三）使用thinkphp操作数据库

    1.数据库设置 在项目D:\workspaces\phpDemo01\helloworldProject\Common\Conf\config.php配置: <?php return array ...

  8. Ubuntu18.04: GPU Driver 390.116 + CUDA9.0 + cuDNN7 + tensorflow 和pytorch环境搭建

    1.close nouveau 终端输入:sudo gedit /etc/modprobe.d/blacklist.conf 末尾加两行 blacklist nouveau options nouve ...

  9. Node.js 8 中的 util.promisify的详解

    Node.js 8带来了 很多新特性 .其中比较值得注意的,便有 util.promisify() 这个方法. util.promisify() 虽然 Promise 已经普及,但是 Node.js ...

  10. [luogu P3953] [noip2017 d1t3] 逛公园

    [luogu P3953] [noip2017 d1t3] 逛公园 题目描述 策策同学特别喜欢逛公园.公园可以看成一张$N$个点$M$条边构成的有向图,且没有 自环和重边.其中1号点是公园的入口,$N ...