如何在Splidejs滑块中配置splide-extension-video实现视频从头播放

方法一：强制视频每次切换后从头播放 #

你可以通过监听Splide的active事件，在幻灯片切换到当前状态时，重置视频播放进度到开头并触发播放，完美匹配预览图的初始状态。

修改代码添加事件监听即可：

const splide = new Splide( '.splide', {
  width: '100%',
  arrows: false,
  type : 'loop',
  autoplay: true,
  interval: 4000,
  perPage : 1,
  speed : 2000,
  video: {
    autoplay: true,
    loop : true,
    mute : true,
    hideControls: true,
    disableOverlayUI: true,
    playerOptions: { htmlVideo: {} },
  }
} );

// 幻灯片激活时重置视频进度
splide.on( 'active', function( Slide ) {
  const video = Slide.slide.querySelector('video');
  if (video) {
    video.currentTime = 0; // 强制回到开头
    video.play().catch(err => console.log(err)); // 触发播放（兼容部分浏览器限制）
  }
} );

splide.mount(window.splide.Extensions);

方法二：禁用视频预览图 #

如果不需要预览图，可通过以下方式彻底移除：

1. 配置项关闭默认封面：在video选项中添加cover: false：

video: {
  autoplay: true,
  loop : true,
  mute : true,
  hideControls: true,
  disableOverlayUI: true,
  cover: false, // 关闭默认预览图
  playerOptions: { htmlVideo: {} },
}

2. 清理HTML属性：如果你的幻灯片标签里写了data-splide-video-cover指定预览图，直接删除该属性即可。
3. CSS强制隐藏：如果还有残留样式，用CSS覆盖：

.splide__slide .splide__video__cover {
  display: none !important;
}

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