微信视频播放器隐藏播放控件,视频全屏做法分享
前言 平时项目中视频播放用的不多,以至于前段时间h5婚礼邀请函视频部分,微信中一直去除不了微信播放器控件,导致视频播放结束甚至还有广告产生。以为要设置域名白名单,腾讯相关域名才能解决这个问题。为此,之前还写了一篇文章“ 移动端video视频播放的痛 ”,用把视频转为canvas,但是没有效果!最近公司项目中用到了视频直播技术,HLS、webRTC 等我后面再写相关文章,我研究了一下微信中分享的直播,他们的直播都是没有视频播放器的,而且div可以直接覆盖在视频之上。那这是如何做到的呢? 经过研究终于解决了这个问题!其实这个很简单,只是之前不知道罢了! object-fit属性介绍 object-fit是一个css3属性,可以让图片或者视频适应外部容器。目前这个属性除了IE浏览器以外,其他主流浏览器都支持。 属性如下: /* Keyword values */ object - fit : fill ; object - fit : contain ; object - fit : cover ; object - fit : none ; object - fit : scale - down ; /* Global values */ object - fit : inherit ; object - fit : initial ; object - fit : unset ;