uniapp 轮播图第一张是视频

想写出淘宝那样的效果，技术不精，现在的效果是：点击轮播的图片，出现视频播放，当视频被暂停或者播放完成之后，隐藏video，显示图片；本文借鉴于一个大佬的博客，但是找不到那个地址了，望见谅；

html

套用两个swiper，来进行隐藏和显示video；details是接口中详情的对象；

     <swiper class="screen-swiper" :hidden="!autoplay">
                <swiper-item>
                    <video id="myVideo"
                           :src="details.videofile"
                           autoplay="false" loop muted show-play-btn controls objectFit="cover" @pause="ZhanTing"
                           @ended="ZhanTing"></video>
                </swiper-item>
            </swiper>
            <swiper :hidden="autoplay" class="screen-swiper" indicator-dots="true" circular="true"
                    :autoplay="!autoplay" interval="3500" duration="500">
                <swiper-item v-for="item in details.limages" :key="item" @tap="BoFang">
                    <image :src="item" mode="scaleToFill" class="sw-img"></image>
                </swiper-item>
            </swiper>

js

data中的值：autoplay: false, // 视频是否播放；

  //    视频播放
      BoFang () {
        if (this.autoplay == false) {
          this.autoplay = true
          this.videoContext.play()
        }
      },
      //    视频暂停
      ZhanTing () {
        if (this.autoplay == true) {
          this.autoplay = false
        }
      },

css

.screen-swiper {
	min-height: 375rpx;
}

.screen-swiper image,
.screen-swiper video{
	width: 100%;
	display: block;
	height: 100%;
	margin: 0;
	pointer-events: none;
}

来源：oschina

链接：https://my.oschina.net/clearcode/blog/4499225