微信浏览器--IOS安卓video中的坑点

刚好项目中有使用video,便自己预先写了个demo

发现在微信浏览器中用video会有不小的坑，网上大部分说的集中的主要是

1、安卓/IOS播放自动全屏

2、安卓播放完毕后的广告 毕竟腾讯的

基本以上写法可以兼容双平台会出现的问题。

但是广告还是一样会有，心机呀。 那么一些大平台B站 直播平台 是如何做到自定义视频的呢

其实他们都用了video。大家可以参考bilibli的视频 然后用F12用手机预览模式。

video本身的控件去除了，自定义的播放控件栏

全屏如何操作呢？

其实全屏是通过样式进行操作。

这个是我在Vue中写的demo。 

原生H5的话 可以只需要动态插入删除wide样式就可以了，就能实现微信浏览器中的'伪全屏'。

还有一些活动的H5需要进行视频中的页面铺满

对vedio加入该样式即可。

 object-fit:cover;

object-fit属性由下列的值中选择一个关键字来指定。

值 
fill 
被替换的内容的大小，以填补该元素的内容框：对象的具体对象的大小是元素的使用宽度和高度。 
contain 
被替换的内容的大小，为自身宽高比不变，适应该元素的内容框的大小：它的具体对象的大小被解析为对元素的使用宽度和高度的含有约束。 
cover 
被替换的内容的尺寸却使元件的整个内容框，以保持其长宽比其具体的对象的大小被解析为针对元素的使用的宽度和高度的盖约束。 
none 
被替换的内容的尺寸却使元件的整个内容框，以保持其长宽比其具体的对象的大小被解析为针对元素的使用的宽度和高度的盖约束。 
scale-down 
内容的尺寸仿佛none或contain指定了，取将导致更小的具体对象的大小。 
形式语法