uniapp轮播图视频图片组合

uniapp轮播图视频/图片组合

具体根据个人需求修改

参考文档

api

template

<view class="swiperWrap" v-if="bannerList.length > 0">
  <swiper class="swiper-box" @change="swiperChange" indicator-dots circular="true" autoplay="true" indicator-active-color="#fff">
    
    <swiper-item class="swiper-item" v-for="(item, index) in bannerList" :key="index">
      <block v-if="item.resourceType == 1">
        <image class="image-box" :src="item.pic" mode="aspectFill"></image>
      </block>

      <block v-else>
        <video class="video-box" id="video" :enable-progress-gesture="false" :src="item.videoUrl" :poster="item.posterUrl" @error="videoErrorCallback" controls object-fit="fill" @timeupdate="timeupdateTap"></video>
      </block>
      
    </swiper-item>
    
  </swiper>
</view>

js

export default {
  data() {
    return {
      bannerList: [
        {
          pic: 'xxx',
          resourceType: 1, // 图片
        },
        {
          videoUrl: 'xxx',
          posterUrl: 'xxx',
          resourceType: 2, //视频
        }
      ],
    }
  },
  onReady() {
    // #ifndef MP-ALIPAY
    this.player = uni.createVideoContext('video')
    // #endif
  },
  methods: {
     /**
     * swiperChange 事件
     */
    swiperChange(e) {
      let current = e.target.current;
      // 如果不是视频类型 暂停视频
      if (this.bannerList[current].resourceType == 2 && this.videoCurrentTime > 0) {
        // 播放视频
        this.player.play();
      } else {
        // 暂停视频
        this.player.pause();
      }
    },
     /**
     * 处理video错误
     */
    videoErrorCallback (e) {
      uni.showModal({
        content: e.target.errMsg,
        showCancel: false
      })
    },
    /**
     * 播放进度变化时触发
     */
    timeupdateTap(e) {
      this.videoCurrentTime = e.detail.currentTime;
      if(this.videoCurrentTime == e.detail.duration) {
        this.videoCurrentTime = '';
        this.player.pause();
      }
    }
  }
}