如何实现视频播放完成后自动启动tiny-slider轮播？

要搞定这个需求，核心思路是先禁用轮播的初始自动播放，只在视频播放完成后才启动自动轮播，同时处理轮播循环回到视频幻灯片时的逻辑，确保每次都等视频播完再继续轮播。具体步骤如下：

1. 修改轮播配置，关闭初始自动播放 #

首先调整你的tns初始化代码，把autoplay设为false，让轮播一开始不会自动切换：

const slider = tns({
  items: 1,
  controls: false,
  loop: true,
  autoplay: false, // 关闭初始自动播放
  lazyload: true,
  autoplayTimeout: 4000
});

2. 监听视频播放结束事件，启动轮播自动播放 #

获取视频元素，监听它的ended事件，当视频播放完成后，调用轮播的play()方法启动自动轮播：

// 获取目标视频元素
const video = document.getElementById('desk');

// 定义启动轮播自动播放的函数
function triggerSliderAutoplay() {
  slider.play();
}

// 监听视频播放结束事件
video.addEventListener('ended', triggerSliderAutoplay);

3. 处理轮播循环回到视频幻灯片的情况 #

因为你的轮播设置了loop: true，当轮播循环回到视频幻灯片时，需要暂停自动播放，重置视频并重新播放，确保再次等视频播完才继续轮播。这里通过监听轮播的indexChanged事件来实现：

// 监听轮播索引变化事件
slider.events.on('indexChanged', function(info) {
  // 视频所在的幻灯片是第一个（tns的索引从0开始，对应你的slide1）
  if (info.index === 0) {
    // 暂停轮播的自动播放
    slider.pause();
    // 重置视频到开头并播放
    video.currentTime = 0;
    video.play();
  }
});

逻辑说明 #

• 初始状态下轮播不会自动切换，优先播放视频；
• 视频播放完成后，触发轮播开始自动切换图片幻灯片；
• 当轮播循环回到视频幻灯片时，自动暂停轮播，重新播放视频，等待视频结束后再继续自动轮播。

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