如何在数组指定的每个时间点触发播放广告？

核心需求 #

需要在adStartTimes数组中的每个时间点（比如5秒、10秒、15秒）暂停原视频、播放广告，广告结束后恢复原视频播放。当前代码仅处理了数组第一个元素，需修改为匹配数组中任意时间值。

解决方案 #

关键修改点 #

1. 替换单个元素判断逻辑，用adStartTimes.includes(Math.round(currentTime))检查当前时间是否在广告触发列表内
2. 新增去重触发机制：避免广告播放期间重复触发（比如currentTime停留在广告时间点时多次执行）

修改后的完整代码 #

let adStream: string;
let currentTime = 0;
let showAd: boolean = false;
let adStartTimes: Array<number> = [5, 10, 15];
let storedStreamTime: number;
let storedProgress: number;
let hasTriggeredAd = new Set<number>(); // 记录已触发的广告时间，防止重复执行

$: {
    const roundedTime = Math.round(currentTime);
    // 满足三个条件才触发：时间在列表内、未触发过该时间点、当前未播放广告
    if (adStartTimes.includes(roundedTime) && !hasTriggeredAd.has(roundedTime) && !showAd) {
        videoElement && videoElement.pause();
        storedStreamTime = roundedTime;
        storedProgress = Math.round((currentTime / duration!) * 100);
        adStream = '广告播放中';
        showAd = true;
        hasTriggeredAd.add(roundedTime); // 标记该时间点已触发
    }
}

$: if (showAd) {
    playDummyAd();
}

const playDummyAd = () => {
    setTimeout(() => {
        console.log('广告播放完成');
        showAd = false;

        // 恢复原视频时跳过当前广告时间点，避免重复触发
        currentTime = storedStreamTime + 1;
        progress = storedProgress + 1;

        videoElement.play();
    }, 5000);
};

模板部分 #

{#if showAd}
    <h1 class="p-4 text-white bg-red-500">{adStream}</h1>
{/if}

逻辑说明 #

• 用Set存储已触发的广告时间，保证每个时间点只触发一次广告
• 增加!showAd判断，避免广告播放过程中因currentTime未更新而重复执行触发逻辑
• 广告结束后将currentTime设为storedStreamTime + 1，跳过当前广告时间点，防止恢复播放后再次触发相同广告

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