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

/*  http://blog.csdn.net/kepoon/article/details/53608190  */

//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属性。

时间： 2024-12-25 05:09:05

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

解决微信浏览器访问手机页面：您访问的页面无手机页面，是否进一步访问电脑版？

dz论坛总是报502没办法了,发到这里备份. 这个问题困扰楼主很长时间了,具体原因因为不懂php没去研究源码,所以只能用js解决了.也就是大家常见的通过修改source\language\lang_message.php里的not_in_mobile强制刷新页面,具体修改方法是将提示信息改成 '<meta http-equiv="refresh" content="5" />' 但是这个问题在微信浏览器下是不完全好使的,在朋友圈分享以后这个标签是不自动刷

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

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

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

前端JS中使用XMLHttpRequest 2上传图片到服务器,PC端和大部分手机上都正常,但在少部分安卓手机上上传失败,服务器上查看图片,显示字节数为0.下面是上传图片的核心代码: HTML <input type="file" id="choose" capture="camera" accept="image/*"> JavaScript var filechooser = document.getEleme

关于安卓手机在微信浏览器中无法调起相机的原因

最近功在做公司的一个项目,遇到安卓手机在微信浏览器中更换头像无法调起相机的问题,特来此记录一下. 1.微信没有相机权限,开启就行了. 2.〈input type=“file” accept=“image/*”/〉.图库和相机都能调起. 3.部分冷门手机因系统原因不开放调起相机的权限,无法解决. 原文地址:https://www.cnblogs.com/EassieLee/p/10625427.html

安卓手机微信自带浏览器点击事件失效解决

在移动端做了个导航,长这样 原来结构是用的span <span class="menu_icon"> <img src="img/icon_1.png"> <p>导航</p> </span> 绑定用的是jquery的.click $('.menu_icon').click(function () { $("#nav-phone").stop().animate({right:"

当video遇上微信浏览器

video在微信浏览器中的一些问题及解决方案 最近在做微信浏览器中的页面,由于客户需要常常需要内嵌或全屏播放视频.但是在实现过程中问题却是常有常新的. 1.html书写 这是最近做的一个全屏播放的案例(视频是竖版的),html代码如下: <video id="video" src="http://yili.yowoworld.com/haier1213/video1.mp4" poster="http://yili.yowoworld.com/hai

解决安卓微信浏览器中location.reload 或者 location.href失效的问题

出自:http://www.cnblogs.com/joshua317/p/6163471.html 在移动wap中,经常会使用window.location.href去跳转页面,这个方法在绝大多数浏览器中都不会 存在问题,但早上测试的同学会提出了一个bug:在安卓手机的微信自带浏览器中,这个是失效的,并没有跳转: 原来的代码: window.location.reload(location.href); 初步判断可能是缓存的问题,首先想到的解决办法就是在要跳转的url后面加个时间戳,告知浏览器

解决安卓微信浏览器中上传不能调用相机的问题

使用input type=file标签进行文件上传时,在安卓手机中的微信浏览器中不能调起相机,但是在苹果手机中的微信浏览器中可以调用相机.解决办法很简单, <input type="file" name="upload" onchange="onChooseFile(this)" accept="image/png,image/jpeg,image/gif" capture="camera">

安卓微信浏览器中location.href失效的问题

在移动web中,经常会使用window.location.href去跳转页面,这个方法在绝大多数浏览器中都不会存在问题,但是在安卓手机的微信自带浏览器中,会出现一个奇怪的bug. window.location.href = baseUrl + 'article/comment'; 暂时还没找到具体的原因,但是当时遇到问题时,感觉是缓存在捣乱,所以尝试着给跳转链接后面加了一个随机数或者上面的代码是通过href属性赋值去跳转到文章的评论页面,这段代码在安卓手机的微信自带浏览器中会偶发性的失效,调用