vue实现视频开场

使用 Vue 实现视频开场效果

在 Vue 中实现视频开场效果，可以通过结合视频播放器和动画效果来完成。以下是一种常见的实现方法：

安装视频播放器库（如 vue-video-player）

npm install vue-video-player video.js

在 Vue 组件中引入并使用视频播放器

<template>
  <div class="video-container">
    <video-player 
      ref="videoPlayer"
      :options="playerOptions"
      @ready="onPlayerReady"
      @ended="onPlayerEnded"
    />
  </div>
</template>

<script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'

export default {
  components: {
    videoPlayer
  },
  data() {
    return {
      playerOptions: {
        autoplay: true,
        controls: false,
        loop: false,
        muted: true,
        sources: [{
          type: 'video/mp4',
          src: 'path/to/your/video.mp4'
        }]
      }
    }
  },
  methods: {
    onPlayerReady() {
      // 视频准备就绪
    },
    onPlayerEnded() {
      // 视频播放结束后的处理
      this.$emit('video-ended')
    }
  }
}
</script>

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

添加过渡动画效果 在视频播放结束后，可以添加淡出动画：

methods: {
  onPlayerEnded() {
    const videoEl = this.$refs.videoPlayer.$el
    videoEl.style.transition = 'opacity 1s ease-out'
    videoEl.style.opacity = '0'

    setTimeout(() => {
      this.$emit('video-ended')
    }, 1000)
  }
}

在父组件中使用

<template>
  <div>
    <VideoIntro v-if="showIntro" @video-ended="handleVideoEnd" />
    <MainContent v-else />
  </div>
</template>

<script>
import VideoIntro from './VideoIntro.vue'
import MainContent from './MainContent.vue'

export default {
  components: {
    VideoIntro,
    MainContent
  },
  data() {
    return {
      showIntro: true
    }
  },
  methods: {
    handleVideoEnd() {
      this.showIntro = false
    }
  }
}
</script>

优化视频开场体验

预加载视频 在 mounted 钩子中预加载视频资源：

mounted() {
  const video = new Video()
  video.src = 'path/to/your/video.mp4'
  video.load()
}

添加跳过按钮

<template>
  <div class="video-container">
    <button class="skip-btn" @click="skipIntro">跳过</button>
    <!-- 视频播放器 -->
  </div>
</template>

<script>
methods: {
  skipIntro() {
    this.$refs.videoPlayer.player.pause()
    this.onPlayerEnded()
  }
}
</script>

<style>
.skip-btn {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 10000;
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}
</style>

移动端适配注意事项

全屏播放处理 iOS 设备需要特殊处理才能自动播放：

playerOptions: {
  playsinline: true,
  iosNative: true
}

性能优化 对于较长的开场视频，考虑：

• 使用压缩后的视频格式（如 WebM）
• 降低视频分辨率
• 添加加载指示器

以上实现方式可以根据具体需求进行调整，如添加字幕、音效控制等增强功能。