当前位置：首页 > VUE

vue实现视频开场

2026-01-07 00:41:29VUE

使用 Vue 实现视频开场动画

在 Vue 中实现视频开场动画可以通过结合 HTML5 的 <video> 标签和 Vue 的过渡效果或生命周期钩子来完成。以下是具体实现方法：

安装依赖（如需要） 如果需要更复杂的视频控制，可以安装 vue-video-player 或类似的库：

npm install vue-video-player video.js

基础实现（原生 HTML5 视频） 在 Vue 组件的模板中添加 <video> 标签，并通过 ref 或数据绑定控制播放：

<template>
  <div class="video-container">
    <video 
      ref="introVideo"
      autoplay
      muted
      playsinline
      @ended="onVideoEnd"
      class="fullscreen-video"
    >
      <source src="@/assets/intro.mp4" type="video/mp4">
    </video>
  </div>
</template>

组件脚本控制 通过 Vue 的生命周期和事件控制视频行为：

<script>
export default {
  methods: {
    onVideoEnd() {
      this.$emit('intro-finished');
    }
  },
  mounted() {
    // 确保视频自动播放（现代浏览器要求静音）
    this.$refs.introVideo.play().catch(e => {
      console.error("自动播放失败:", e);
    });
  }
}
</script>

样式优化 添加全屏和覆盖样式：

vue实现视频开场

<style scoped>
.video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #000;
}

.fullscreen-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

进阶实现（带过渡效果）

使用 Vue Transition 在视频结束后添加淡出效果：

<transition name="fade">
  <div v-if="showVideo" class="video-container">
    <video ...></video>
  </div>
</transition>

过渡逻辑

data() {
  return {
    showVideo: true
  }
},
methods: {
  onVideoEnd() {
    this.showVideo = false;
    this.$emit('intro-finished');
  }
}

过渡样式

vue实现视频开场

.fade-leave-active {
  transition: opacity 1.5s;
}
.fade-leave-to {
  opacity: 0;
}

移动端适配注意事项

防止全屏问题 iOS 可能需要内联播放属性：

<video playsinline webkit-playsinline></video>

触摸事件处理 添加触摸事件跳过开场：

mounted() {
  this.$refs.videoContainer.addEventListener('touchend', this.skipIntro);
},
methods: {
  skipIntro() {
    this.$refs.introVideo.currentTime = this.$refs.introVideo.duration - 0.1;
  }
}

性能优化建议

预加载视频 在页面加载时预加载视频资源：

<link rel="preload" href="@/assets/intro.mp4" as="video">

备用方案 视频加载失败时显示备选内容：

<video @error="showFallback">
  <source src="@/assets/intro.mp4" type="video/mp4">
</video>
<div v-if="fallback" class="fallback-animation">
  <!-- 备选动画内容 -->
</div>