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

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);

我面临的问题是我的按钮将在第一次点击时播放视频，当到达提示点时，视频会暂停，但是当我按下播放按钮第二次 时间视频将不会播放(即使控制台确认它已被单击两次)，但如果我单击按钮第三次 视频将再次播放有什么想法吗？

代码如下:

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、ending、loadstart 和 seeked 事件。当任何这些事件发生时，时间和回调对象将被重置。

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

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

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

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

这里有一个 JSFiddle 演示了修复:https://jsfiddle.net/zxfzjqu2/