在微信浏览器里面使用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属性。

案例：

http://test.migucloud.com/vi0/360/3H/YEtSz9x5mHYrnzglvsHD/3HYEtSz9x5mHYrnzglvsHD.mp4 龙珠超MAD-青鸟（Flow）
http://test.migucloud.com/vi0/360/3L/APwQ3ad3AGxt4pp0YNNv/3LAPwQ3ad3AGxt4pp0YNNv.mp4 龙珠超MAD-那个那个啊（咕噜碳）
http://note.youdao.com/yws/api/personal/file/WEBf82fd575bd63c60f98ba999f1c1279ad?method=download&inline=true&shareKey=9862400b661006b5cf5a512e5ad80d6d LEVEL5-御坂美琴

WeChat H5 Video播 放 问 题 详 解：http://mp.weixin.qq.com/s/KZbVqLOLZuOOMUOYUvPaKA

防止微信浏览器video标签全屏的问题的更多相关文章

  1. 微信video标签全屏无法退出bug 本文系转载

    安卓(android)微信里面video播放视频,会被强制全屏,播放完毕后还有腾讯推荐的视频,非常讨厌..强制被全屏无法解决,但是视频播放完毕后退出播放器可以解决.方法就是视频播放完毕后,用音频aud ...

  2. 微信video标签全屏无法退出bug

    安卓(android)微信里面video播放视频,会被强制全屏,播放完毕后还有腾讯推荐的视频,非常讨厌..强制被全屏无法解决,但是视频播放完毕后退出播放器可以解决.方法就是视频播放完毕后,用音频aud ...

  3. X5内核浏览器video自动全屏解决办法-canvas

    最近在做手机端上面播放视频的项目,但是在安卓上面,video的播放是脱离页面,置于最顶层的,所以带来了很多问题,为了解决这个问题,查看了多方资料,写了下面简单的demo,方便以后使用. 下面就是运用c ...

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

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

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

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

  6. video 在微信中，安卓全屏和ios上如何内联播放？H5同层播放器相关接入规范

    今天在做一个分享页面的时候需要播放视屏用了video,然后各种坑开始了: <video src="http://xxx.mp4 " id="myVideo" ...

  7. video自动全屏播放

    video自动全屏播放 关于Screen.lockOrientation() https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockO ...

  8. 微信内置浏览器video标签自动全屏的问题

    微信打开h5video视频的时候都会自动全屏播放,有时候影响用户体验 要禁止自动全屏就要加这几个属性 'x5-playsinline':'true', 'webkit-playsinline':'tr ...

  9. 微信浏览器video播放视频踩坑

    video属性介绍 iOS的属性 playsinline On iPhone, video playsinline elements will now be allowed to play inlin ...

随机推荐

  1. node插件http-proxy实现反向代理

    最近自己动手做了一个微信小程序,是直接买的腾讯云的小程序解决方案,怎么说那,用起来还是会遇到不少问题的,不过在交流群里还是会有很多人帮助你的. 闲话少说,因为要再做一个别的服务,就想直接用这台小程序的 ...

  2. Solr DateRangeField

    Solr DateRangeField 是solr5.0 实现的一个feature. 关于 DateRangeField 支持日期查询如  date_field:[2016-03-23 TO 2017 ...

  3. 路径正确下，Eclipse读取txt文件仍失败

    症状:使用Eclipse读取文件时,路径输入确认正确(前提!!!),但控制台总报错: 错误类型一: Exception in thread "main" java.io.FileN ...

  4. 实现Unity编辑器模式下的旋转

    最近在做一个模型展示的项目,我的想法是根据滑动屏幕的x方向差值和Y方向的差值,来根据世界坐标下的X轴和Y轴进行旋转,但是实习时候总是有一些卡顿.在观察unity编辑器下的旋转之后,发现编辑器下的旋转非 ...

  5. SQL SERVER 执行大于80M的SQL 脚本

    在CMD控制器窗口 使用SqlCmd命令来执行 具体请看 SqlCmd /? 或者MSDN

  6. git 远程仓库管理

    要参与任何一个 Git 项目的协作,必须要了解该如何管理远程仓库.远程仓库是指托管在网络上的项目仓库,可能会有好多个,其中有些你只能读,另外有些可以写.同他人协作开发某 个项目时,需要管理这些远程仓库 ...

  7. Windows：将cmd命令行添加到右键中方法

    win10中将命令行cmd添加到右键的方法 Windows cmd 右键 win10 命令行 最近在学python,所以会用到很多库文件,但是有的库文件需要下载whl文件再通过cmd进行安装,所以每次 ...

  8. win8效果的横向布局

    有一个月没写过博客了,自己的博客也没有看过,前段时间一直在忙着写代码,公司有一个制漆的产品,与传统纵向布局不一样,要求页面横向布局,类似win8的那种布局效果,最开始,我也没有什么头绪,然后硬着头皮做 ...

  9. h5开发app之在线生成二维码

    h5通过jquery和qrcode在线生成二维码 首先我们需要下载一个qrcode.js文件,然后依次引入jquery和qrcode文件. 1.创建一个输入框以便做演示使用: <input id ...

  10. codevs2019 Uva10029 递变阶梯

    提交地址:[codevs][Uva] 题目描述  递变是指通过增加.减少或改变单词x中的一个字母,使它变成字典中的另一个单词y.比如将dig变成dog,将dog变成do都是递变.递变阶梯是一个按字典序 ...