NUXT SSR下vue-slick-carousel视频轮播仅播音频无画面卡顿问题求助

问题根因 #

• vue-slick-carousel开启infinite: true配置时，为了实现无限滚动效果会克隆视口外的滑块节点，你通过ID选择器获取到的视频元素大概率是不可见的克隆节点，而非视口内真实渲染的节点，播放时就会出现只有音频没有画面的问题。
• 你使用了固定200ms的setTimeout延时操作视频，轮播切换动画未完成时执行播放逻辑会导致视频渲染时序错乱，出现卡顿现象。
• 轮播项的key使用了索引拼接，无限滚动场景下索引会被复用，key不稳定会导致节点重复渲染，打乱视频元素的状态。

修复方案 #

第一步：调整轮播基础配置 #

优先关闭无限滚动（如果业务允许），避免节点克隆问题，同时调整渲染相关配置避免视频渲染异常：

slickOptions: {
  initialSlide: 0,
  slidesToShow: 5,
  slidesToScroll: 1,
  centerMode: true,
  arrows: false,
  infinite: false, // 关闭无限滚动，禁用节点克隆
  swipe: false,
  autoplay: false,
  useTransform: false, // 关闭transform位移，避免硬件加速导致的视频渲染异常
}

第二步：替换节点获取方式，优化播放逻辑 #

不要用ID选择器获取视频元素，改用ref绑定真实的视频节点，同时去掉无意义的延时逻辑：

<template>
<vue-slick-carousel v-bind="slickOptions">
  <div
    v-for="(item, index) in someArray"
    :key="`${item.bizId}-carousel`" <!-- 用业务唯一ID作为key，不要用索引 -->
  >
    <video
      :src="item.src"
      playsinline
      :ref="el => { if(el) videoRefs[index] = el }" <!-- 用ref数组存储真实视频节点 -->
      @click="(e) => changeAutoplayIndex(index, e)"
    ></video>
  </div>
</vue-slick-carousel>
</template>
        
<script>
export default {
  data() {
    return {
      videoRefs: [], // 新增视频ref存储数组
      autoplayIndex: null,
      slickOptions: {
        // 如上调整后的配置
      }
    }
  },
  methods: {
    changeAutoplayIndex(index, e) {
      const lastAutoPlayVideo = this.videoRefs[this.autoplayIndex]
      const currentVideo = this.videoRefs[index]
      if(!currentVideo) return

      if (this.autoplayIndex !== null && this.autoplayIndex === index) {
        lastAutoPlayVideo.pause()
      } else if (this.autoplayIndex !== null && lastAutoPlayVideo) {
        lastAutoPlayVideo.pause()
        currentVideo.currentTime = 0 
        currentVideo.play()
      } else {
        currentVideo.currentTime = 0
        currentVideo.play()
      }
      this.autoplayIndex = index
    }
  }
}
</script>

如果业务必须保留无限滚动功能，需要监听轮播的afterChange事件，等切换动画完全结束后再操作视频，同时先判断节点可见性再执行播放逻辑。

替代组件库推荐 #

• NUXT2/Vue2项目可以用vue-awesome-swiper，支持多滑块展示、居中模式，节点逻辑透明没有隐藏克隆逻辑，自定义灵活度高，适配SSR场景。
• NUXT3/Vue3项目可以直接用swiper原生包，对视频渲染的兼容性更好，多滑块配置更灵活，官方支持SSR渲染。

内容的提问来源于stack exchange，提问作者anmol jain