实现Inspiro Slider两幻灯片间视频背景连续循环播放

你遇到的问题根源是每个幻灯片都单独初始化了视频实例，切换时旧实例被销毁、新实例重新加载，导致视频从头播放。正确的思路是把视频设为滑块的全局背景，仅加载一次，幻灯片只负责展示文本内容。

修改后的HTML结构 #

<!-- Inspiro Slider -->
<div id="slider" class="inspiro-slider slider-fullscreen dots-creative" data-fade="true">
    <!-- 全局背景视频 -->
    <video class="slider-bg-video" autoplay muted loop playsinline>
        <source src="video/homepage.mp4" type="video/mp4">
    </video>
    <!-- Slide 1 -->
    <div class="slide">
        <div class="bg-overlay"></div>
        <div class="container">
            <div class="slide-captions text-start text-light">
                <h2>HEADING FOR SLIDE ONE</h2>
                <p class="text-small">
                    Paragraph text for slide 1
                </p>
            </div>
        </div>
    </div>
    <!-- end: Slide 1 -->
    
    <!-- Slide 2 -->
    <div class="slide">
        <div class="bg-overlay"></div>
        <div class="container">
             <div class="slide-captions text-start text-light">
                <h2>HEADING FOR SLIDE TWO</h2>
                <p class="text-small">
                    Paragraph text for slide 2
                </p>
            </div>
        </div>
    </div>
    <!-- end: Slide 2 -->
</div>
<!--end: Inspiro Slider -->

配套CSS样式 #

#slider {
    position: relative;
    overflow: hidden;
}

.slider-bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: -1; /* 让视频处于所有幻灯片内容下方 */
    object-fit: cover; /* 保持视频比例铺满容器 */
}

/* 确保幻灯片遮罩和文本层级正常 */
.slide .bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.slide .container {
    position: relative;
    z-index: 1;
}

核心说明 #

• 视频元素直接放入滑块容器，通过autoplay muted loop playsinline属性实现自动循环播放，同时适配移动端播放规则。
• 用CSS绝对定位+object-fit: cover让视频铺满滑块容器，z-index: -1确保视频不会遮挡幻灯片内容。
• 移除每个幻灯片的data-bg-video属性，避免插件重复初始化视频实例。
• 保留原有的bg-overlay和文本容器，调整层级保证文本正常显示在视频和遮罩层上方。

修改后切换幻灯片时，视频会持续循环播放，不会出现重新加载的问题。

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