YangZhouDaYunHeDaDu/src/components/StartUp.vue

<template>
  <div class="start-up">
    <button
      v-show="canStart"
      class="start"
      @click="onClickStart"
    >
      开始
    </button>
    <div
      v-show="isShowVideo"
      class="video-wrap"
    >
      <video
        ref="videoEl"
        src="@/assets/videos/start-up-video.mp4"
        playsinline
        webkit-playsinline="true"
        x5-video-player-type="h5"
        @canplaythrough="store.commit('declareCanStart')"
        @ended="onVideoEnd"
      />
      <button
        class="skip"
        @click="onClickSkip"
      >
        跳过
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"

const route = useRoute()
const router = useRouter()
const store = useStore()

const canStart = computed(() => {
  return store.state.canStart
})
function onClickStart() {
  isShowVideo.value = true
  videoEl.value.play()
}

const isShowVideo = ref(false)
const videoEl = ref(null)
function onClickSkip() {
  videoEl.value.pause()
  store.commit('setHaveShownStartUp', true)
}
function onVideoEnd() {
  store.commit('setHaveShownStartUp', true)
}

const haveShownStartUp = computed(() => {
  return store.state.haveShownStartUp
})
watch(haveShownStartUp, (v) => {
  if (!v) {
    videoEl.value.currentTime = 0
    videoEl.value.play()
  }
})
</script>

<style lang="less" scoped>
.start-up{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(@/assets/images/start-up-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: black;
  >button.start{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  >.video-wrap{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    >video{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: black;
    }
    >button.skip{
      position: absolute;
      right: 100px;
      bottom: 100px;
      color: blue;
    }
  }
}
</style>