Javascript Video.JS-多个事件在精确时间触发一次

我正在开发一个web应用程序，其中有一个视频元素。这是通过脚本控制的，我对此有很好的经验

但是，在我的应用程序中，有一些点需要暂停视频，直到用户播放（或者通过脚本，这与此无关），但不是在播放之后

我所拥有的 基本上-以及您需要的基本信息-我拥有的是一个项目数组，比如说

item\u array

，其中包含对象。每个对象都有一个

id

、一个

media

对象和它的一些信息，包括一个

src

、一个

indications

数组，这将是暂停时间对象。诸如此类：

var items_array = [
    {
        id: 1234,
        media: {
            id: 2345,
            src: 'video_source.mp4',
            duration: 302.56
        },
        indications: [
            {
                id: 1, 
                time: 65.380
            },
            {
                id: 2,
                time: 89.238
            },
            {
                id: 3,
                time: 123.765
            }
        ]
    }
]

当然，我得到了

video

变量，它存储了VideoJS引用，并且在整个代码中都可以作为一个全局变量访问（也许您知道这一点会很有用）

我需要什么 基本上，我需要能够加载视频源，并告诉脚本视频必须在1:05.380、1:29.238和2:03.765处暂停

暂停后，用户可以再次播放视频，并且在下一次达到标记之前，视频不会再次暂停（至少通过脚本）

然后，用户可以指定要加载的新视频及其新暂停点，因此应删除旧暂停点并设置新暂停点

此外，除了暂停视频（如显示消息等）外，还需要执行其他操作。但是你不必知道这些，只要我能在每个停顿点写下一些动作就行了

我试过的 嗯，我一直在玩

timeupdate

。第一个问题是，这只会偶尔触发，因此

video.currentTime（）==NN.NNN

并不总是有效

脚本

video.currentTime（）>=NN.NNN

也不可能，因为用户必须能够进一步播放暂停时间（是的，一旦到达，事件可以被触发，但是如果用户在时间线上跳过它，视频就不能暂停）

因此，如果暂停时间为1:05，并且用户从0:45跳到1:25，则不得触发设置为1:05的暂停时间，因此视频不得暂停-因此，之前写入的行无法按我所希望的方式工作

提前感谢大家的时间和帮助如果您需要任何进一步的信息，请询问我，我将尽快提交

---

致以最诚挚的问候。

最后，我想出了一个可能的解决方案。当然，这不是最好的性能，但它做到了它的本意

我把它写在这里，也许有人会发现它很有用

解决方案 我要做的是在每次触发

timeupdate

事件时触发一个自定义事件，这样我就可以删除附加到此自定义事件的所有操作，而不会破坏VideoJS默认事件操作

然后，我设置了一个

time\u范围

，这样我可以在

video.currentTime（）

和所需的

指示之间进行比较。时间

不精确，但有一定的空间

最后，当它发生时，我暂停视频（并显示指示，我告诉你我需要做的那些动作），并设置指示的新属性，

has_show

to

true

在每次

custom\u timeupdate

时，我都会检查

video.currentTime（）

是否在我告诉您的时间范围内，以及显示的

指示是否设置为
false
。如果是这样，该过程将触发。如果没有，则不会发生任何事情（因此，如果已经显示指示，则不会再次暂停视频）

但是，由于我想让它在用户返回到该点时再次显示，我设置了最后一个检查，因此如果
video.currentTime（）
距离该点有一点远，则属性
has\u show
再次设置为
false

当然，对于我们的每个
指示
，都会这样做

这里有代码：

var time_range = 0.125

video.on("timeupdate", function(){
    video.trigger("indications_timeupdate")
})

function load_indications(indications){
    /* 
        Function actions ...
    */

    // If the video is defined, as we are loading them new, we set off old Indication timers
    if(video !== undefined) video.off("indications_timeupdate")

    $.each(indications, function(i, ind){
        video.on("indications_timeupdate", function(){
            if(video.currentTime() >= ind.time - time_range && video.currentTime() <= ind.time + time_range && !ind.has_shown){
                video.pause()
                ind.has_shown = true
            }else if(video.currentTime() >= ind.time + time_range || video.currentTime() <= ind.time - time_range){
                ind.has_shown = false
            }
        })
    })
}

var时间范围=0.125
video.on（“时间更新”，函数（）{
视频触发（“指示\时间更新”）
})
功能负载指示（指示）{
/* 
函数操作。。。
*/
//如果视频被定义，当我们加载新的视频时，我们会启动旧的指示计时器
如果（视频！==未定义）video.off（“指示\u时间更新”）
$。每个（指示、功能（i、ind）{
video.on（“指示\时间更新”，函数（）{
如果（video.currentTime（）>=ind.time-time_范围&&video.currentTime（）=ind.time+time_范围| video.currentTime（）
time\u range
被设置为这个值，因为根据我的研究，浏览器在HTML5视频上等待触发
timeupdate
事件的最长时间对于Chrome和Safari来说是250ms，所以它是一个前后的窗口，应该是它的一半：
0.125
。