tba-waves/src/components/OpeningAnimation.vue

<script lang="ts" setup>
import {onMounted, ref, watch} from "vue";

const openingAnimationSrc = ref(new URL('@/assets/video/openingAnimation.mp4', import.meta.url).href)
const openingAnimationRef = ref(null)
const isPlaying = ref(false);

const emit = defineEmits(['close']);

const onPlay = () => {
  isPlaying.value = true;
};

const onPause = () => {
  isPlaying.value = false;
};

const onEnded = () => {
  isPlaying.value = false;
  emit('close')
};

// 监听 isPlaying 的变化
watch(isPlaying, (newVal) => {
  console.log(`Video is ${newVal ? 'playing' : 'paused'}`);
});

onMounted(() => {
  if (openingAnimationRef.value) {
    // 初始状态设置
    isPlaying.value = !openingAnimationRef.value.paused;
  }
});
</script>
<template>
  <video ref="openingAnimationRef" autoplay class="opening-animation-video" muted @ended="onEnded" @pause="onPause"
         @play="onPlay">
    <source :src="openingAnimationSrc" type="video/mp4">
  </video>
</template>
<style lang="scss" scoped>
.opening-animation-video {
  width: 100%;
  height: 100%;
  z-index: 1;
  position: fixed;
  object-fit: cover;
}
</style>