您的位置:首页 > 移动开发 > 微信开发

防止微信浏览器video标签全屏的问题

2017-04-27 20:16 811 查看
微信浏览器里面使用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=9862400b661006b5cf5a512e5ad80d6dLEVEL5-御坂美琴
http://mgcdn.migucloud.com/vi0/333/3I/UV9aHh9ob6PGovwAmV4/3IUV9aHh9ob6PGovwAmV4.mp4dragon soul
WeChat H5 Video播 放 问 题 详 解:http://mp.weixin.qq.com/s/KZbVqLOLZuOOMUOYUvPaKA
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: