Video.JS - 多个事件在准确时间触发一次
Video.JS - Multiple events firing on exact time once
我正在开发一个包含视频元素的 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 之间进行比较，但不准确，但会发生一些 space .
最后，当它发生时，我暂停视频（并显示指示，我告诉过你我需要做的那些动作）并设置一个新的 属性 指示，has_shown 到true。
在每个 custom_timeupdate 我检查 video.currentTime() 是否在我告诉你的那个 space 时间内，以及 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
}
})
})
}
正如我所说，也许这不是最好的解决方案，但它是我能想到的最好的解决方案。
感谢您抽出宝贵时间与所有试图想出解决此问题方法的人交流！
此致。
我正在开发一个包含视频元素的 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 之间进行比较，但不准确，但会发生一些 space .
最后，当它发生时，我暂停视频（并显示指示，我告诉过你我需要做的那些动作）并设置一个新的 属性 指示，has_shown 到true。
在每个 custom_timeupdate 我检查 video.currentTime() 是否在我告诉你的那个 space 时间内，以及 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
}
})
})
}
正如我所说，也许这不是最好的解决方案，但它是我能想到的最好的解决方案。
感谢您抽出宝贵时间与所有试图想出解决此问题方法的人交流！
此致。