vue实现视频开场

实现视频开场效果

在Vue中实现视频开场效果可以通过多种方式完成，常见方法包括使用HTML5的<video>标签结合Vue的动态渲染和事件监听。

HTML5视频标签基础

<video ref="videoPlayer" autoplay muted>
  <source src="@/assets/intro.mp4" type="video/mp4">
</video>

设置autoplay和muted属性确保视频自动播放（浏览器策略要求静音）。

控制视频播放状态

通过Vue的ref和事件监听实现播放控制：

export default {
  methods: {
    playVideo() {
      this.$refs.videoPlayer.play()
    },
    onVideoEnd() {
      // 视频结束后跳转页面或显示内容
      this.$router.push('/home')
    }
  },
  mounted() {
    this.$refs.videoPlayer.addEventListener('ended', this.onVideoEnd)
  }
}

添加加载状态处理

视频加载时显示加载动画：

<template>
  <div v-if="loading" class="loader">Loading...</div>
  <video 
    v-else
    @loadeddata="loading = false"
    @waiting="loading = true"
  >
</template>

响应式视频尺寸

通过CSS确保视频适应不同屏幕：

video {
  width: 100%;
  height: auto;
  max-height: 100vh;
  object-fit: cover;
}

移动端兼容处理

针对移动设备添加触摸事件跳过功能：

handleSkip() {
  this.$refs.videoPlayer.currentTime = 
    this.$refs.videoPlayer.duration - 0.1
}

预加载优化

在created生命周期预加载视频：

created() {
  const video = new Video()
  video.src = require('@/assets/intro.mp4')
  video.load()
}

动画过渡效果

视频结束后添加页面过渡：

onVideoEnd() {
  this.$el.classList.add('fade-out')
  setTimeout(() => {
    this.$router.push('/main')
  }, 1000)
}

对应CSS：

.fade-out {
  opacity: 0;
  transition: opacity 1s;
}