如何解决背景视频切换时的闪屏

1.html代码

<div class="videow">
      <video class="fullscreenVideo" v-show="showDiv" :src="videoUrl[0]" id="bgVid" playsinline="" @ended="isPlayEnd"
        autoplay="" muted="">
      </video>
      <video class="fullscreenVideo" v-show="!showDiv" :src="videoUrl[1]" playsinline="" autoplay="" muted="" loop>
      </video>
    </div>

2.js代码

export default {
  name: 'LoginPublic',
  data() {
    return {
      videoUrl: [require('../../assets/login_bg_videow/bg.mp4'), require('../../assets/login_bg_videow/loop.mp4')],
      videoShow: 0,
      showDiv: true
    };
  },
  methods: {
    //判断视频有没有播放完毕
    isPlayEnd(e) {
      if (e && e.type == "ended") {
        this.showDiv = false
      }
    },


  },
};

3.css代码

.videow {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
  // background-color: rgb(0, 157, 255);

  .fullscreenVideo {
    width: 100%;
    height: 100%;
    object-fit: fill
  }
}