技术栈：vue+vant+xgplayer

代码如下：

<van-swipe :autoplay="autoplay" indicator-color="#1989fa">
        <van-swipe-item v-for="item in imgVideoBanner" :key="item.id">
          <div class="video" :id="item.id"></div>
        </van-swipe-item>
      </van-swipe>

const imgVideoBanner = [
  {
    id: "mse01",
    src: require("@/assets/img/index/11-1.png"),
    videoUrl:
      "https://xxx.mp4",
  },
  {
    id: "mse02",
    src: require("@/assets/img/index/11-2.png"),
    videoUrl:
      "https://ccc.mp4",
  },
];

mounted() {
    for (let item of this.imgVideoBanner) {
      let player = new Player({
        id: item.id,
        width: 946,
        height: 634,
        fluid: true, //流式布局，可使播放器宽度跟随父元素的宽度大小变化
        // fitVideoSize: "fixHeight", //容器高度或宽度按照视频内容比例增大
        loop: true, //循环播放
        videoInit: false, //视频封面默认为首帧
        poster: item.src,
        url: item.videoUrl,
        playbackRate: [0.5, 0.75, 1, 1.5, 2],
        defaultPlaybackRate: 1.0,
        "x5-video-player-fullscreen": true,
      });
      player.on("play", () => {
        this.autoplay = 0;
        player.getFullscreen(player.root);
        scrollTop = this.scollPostion().top;
      });
      player.on("exitFullscreen", () => {
        this.autoplay = 3000;
        player.pause();
        //设置滚动条位置
        window.scrollTo(0, scrollTop);
      });
    }
  },

存在BUG：视频暂停播放后再滑动banner图，会出现卡顿不流畅的效果