Vuetify 3轮播组件能否使用视频替代图片作为轮播项？

Vuetify 3的轮播组件可以使用视频作为轮播项，但直接通过src属性传入视频文件路径的方式不支持——因为v-carousel-item的src属性默认仅处理图片资源，所以你当前的代码无法正常显示视频。

正确实现方式 #

需要在v-carousel-item内部自定义内容，嵌入原生<video>标签来加载和播放视频，示例代码如下：

<v-carousel hide-delimiters hide-delimiter-background show-arrows="hover" cycle>
  <v-carousel-item src="/img/test1.jpg"></v-carousel-item>
  <v-carousel-item :height="500">
    <video 
      width="100%" 
      height="100%" 
      autoplay 
      muted 
      loop
      playsinline
    >
      <source src="/img/testmovie.mp4" type="video/mp4">
      你的浏览器不支持视频播放
    </video>
  </v-carousel-item>
</v-carousel>

关键属性说明 #

• autoplay：轮播切换到视频项时自动播放视频
• muted：浏览器普遍要求视频静音才能自动播放，这是必填设置
• loop：让视频循环播放，适配轮播的循环特性
• playsinline：避免移动设备上视频自动全屏播放
• width="100%"和height="100%"：让视频填满轮播项容器，保持布局一致

进阶优化（可选） #

如果需要在轮播切换时精准控制视频的播放/暂停状态，可以监听轮播的change事件：

<v-carousel 
  hide-delimiters 
  hide-delimiter-background 
  show-arrows="hover" 
  cycle
  @change="handleCarouselChange"
>
  <v-carousel-item src="/img/test1.jpg"></v-carousel-item>
  <v-carousel-item :height="500">
    <video 
      ref="carouselVideo"
      width="100%" 
      height="100%" 
      muted 
      loop
      playsinline
    >
      <source src="/img/testmovie.mp4" type="video/mp4">
      你的浏览器不支持视频播放
    </video>
  </v-carousel-item>
</v-carousel>

<script setup>
import { ref } from 'vue'

const carouselVideo = ref(null)

const handleCarouselChange = (newIndex) => {
  if (carouselVideo.value) {
    // 假设视频项是第2个（索引为1）
    newIndex === 1 ? carouselVideo.value.play() : carouselVideo.value.pause()
  }
}
</script>

注意事项 #

• 确保视频文件路径正确，放在public文件夹下的路径规则和图片一致
• 优先使用MP4（H.264编码）格式，兼容性覆盖绝大多数主流浏览器

内容的提问来源于stack exchange，提问作者Code-Slayer