uniapp项目里使用uview组件库搭建的轮播图内插入一个视频实现图片正常轮播到视频时视频播放时暂停轮播暂停和结束时开启轮播

可以通过监听视频的播放状态，在视频播放时暂停轮播，暂停和结束时开启轮播。

首先，在轮播图组件的data中添加一个变量，用于存储当前轮播到的图片或视频的索引：

data() {
  return {
    ...
    current: 0, // 当前轮播到的图片或视频的索引
    ...
  }
}

然后，在轮播图组件的mounted生命周期中，通过uni.createSelectorQuery()获取视频组件的实例，并添加监听事件：

mounted() {
  ...
  this.$nextTick(() => {
    uni.createSelectorQuery().in(this).select('.video').fields({
      size: true
    }, res => {
      this.video = uni.createVideoContext('video', this);
      this.video.width = res.width;
      this.video.height = res.height;
      this.video.onPlay(() => {
        this.pause(); // 暂停轮播
      });
      this.video.onPause(() => {
        this.play(); // 开启轮播
      });
      this.video.onEnded(() => {
        this.play(); // 开启轮播
      });
    }).exec();
  });
  ...
}

在轮播图组件的methods中，添加暂停和开启轮播的方法：

methods: {
  ...
  pause() {
    clearInterval(this.timer);
  },
  play() {
    this.timer = setInterval(this.next, this.duration);
  },
  ...
}

最后，在轮播图组件的template中，根据当前轮播到的图片或视频的类型渲染不同的内容：

<template>
  ...
  <swiper-item v-for="(item, index) in list" :key="index">
    <template v-if="item.type === 'image'">
      <img :src="item.src" />
    </template>
    <template v-else>
      <video
        class="video"
        :src="item.src"
        id="video"
        muted
        controls
        :style="{ width: video.width + 'px', height: video.height + 'px' }"
      ></video>
    </template>
  </swiper-item>
  ...
</template>

完整代码如下：

<template>
  <swiper
    :autoplay="autoplay"
    :duration="duration"
    :circular="circular"
    :indicator-dots="indicatorDots"
    :indicator-active-color="indicatorActiveColor"
    @change="handleChange"
  >
    <swiper-item v-for="(item, index) in list" :key="index">
      <template v-if="item.type === 'image'">
        <img :src="item.src" />
      </template>
      <template v-else>
        <video
          class="video"
          :src="item.src"
          id="video"
          muted
          controls
          :style="{ width: video.width + 'px', height: video.height + 'px' }"
        ></video>
      </template>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      autoplay: true, // 是否自动播放
      duration: 3000, // 自动播放间隔时间
      circular: true, // 是否循环播放
      indicatorDots: true, // 是否显示指示点
      indicatorActiveColor: '#000000', // 激活指示点颜色
      current: 0, // 当前轮播到的图片或视频的索引
      timer: null, // 定时器
      video: null, // 视频组件实例
      list: [
        { type: 'image', src: 'https://xxx.jpg' },
        { type: 'image', src: 'https://xxx.jpg' },
        { type: 'video', src: 'https://xxx.mp4' },
        { type: 'image', src: 'https://xxx.jpg' }
      ]
    };
  },
  mounted() {
    this.$nextTick(() => {
      uni.createSelectorQuery().in(this).select('.video').fields({
        size: true
      }, res => {
        this.video = uni.createVideoContext('video', this);
        this.video.width = res.width;
        this.video.height = res.height;
        this.video.onPlay(() => {
          this.pause(); // 暂停轮播
        });
        this.video.onPause(() => {
          this.play(); // 开启轮播
        });
        this.video.onEnded(() => {
          this.play(); // 开启轮播
        });
      }).exec();
    });
    this.play();
  },
  methods: {
    handleChange(e) {
      this.current = e.detail.current;
      if (this.list[this.current].type === 'video') {
        this.pause(); // 暂停轮播
      } else {
        this.play(); // 开启轮播
      }
    },
    pause() {
      clearInterval(this.timer);
    },
    play() {
      this.timer = setInterval(this.next, this.duration);
    },
    next() {
      if (this.current < this.list.length - 1) {
        this.current++;
      } else {
        this.current = 0;
      }
      this.$nextTick(() => {
        this.video = null; // 重置视频组件实例
        uni.createSelectorQuery().in(this).select('.video').fields({
          size: true
        }, res => {
          this.video = uni.createVideoContext('video', this);
          this.video.width = res.width;
          this.video.height = res.height;
          this.play();
        }).exec();
      });
    }
  }
};
</script>
``