使用Cuepoints时播放按钮二次点击无法播放视频问题求助

看起来你的问题出在cuepoints脚本的事件处理逻辑上，具体是timeupdate事件的触发时机和cuepoint的重置机制冲突了：

当你第二次点击.nextSlide按钮时：

1. 调用vid.play()后，视频触发playing事件；
2. 这个事件会执行b()函数，把你配置的cuepoints（包括10.5秒的暂停回调）重新加载到d对象里；
3. 紧接着timeupdate事件触发，此时视频的currentTime还停留在10.5-11秒的区间（因为上次暂停在这里），所以立刻触发暂停回调，视频刚启动就被暂停，看起来像是点击没效果；
4. 第三次点击时，要么你手动调整了进度，要么视频在第二次点击的瞬间前进了一点点，离开了这个区间，所以不会触发暂停，视频正常播放。

方案一：修改cuepoints脚本，避免重复触发同一个cuepoint #

我们可以添加一个集合来跟踪已经触发过的cuepoint，确保每个cuepoint在一次播放周期内只触发一次：

(function(a){
    a.fn.cuepoints=function(c){
        var e=this[0];
        var d={};
        // 用Set记录已触发的cuepoint时间点
        var triggeredCuepoints = new Set();
        
        function resetCuepoints(){
            d=a.extend({},c);
            triggeredCuepoints.clear(); // 播放状态重置时清空已触发记录
        }
        resetCuepoints();
        
        // 绑定重置事件
        e.addEventListener("playing", resetCuepoints);
        e.addEventListener("ended", resetCuepoints);
        e.addEventListener("loadstart", resetCuepoints);
        e.addEventListener("seeked", resetCuepoints);
        
        e.addEventListener("timeupdate",function(){
            for(var cueTime in d){
                var time = parseFloat(cueTime,10);
                // 仅当当前时间在区间内，且该cuepoint未被触发过才执行
                if(time <= e.currentTime && e.currentTime <= time+0.5 && !triggeredCuepoints.has(cueTime)){
                    d[cueTime]();
                    triggeredCuepoints.add(cueTime);
                }
            }
        });
        return this
    }
})(jQuery);

这个修改的好处是：

• 同一个播放周期内，每个cuepoint只会触发一次；
• 如果用户拖动进度条回到之前的cuepoint区间，依然可以重新触发回调（因为seeked事件会重置triggeredCuepoints）。

方案二：在播放前主动避开问题区间 #

如果不想修改cuepoints核心脚本，也可以在点击播放时，检查当前时间是否在导致暂停的区间内，若在则稍微调整进度：

var vid = document.getElementById("video"); 

$(document).on('click touchstart tap', '.nextSlide', function() {
    // 如果当前时间处于10.5-11秒的暂停区间，直接跳到区间外
    if(vid.currentTime >= 10.5 && vid.currentTime <= 11) {
        vid.currentTime = 11.01;
    }
    vid.play();
    console.log('Clicked'); 
}); 

$('#video').cuepoints({ 
    10.5: function () { vid.pause(); }, 
    15: function() { } 
});

这个方法更直接，从根源上避免了刚播放就触发暂停回调的情况。

内容的提问来源于stack exchange，提问作者ui-unicorn.co.uk