hk-school/src/components/Opening.vue

<template>
  <Teleport to="body">
    <view class="video-viewer" v-if="isShowVideo">
      <video
        :playsinline="isMo"
        :src="isMo ? 'https://eurs3.4dkankan.com/showcase/hklongxiang/video/opening-new.mp4' : 'https://eurs3.4dkankan.com/showcase/hklongxiang/video/opening-new.mp4'"
        autoplay
        controls
        @play="onVideoPlaying"
        @ended="onVideoEnd"
      ></video>
      <div v-if="showStepper" class="step-in" @click="closeVideo">跳過</div>
      <div class="mo_b"></div>
    </view>
  </Teleport>
</template>
<script setup>
import { ref, onMounted, inject } from "vue";
const isShowVideo = ref(true);
const showStepper = ref(false);
const isMo = inject("isMo");
var showTimer;
const emits = defineEmits(["done", "show-step"]);

const isWeixinBrowser = () => {
  var ua = navigator.userAgent.toLowerCase();
  return /micromessenger/.test(ua) ? true : false;
};

const closeVideo = () => {
  isShowVideo.value = false;
  emits("done");
};
onMounted(() => {
  if (isWeixinBrowser()) {
    closeVideo();
  }
  // closeVideo()
});
const onVideoPlaying = () => {
  showTimer && clearTimeout(showTimer);
  showTimer = setTimeout(() => {
    showStepper.value = true;
    emits("show-step");
  }, 3000);
};
const onVideoEnd = () => {
  emits("done");
  closeVideo();
};
</script>
<style lang="scss">
.video-viewer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000000;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 1);
  .step-in {
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    right: 30px;
    top: 30px;
    padding: 10px 30px;
    border-radius: 20px;
    cursor: pointer;
    z-index: 1000000;
    color: white;
  }

  video {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: fill;
  }
}

.isMo {
  .video-viewer {
    .mo_b {
      background: rgba(0, 0, 0, 0.8);
      filter: blur(2px);
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 1;
      display: block;
      top: 0;
      left: 0;
    }

    video {
      object-fit: scale-down;
      z-index: 1001;
      position: absolute;
    }
  }

  .step-in {
    bottom: 80px;
    top: initial;
    color: white;
    background: rgba(0, 0, 0, 1);
    transform: translateX(-50%);
    left: 50%;
    display: inline-block;
    text-align: center;
    position: fixed;
    padding: 10px;
    width: 60px;
    z-index: 10000;
  }
}
</style>