vue实现轮播视频

Vue 实现轮播视频的方法

使用第三方库（推荐）

安装 vue-awesome-swiper 或 swiper 库，它们支持视频嵌入和轮播功能。以下是基于 vue-awesome-swiper 的实现：

<template>
  <swiper :options="swiperOptions">
    <swiper-slide v-for="(video, index) in videos" :key="index">
      <video controls :poster="video.poster" class="video-slide">
        <source :src="video.src" type="video/mp4">
      </video>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';

export default {
  components: { Swiper, SwiperSlide },
  data() {
    return {
      videos: [
        { src: '/path/to/video1.mp4', poster: '/path/to/poster1.jpg' },
        { src: '/path/to/video2.mp4', poster: '/path/to/poster2.jpg' }
      ],
      swiperOptions: {
        pagination: { el: '.swiper-pagination' },
        loop: true,
        autoplay: { delay: 3000, disableOnInteraction: false }
      }
    };
  }
};
</script>

<style scoped>
.video-slide {
  width: 100%;
  height: auto;
}
</style>

自定义实现

通过 Vue 的 v-for 和动态样式控制，手动切换视频：

<template>
  <div class="video-carousel">
    <div class="video-container">
      <video 
        v-for="(video, index) in videos" 
        :key="index" 
        :ref="'video' + index"
        :class="{ active: currentIndex === index }"
        controls
        :poster="video.poster"
      >
        <source :src="video.src" type="video/mp4">
      </video>
    </div>
    <button @click="prev">上一页</button>
    <button @click="next">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videos: [
        { src: '/path/to/video1.mp4', poster: '/path/to/poster1.jpg' },
        { src: '/path/to/video2.mp4', poster: '/path/to/poster2.jpg' }
      ],
      currentIndex: 0
    };
  },
  methods: {
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.videos.length;
    },
    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.videos.length) % this.videos.length;
    }
  }
};
</script>

<style scoped>
.video-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
video {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s;
}
video.active {
  opacity: 1;
}
</style>

关键点

• 视频预加载：通过 poster 属性设置封面图，避免空白等待。
• 自动播放：在 swiperOptions 中配置 autoplay，或通过 setInterval 控制自定义轮播。
• 交互暂停：监听 mouseenter 和 mouseleave 事件暂停/恢复轮播。

注意事项

• 移动端需添加 playsinline 属性避免全屏播放。
• 视频格式优先选择兼容性强的 mp4，并提供备用格式（如 WebM）。