提示点播放按钮在第二次单击时不播放视频

Question

您好，我正在使用这个小脚本为我的视频创建提示点：

(function(a){a.fn.cuepoints=function(c){var e=this[0];var d={};function b(){d=a.extend({},c)}b();e.addEventListener("playing",b);e.addEventListener("ended",b);e.addEventListener("loadstart",b);e.addEventListener("seeked",b);e.addEventListener("timeupdate",function(){for(var g in d){var f=parseFloat(g,10);g=g+"";if(f<=e.currentTime&&e.currentTime<=f+0.5){d[g]();delete d[g]}}});return this}})(jQuery);

我面临的问题是我的按钮将在 first 点击上播放视频就好了，当到达提示点时视频暂停但是当我按下播放按钮 second 时视频将无法播放（即使控制台确认它已被点击两次）但如果我点击按钮 third 时间视频将再次播放任何想法？

代码如下：

var vid = document.getElementById("video"); 
 $(document).on('click touchstart tap', '.nextSlide', function() {
      vid.play();
      console.log('Clicked');     
        });

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

        }
     });

Answer 1

这是发生了什么：

$.cuepoints() 插件跟踪对象中的所有时间和回调：{10.5: function() {...}, ...}。每当视频的timeupdate 事件触发时，插件都会查看对象，检查当前时间是否在任何回调时间的半秒范围内。如果是，则关联函数为执行并删除条目。

但是，如果有人要倒带视频，则必须有一种方法可以在指定的时间再次运行这些功能。为了处理这个问题，插件会监听playing、ended、loadstart 和seeked 事件。当任何这些事件发生时，时间和回调对象会被重置。

所以这是您的问题：当您在回调函数中运行 vid.pause() 时，视频会停止。当用户取消暂停视频时，playing 事件触发，重置所有回调。几乎立即，timeupdate 事件意识到您仍在半秒内，并再次调用您的回调函数。

事实上，它并不总是在第三次点击时播放。有时需要点击四次，因为timeupdate 事件会在半秒内持续触发。

现在，半秒范围是必要的。你don't get any guarantee of how often the timeupdate is going to fire，所以如果你没有类似的东西，你很有可能完全跳过回调。

我的解决方案是停止收听playing 事件。最初调用插件时会设置时间/事件对象，因此第一次播放工作正常。当用户使用仪表移动到不同的时间时，seeked 事件将触发。当用户到达终点并决定重播时，ended 事件将已经触发。我不认为playing 事件是必要的。

这是一个演示修复的 JSFiddle：https://jsfiddle.net/zxfzjqu2/