微信小程序之video组件与cover-view组件和cover-image组件灵活应用

前言：最近忙着赶项目，没时间更博；希望和大家一起学习一起进步。

本人遇到的坑，以及爬出坑的方法：在某个微信小程序项目中，有这样一个需求：在滑块swiper组件和swiper-item组件中嵌套video，然后自定义一个播放的按钮替换默认的播放按钮和位置（我开始用的方法是用相对定位，把图片直接定位在视频的中央地方，问题就出现了，由于文档已经给了提示，最好不要在滑块swiper组件和swiper-item组件中嵌套video，所以，最后导致，第一个滑块可以正常看到播放按钮，其他的则不行，会随着滑块滑动而隐藏其他的播放按钮（因为微信小程序video的z-idnex是最高级的），后来度娘说用组件cover-view或cover-image组件可以实现覆盖在video，上，果然，显示是可以了，但是，播放按钮的位置漂浮不定，根本不能满足需求；后来灵感一来，发现，把video组件和image组件放在两个view组件里，用相对定位，然后把video的z-index设置为-1；image的z-index大于1就行，然后就解决了。实现滑块滑动，播放按钮稳稳的跟着视频滑动）

 

wxml代码：（主要看结构）

<swiper >

<swiper-item wx:for="{{antHomeData}}" wx:key="" class="swiper-cnt">

<view class="video-cnt">

<video  src="{{item.adUrl}}"></video>

</view>

<image  class="play-btn" src="/images/bf.png"></image>

</swiper-item>

</swiper>

wxss代码：

.swiper-cnt {

display: flex;

flex-direction: column;

width:664rpx;

margin-left:40rpx;

position: relative;

}

.video-cnt {

position: absolute;

top:0;

left: 0;

z-index: -1!important;

width: 641rpx;

height: 465rpx;

}

.play-btn {

width: 70rpx;

height: 70rpx;

position: absolute;

top: 232.5rpx;

left: 320.5rpx;

margin: -35rpx 0 0 -35rpx;

z-index: 100;

}

.swiper-cnt .video-cnt video {

border-radius: 12rpx;

width: 100%;

height: 100%;

}