lcoco/pages/login/index.vue

<template>
  <view class="login-box">
    <view class="video-background">
      <video
          src="@/static/video/login_bg.mp4"
             object-fit="cover"
             :autoplay="true"
             :controls="false"
             :muted="true"
             :loop="true"
             id="videoRef"
             class="video"
          @loadedmetadata="videoPlay"
      >
      </video>
    </view>
    <login-content v-if="showContent"></login-content>

  </view>
</template>

<script>
import LoginContent from "@/pages/login/model/loginContent.nvue";
export default {
  components: {LoginContent},
  data() {
    return {
      VideoContext: {},
      showContent:false,
      isPlay:false
    }
  },
  onLoad(query) {
    // #ifdef H5
    this.showContent=true
    //#endif

  },
  onShow() {
    // 当app切到后台再切回前台的时候会触发onShow这个时候视频应该继续播放，不这样做视频会暂停的
    this.$nextTick(() => {
        this.videoPlay()
    })
  },
  methods: {
    videoPlay(){
      this.VideoContext = uni.createVideoContext('videoRef');
      this.VideoContext.play()
    }
  }
}
</script>

<style scoped lang="scss">
.login-box{
  position: relative;
  height: 100vh;
  overflow: hidden;
  .video-background{
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    .video{
      width: 100vw;
      height: 100vh;
    }
  }
}

</style>