视频.JS - 一次在确切时间触发多个事件

Video.JS - Multiple events firing on exact time once

本文关键字：时间 事件 JS 一次 视频      更新时间：2023-09-26

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

但是，在我的应用程序上，有些时候视频需要暂停，直到用户播放（或脚本，它不相关），而不是之后。

我有什么

基本上 - 以及您需要的基本信息 - 我拥有的是一系列项目，比如说item_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_range ，这样我就可以在video.currentTime()与所需的indication.time之间进行比较，而不精确，但有一些空间可以发生。

最后，当它发生时，我暂停视频（并显示指示，我告诉您我需要执行的那些操作）并设置指示的新属性，has_shown true。

每次custom_timeupdate我都会检查video.currentTime()是否在我告诉您的时间范围内，以及该indication.has_shown是否设置为false。如果是这样，则触发该过程。如果没有，则不会发生任何反应（因此，如果已经显示指示，则不会再次暂停视频）。

但是，由于我希望它在用户返回到该点时再次显示它，因此我设置了最后一次检查，因此如果video.currentTime() - 离该点有点远，则属性has_shown设置为再次false。

当然，对于我们拥有的每一indication，都会这样做。

这里有代码：

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

正如我所说，也许这不是最好的解决方案，但它是我能够想到的最好的解决方案。

感谢您抽出时间给所有试图为这个问题想出一种方法的人！

此致敬意。

相关文章：