WuxiCharityMuseum/src/views/BannerView.vue

<template>
  <iframe
    ref="bannerIframe"
    frameborder="0"
    class="banner-iframe"
    src="https://sit-wuxicishan.4dage.com/unityPcBanner"
  />

  <div
    v-show="showVideo && videoUrl"
    class="banner-video"
  >
    <video
      ref="startupVideoRef"
      :src="`/videos/${videoUrl}`"
      autoplay
      :muted="$isSafari"
      controls="false"
      x5-playsinline="true"
      playsinline="true"
      webkit-playsinline="true"
      x-webkit-airplay="true"
      x5-video-player-type="h5-page"
      @ended="onEnded"
    />

    <button
      v-if="isShowPlayBtn"
      class="banner-video__play"
      @click="onClickPlayVideo"
    >
      播放
    </button>

    <div
      class="banner-video__skip"
      @click="onEnded"
    >
      跳过
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, inject, nextTick } from "vue"
import { useRouter } from "vue-router"

const router = useRouter()
const $isSafari = inject('$isSafari')

let checkedIdx = 0
const videoUrl = ref('')
const showVideo = ref(false)
const startupVideoRef = ref(null)
const bannerIframe = ref(null)

const VIDEO_MAP = [
  'ysdt.mp4',
  'xszc.mp4',
  'csbwg.mp4'
]

const isShowPlayBtn = ref($isSafari.value)
function onClickPlayVideo() {
  startupVideoRef.value.play()
  isShowPlayBtn.value = false
}
const onEnded = () => {
  switch (checkedIdx) {
  case 0:
    router.push({
      name: 'HomeView'
    })
    break
  case 1:
    router.push({
      name: 'CityOfXishan'
    })
    break
  case 2:
    router.push({
      name: 'MuseumView'
    })
    break
  }

  showVideo.value = false
}

onMounted(() => {
  if (!bannerIframe.value) return

  bannerIframe.value.contentWindow.OnClickScene = function(v) {
    videoUrl.value = VIDEO_MAP[v]
    showVideo.value = true
    checkedIdx = v
  }
})
</script>

<style lang="less" scoped>
.banner-iframe {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 998;
}
.banner-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;

  video {
    width: inherit;
    height: inherit;
    object-fit: cover;
    pointer-events: none;

    &::-webkit-media-controls-enclosure {
      display: none !important;
    }
  }
  &__play{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: white;
    width: 117px;
    height: 51px;
    letter-spacing: 4px;
    line-height: 42px;
    background: url('@/assets/images/btn0@2x-min.png') no-repeat center / contain;
  }
  &__skip {
    position: absolute;
    right: 30px;
    bottom: 30px;
    display: flex;
    justify-content: center;
    font-size: 20px;
    color: white;
    width: 117px;
    height: 51px;
    letter-spacing: 4px;
    line-height: 42px;
    cursor: pointer;
    background: url('@/assets/images/btn0@2x-min.png') no-repeat center / contain;
  }
}
</style>