微信浏览器安卓手机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. 【HNOI 2016】网络

    Problem Description 一个简单的网络系统可以被描述成一棵无根树.每个节点为一个服务器.连接服务器与服务器的数据线则看做一条树边.两个服务器进行数据的交互时,数据会经过连接这两个服务器 ...

  2. oracle数据库查看和解除死锁

    查看死锁: select sess.sid, sess.serial#, lo.oracle_username, lo.os_user_name, ao.object_name, lo.locked_ ...

  3. 【搬运工】redis 启动和关闭

    如果是用apt-get或者yum install安装的redis,可以直接通过下面的命令停止/启动/重启redis /etc/init.d/redis-server stop /etc/init.d/ ...

  4. 【php】单例模式和工厂模式

    单例模式:防止重复实例化,避免大量的new操作,减少消耗系统和内存的资源,使得有且仅有一个实例对象 header("Content-type: text/html; charset=utf- ...

  5. 有效的括号(Java实现)

    题目: 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合. 左括号必须以正确的顺序闭合. 注意空字符 ...

  6. python 2.7 读写 opc数据

    运行环境 python2.7+window server2008+keep server 1.安装OpenOPC a> 下载 OpenOPC-1.3.1.win32-py2.7 (1).exe  ...

  7. 铁大Facebook轻量化界面NABCD

    界面轻量化: N:满足了用户更快速.更直接.更方便寻求自己所要信息的需求,不被复杂界面以及各种广告所困扰. A:我们将会用Bootstrap工具包开发前端界面,Bootstrap是基于jQuery框架 ...

  8. 20190411wdVBA_排版

    Sub LayoutForExamPaper() Dim StartTime As Variant Dim UsedTime As Variant StartTime = VBA.Timer Appl ...

  9. mybatis 一对一关联 association 返回空值

    mybatis 一对一关联 association 返回空值 最近学习spring mvc + mybatis开发,看的书是<Spring MVC+Mybatis开发 从入门到精通>,在学 ...

  10. C++ 中缀转后缀表达式并求值

    //中缀转后缀 #include<iostream> #include<stack> using namespace std; int prio(char x){ ; ; ; ...