本文详解如何在 Splide.js 中集成 HTML5 视频，通过监听 move 事件重置视频播放进度至开头，确保每次切换幻灯片时视频从头开始播放，彻底解决预览图与视频进度不匹配的问题。
本文详解如何在 splide.js 中集成 html5 视频，通过监听 `move` 事件重置视频播放进度至开头，确保每次切换幻灯片时视频从头开始播放，彻底解决预览图与视频进度不匹配的问题。
Splide.js 官方提供的 splide-extension-video 插件支持 HTML5 <video> 元素的无缝集成，但默认行为下，当轮播自动切换到下一帧时，当前视频会暂停并保留上一时刻的播放位置（如第 3.2 秒），导致后续再次显示该视频时直接从中断处继续播放——这与首帧缩略图（poster）视觉逻辑冲突，造成体验断裂。
要强制视频每次进入可视区域时都从头开始播放，核心方案是：在轮播触发 move 事件（即幻灯片即将切换）时，遍历所有已挂载的 <video> 元素，将其 currentTime 属性重置为 0。该操作需在 splide.mount() 之前注册事件监听器，确保生效时机早于视频状态更新。
以下是完整、可直接运行的配置示例：
<!-- 引入依赖 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css"> <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-video@0.7.1/dist/css/splide-extension-video.min.css"> <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-video@0.7.1/dist/js/splide-extension-video.min.js"></script>
const splide = new Splide('.splide', {
width: '100%',
arrows: false,
type: 'loop',
autoplay: true,
interval: 4000,
perPage: 1,
speed: 2000,
video: {
autoplay: true,
loop: false, // 注意：设为 false，由 JS 控制重播逻辑；若开启原生 loop，可能干扰 currentTime 重置
mute: true,
hideControls: true,
disableOverlayUI: true,
playerOptions: {
htmlVideo: {}
}
}
});
// 关键修复：每次切换前重置所有视频时间点
splide.on('move', () => {
document.querySelectorAll('.splide__slide video').forEach(video => {
video.currentTime = 0;
});
});
// 必须在 mount 前注册事件，且需挂载 Extensions
splide.mount(window.splide.Extensions);HTML 结构需为每个 .splide__slide 添加 data-splide-html-video 属性指向 MP4/WebM 视频地址，并可选配 <img> 作为占位封面（将被插件自动替换为 <video>）：
立即学习“前端免费学习笔记（深入）”；
<section class="splide" aria-label="Video Carousel">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide" data-splide-html-video="https://example.com/video1.mp4">
<img src="https://picsum.photos/800/400?random=1" alt="Video 1 preview">
</li>
<li class="splide__slide" data-splide-html-video="https://example.com/video2.mp4">
<img src="https://picsum.photos/800/400?random=2" alt="Video 2 preview">
</li>
</ul>
</div>
</section>⚠️ 注意事项：
- loop: false 是推荐设置，避免浏览器原生循环干扰手动重置逻辑；
- video.currentTime = 0 必须在 move 事件中执行（而非 moved），以确保在新 slide 渲染前完成重置；
- 若使用懒加载或动态插入 slide，需额外调用 splide.refresh() 并重新绑定事件；
- 确保视频资源支持 CORS（尤其跨域 MP4），否则可能因策略限制无法播放；
- 首次加载时，<img> 会被插件自动替换为 <video>，因此 CSS 中无需单独处理图片样式，但可添加通用视频尺寸约束：
.splide__slide video {
width: 100%;
height: auto;
display: block;
}通过上述配置，Splide.js 轮播中的 HTML5 视频将严格遵循“每帧独立播放”原则：自动轮播、静音启动、无控件干扰，且每次展示均从第 0 秒开始，完美对齐视觉预览图，显著提升专业内容轮播的连贯性与用户体验。
