小程序使用cover-view和cover-image

根据以上需求和限制大致的思路如下：

调整好css后发现， button 并不能挡住 video 组件正中间的播放按钮，对比同类的实现产品，应该是增加了一层遮罩，显示视频预览图，点击播放后轮拦消失，于是增加一层 cover-image

通过定位将遮罩的图片铺满video组件，但是产生了以下几个bug：

在网上大致一搜没有很好的解决中拦方法， cover-view 这个组件看来只能够用于一些简单实用的场景，在当前卖桐胡的需求下实现难度很大

通过不断对比同类的产品，我发现了一个实现思路：

你好。

关于微信亮厅小程序把video固定在页面顶端的问题，解决方案如下：

1.video fixed布局会造成：视频移动，黑色底留下

2.flex布局，video固定高度，自适应部分用scroll-view, 代码如下：晌稿

…

.grid-box{

width: 100%

height: 100%

display: flex

flex-direction: column

}

.grid-const{width: 750rpxheight: 422rpx}

.grid-var{flex: 1}

.content{height: 100%}

以上代码可以满足需求，但是下拉页面，video还是会跟着移动

3.最终解决宴键孝方案，禁止页面Page滚动：

在json配置文件中添加：“disableScroll”:true

经测试，页面效果和腾讯视频一致。

您好！很高兴能为您解答， 　

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

---