防止微信浏览器video标签全屏的问题
2017-04-27 20:16
811 查看
在微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之上加入其他元素。
还有个问题,在Android的微信里面,就算加上了上面的属性,还会出现上下有黑边,不能全屏的问题。
解决办法:给video加上object-fit: fill;的style属性。
案例:
WeChat H5 Video播 放 问 题 详 解:http://mp.weixin.qq.com/s/KZbVqLOLZuOOMUOYUvPaKA
<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-御坂美琴 |
http://mgcdn.migucloud.com/vi0/333/3I/UV9aHh9ob6PGovwAmV4/3IUV9aHh9ob6PGovwAmV4.mp4 | dragon soul |
相关文章推荐
- 微信内置浏览器在使用video标签时(安卓)默认全屏的原因及解决办法
- VIDEO标签在微信浏览器内播放会自动全屏
- video 标签在微信浏览器的问题解决方法
- [转]html5 video在安卓大部分浏览器包括微信最顶层的问题
- video标签在ios微信中的一个问题
- HTML5 video 标签浏览器兼容问题
- js手机浏览器video标签会一直置顶,遮盖住弹出层问题
- Chrome、firefox浏览器中video标签无法播放MP4视频问题
- 【暂未解决】video标签在移动端页面播放时默认全屏的问题
- 微信video标签全屏无法退出bug
- 关于Google浏览器使用layer弹出层video标签播放视屏无法全屏播放问题
- 解决百度富文本编辑不能上传视频成功但是在IE浏览器不能播放、显示的问题、解决浏览器不支持video标签
- html5 video标签个浏览器兼容问题
- HTML5 video 标签浏览器兼容问题
- html video标签全屏和安卓端点击屏幕不显示操作栏问题
- HTML5 video 标签浏览器兼容问题
- ios微信浏览器中video视频播放问题
- 安卓微信video标签浮在最表层覆盖分享框问题
- 微信video标签全屏无法退出bug
- 解决react vr视频在微信和浏览器上全屏的问题