CN117714806A - 音视频播放中触发弹窗事件的方法及装置 - Google Patents

Abstract

本公开提供了一种音视频播放中触发弹窗事件的方法，可以应用于互联网技术领域和金融技术领域。该方法包括：响应于音视频的播放位置发生变化，获取音视频的播放时间值；对音视频的时间轴进行切分，得到切分点数目和切分时间间隔；根据音视频的播放时间值和切分时间间隔，得到初始进度数组中与音视频的播放时间值对应的位置，其中，初始进度数组是根据切分点数目和初始元素值得到的；根据初始进度数组中与音视频的播放时间值对应的位置，更新初始进度数组中元素的元素值，得到新的进度数组；在新的进度数组满足触发条件的情况下，触发弹窗事件。本公开还提供了一种音视频播放中触发弹窗事件的装置、设备、存储介质和程序产品。

Description

音视频播放中触发弹窗事件的方法及装置

技术领域

本公开涉及互联网技术领域和金融技术领域，尤其涉及一种音视频播放中触发弹窗事件的方法、装置、设备、介质和程序产品。

背景技术

为了在视频播放过程中丰富各种互动交流或者防挂机验证等，需要在视频播放中新增事件，如，视频播放中可以根据视频播放情况弹出广告等窗口，给单一视频带来更多的体验和功能。

但相关技术中，针对在视频播放中新增事件，存在操作复杂以及触发新增事件的时刻不准确的问题。

发明内容

鉴于上述问题，本公开提供了一种音视频播放中触发弹窗事件的方法、装置、设备、介质和程序产品。

本公开的一个方面，提供了一种音视频播放中触发弹窗事件的方法，包括：

响应于音视频的播放位置发生变化，获取上述音视频的播放时间值；

对上述音视频的时间轴进行切分，得到切分点数目和切分时间间隔；

根据上述音视频的播放时间值和上述切分时间间隔，得到初始进度数组中与上述音视频的播放时间值对应的位置，其中，上述初始进度数组是根据上述切分点数目和初始元素值得到的；

根据上述初始进度数组中与上述音视频的播放时间值对应的位置，更新上述初始进度数组中元素的元素值，得到新的进度数组；

在上述新的进度数组满足触发条件的情况下，触发弹窗事件。

根据本公开的实施例，上述初始进度数组是根据上述切分点数目和初始元素值得到的，包括：

根据上述切分点数目，确定上述初始进度数组的元素数目；

将上述初始进度数组中的每个元素的元素值赋值为上述初始元素值，得到上述初始进度数组。

根据本公开的实施例，上述根据上述初始进度数组中与上述音视频的播放时间值对应的位置，更新上述初始进度数组中元素的元素值，得到新的进度数组，包括：

根据上述初始进度数组中与上述音视频的播放时间值对应的位置，将上述初始进度数组中目标元素的元素值重新赋值，得到上述新的进度数组，其中，上述目标元素是由上述初始进度数组中与上述音视频的播放时间值对应的位置确定的。

根据本公开的实施例，上述在上述新的进度数组满足触发条件的情况下，触发弹窗事件，包括：

根据上述新的进度数组中的变更元素数目和元素总数目，计算得到上述音视频的播放进度，其中，上述变更元素表征元素值为非初始元素值的元素；以及

在上述音视频的播放进度满足第一触发条件的情况下，触发上述弹窗事件，其中，上述触发条件包括上述第一触发条件。

根据本公开的实施例，上述音视频播放中触发弹窗事件的方法还包括：

根据上述新的进度数组中的上述变更元素数目和上述切分时间间隔，计算得到当前观看时长；以及

在上述当前观看时长满足第二触发条件的情况下，触发上述弹窗事件，其中，上述触发条件包括上述第二触发条件。

根据本公开的实施例，在计算上述音视频的播放进度或上述当前观看时长之前，还包括：

在上述音视频的播放时间值满足进度提交条件的情况下，提交上述新的进度数组。

根据本公开的实施例，上述音视频播放中触发弹窗事件的方法还包括：

确定上述音视频的时间轴中与上述目标元素对应的目标切分点；

将上述音视频的时间轴中位于上述目标切分点之前的时间轴标记颜色，得到颜色标记后的时间轴。

本公开的另一个方面提供了一种音视频播放中触发弹窗事件的装置，包括：获取模块、切分模块、获得模块、更新模块和触发模块。其中，获取模块，用于响应于音视频的播放位置发生变化，获取上述音视频的播放时间值。切分模块，用于对上述音视频的时间轴进行切分，得到切分点数目和切分时间间隔。获得模块，用于根据上述音视频的播放时间值和上述切分时间间隔，得到初始进度数组中与上述音视频的播放时间值对应的位置，其中，上述初始进度数组是根据上述切分点数目和初始元素值得到的。更新模块，用于根据上述初始进度数组中与上述音视频的播放时间值对应的位置，更新上述初始进度数组中元素的元素值，得到新的进度数组。触发模块，用于在上述新的进度数组满足触发条件的情况下，触发弹窗事件。

本公开的另一个方面提供了一种电子设备，包括：一个或多个处理器；存储器，用于存储一个或多个程序，其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得一个或多个处理器执行上述音视频播放中触发弹窗事件的方法。

本公开的另一个方面还提供了一种计算机可读存储介质，其上存储有可执行指令，该指令被处理器执行时使处理器执行上述音视频播放中触发弹窗事件的方法。

本公开的另一个方面还提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述音视频播放中触发弹窗事件的方法。

根据本公开提供的音视频播放中触发弹窗事件的方法、装置、设备、介质和程序产品，在音视频的播放位置发生变化的情况下，可以获取音视频的播放时间值，并基于对音视频的时间轴进行切分得到的切分时间间隔，得到初始进度数组中与音视频的播放时间值对应的位置，从而可以更新初始进度数组中元素的元素值，得到新的进度数组，以记录音视频的播放情况，并在新的进度数组满足触发条件的情况下，触发弹窗事件，由于判断新的进度数组是否满足触发条件，使得能够在准确时刻触发弹窗事件，并且，通过简单操作即可实现音视频播放过程中的交互。

附图说明

通过以下参照附图对本公开实施例的描述，本公开的上述内容以及其他目的、特征和优点将更为清楚，在附图中：

图1示意性示出了根据本公开实施例的音视频播放中触发弹窗事件的方法的应用场景图；

图2示意性示出了根据本公开实施例的音视频播放中触发弹窗事件的方法的流程图；

图3示意性示出了根据本公开实施例的弹出互动问答窗口的示意图；

图4示意性示出了根据本公开实施例的用于实现音视频播放中触发弹窗事件的流程图；

图5示意性示出了根据本公开实施例的音视频播放中触发弹窗事件的装置的结构框图；以及

图6示意性示出了根据本公开实施例的适于实现音视频播放中触发弹窗事件的方法的电子设备的方框图。

具体实施方式

以下，将参照附图来描述本公开的实施例。但是应该理解，这些描述只是示例性的，而并非要限制本公开的范围。在下面的详细描述中，为便于解释，阐述了许多具体的细节以提供对本公开实施例的全面理解。然而，明显地，一个或多个实施例在没有这些具体细节的情况下也可以被实施。此外，在以下说明中，省略了对公知结构和技术的描述，以避免不必要地混淆本公开的概念。

在此使用的术语仅仅是为了描述具体实施例，而并非意在限制本公开。在此使用的术语“包括”、“包含”等表明了所述特征、步骤、操作和/或部件的存在，但是并不排除存在或添加一个或多个其他特征、步骤、操作或部件。

在此使用的所有术语(包括技术和科学术语)具有本领域技术人员通常所理解的含义，除非另外定义。应注意，这里使用的术语应解释为具有与本说明书的上下文相一致的含义，而不应以理想化或过于刻板的方式来解释。

在使用类似于“A、B和C等中至少一个”这样的表述的情况下，一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如，“具有A、B和C中至少一个的系统”应包括但不限于单独具有A、单独具有B、单独具有C、具有A和B、具有A和C、具有B和C、和/或具有A、B、C的系统等)。

在本公开的技术方案中，所涉及的数据(如包括但不限于用户个人信息)的收集、存储、使用、加工、传输、提供、公开和应用等处理，均符合相关法律法规的规定，采取了必要保密措施，且不违背公序良俗。

在本公开的技术方案中，在获取或采集用户个人信息之前，均获取了用户的授权或同意。

在实现本公开的过程中发现，目前已知的视频播放中新增事件的方法可以包括：对原视频进行编辑，在特定的关键点新增事件或者其他内容，但这种方式需要具有视频剪辑能力和工具；利用视频播放网页附带的播放器能力进行播放过程中的事件实现。并且，目前通常利用前端定时器组件来实现触发事件，比如设置一个循环1分钟的定时器，每到1分钟就读取配置并触发事件，这种依赖定时器的时间设置，会存在时间误差，另外，由于定时器依赖系统性能，会出现延时或者不稳定。因此，相关技术中，针对在视频播放中新增事件，存在操作复杂以及触发新增事件的时刻不准确的问题。

为此，本公开的实施例提供了一种音视频播放中触发弹窗事件的方法，包括：响应于音视频的播放位置发生变化，获取音视频的播放时间值；对音视频的时间轴进行切分，得到切分点数目和切分时间间隔；根据音视频的播放时间值和切分时间间隔，得到初始进度数组中与音视频的播放时间值对应的位置，其中，初始进度数组是根据切分点数目和初始元素值得到的；根据初始进度数组中与音视频的播放时间值对应的位置，更新初始进度数组中元素的元素值，得到新的进度数组；在新的进度数组满足触发条件的情况下，触发弹窗事件。

图1示意性示出了根据本公开实施例的音视频播放中触发弹窗事件的方法的应用场景图。

如图1所示，根据该实施例的应用场景100可以包括第一终端设备101、第二终端设备102、第三终端设备103、网络104和服务器105。网络104用以在第一终端设备101、第二终端设备102、第三终端设备103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用第一终端设备101、第二终端设备102、第三终端设备103中的至少一个通过网络104与服务器105交互，以接收或发送消息等。第一终端设备101、第二终端设备102、第三终端设备103上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等(仅为示例)。

第一终端设备101、第二终端设备102、第三终端设备103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器105可以是提供各种服务的服务器，例如对用户利用第一终端设备101、第二终端设备102、第三终端设备103所浏览的网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的用户请求等数据进行分析等处理，并将处理结果(例如根据用户请求获取或生成的网页、信息、或数据等)反馈给终端设备。

例如，可以通过服务器105响应于音视频的播放位置发生变化，获取音视频的播放时间值，通过对音视频的时间轴进行切分，得到切分点数目和切分时间间隔，使得可以根据音视频的播放时间值和切分时间间隔，得到初始进度数组中与音视频的播放时间值对应的位置，再根据初始进度数组中与音视频的播放时间值对应的位置，更新初始进度数组中元素的元素值，得到新的进度数组，从而可以在新的进度数组满足触发条件的情况下，触发弹窗事件。

需要说明的是，本公开实施例所提供的音视频播放中触发弹窗事件的方法一般可以由服务器105执行。相应地，本公开实施例所提供的音视频播放中触发弹窗事件的装置一般可以设置于服务器105中。本公开实施例所提供的音视频播放中触发弹窗事件的方法也可以由不同于服务器105且能够与第一终端设备101、第二终端设备102、第三终端设备103和/或服务器105通信的服务器或服务器集群执行。相应地，本公开实施例所提供的音视频播放中触发弹窗事件的装置也可以设置于不同于服务器105且能够与第一终端设备101、第二终端设备102、第三终端设备103和/或服务器105通信的服务器或服务器集群中。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

以下将基于图1描述的场景，通过图2～图4对公开实施例的音视频播放中触发弹窗事件的方法进行详细描述。

图2示意性示出了根据本公开实施例的音视频播放中触发弹窗事件的方法的流程图。

如图2所示，该方法200包括操作S210～操作S250。

在操作S210，响应于音视频的播放位置发生变化，获取音视频的播放时间值。

根据本公开的实施例，音视频可以包括音频和视频。可以通过HTML5技术，利用其video标签特性，使用ontimeupdate监听事件来触发各种场景。在视频开始播放的情况下，video对象可以通过ontimeupdate事件来报告当前的播放进度，其中，ontimeupdate事件可以表征在音频/视频当前的播放位置发生改变时触发。

其中，音视频播放可以指通过浏览器网页的视频播放插件进行视频播放，还可以利用HTML5自带的video标签特性用于视频播放，也有些云厂商开发封装了个性化的播放器用于视频播放。

根据本公开的实施例，当检测到音视频的播放位置发生改变时，触发预先在音视频标签中定义的播放时间更新ontimeupdate事件，通过ontimeupdate事件，可以获取音视频的播放时间值。

在操作S220，对音视频的时间轴进行切分，得到切分点数目和切分时间间隔。

根据本公开的实施例，基于获取到的音视频的时长，可以制定切分规则。切分规则可以表征按照设定的切分时间间隔对音视频的时间轴进行切分，即隔多长时间切分一次。

其中，切分规则遵循微积分原理，当音视频时长较大时，则可以适当提高切分细粒度，当音视频时长较小时，则可以降低切分细粒度。

例如，在音视频的时长小于等于1分钟的情况下，可以将切分时间间隔设置为2秒；在音视频的时长大于1分钟小于等于10分钟的情况下，可以将切分时间间隔设置为5秒。

根据本公开的实施例，基于切分规则，可以对音视频的时间轴进行切分，能够得到该音视频的时间轴的切分点数目。

例如，在音视频的时长为2分钟的情况下，每隔5秒切分一次，则可以切分得到24个切分点，切分点数目为24。

在操作S230，根据音视频的播放时间值和切分时间间隔，得到初始进度数组中与音视频的播放时间值对应的位置。

根据本公开的实施例，初始进度数组是根据切分点数目和初始元素值得到的。timeupdate事件的触发频率可以包括0.25s。

根据本公开的实施例，由于timeupdate事件的触发频率为0.25s，使得获取到的音视频的播放时间值不为整数，而切分时间间隔一般为整数，使得音视频当前播放位置未能恰好在切分点的位置上，所以将音视频的播放时间值除以切分时间间隔得到的结果可以表征音视频当前播放位置位于哪个切分点或哪两个相邻的切分点之间。

根据本公开的实施例，初始进度数组中元素的数目与切分点数目一致，因此，在确定音视频当前播放位置位于哪个切分点或哪两个切分点之间的前提下，可以确定初始进度数组中与音视频当前播放位置对应的位置，即位于哪个元素或哪两个相邻的元素之间，其中，初始进度数组中与音视频的播放时间值对应的位置默认左相邻的元素。

例如，在音视频当前播放位置位于时间轴上的第三个切分点和第四个切分点之间的情况下，可以确定初始进度数组中与音视频当前播放位置对应的位置为第三个元素和第四个元素之间，初始进度数组中与音视频的播放时间值对应的位置为第三个元素。

例如，一个9分50秒的视频资源，按照每秒5秒进行切分，即cutSize＝5，切分点共计118个，其中，计算公式为(9×60+50)/5。可以通过Index＝Math.round(currentTime/cutSize)计算音视频当前播放位置在初始进度数组内的对应位置，其中，currentTime可以表征音视频的播放时间值，可以通过video标签获取。

例如，在音视频的播放时间值为7.698秒的情况下，7.698/5＝1.5396，则可以确定初始进度数组中与音视频的播放时间值对应的位置为第二个元素；在音视频的播放时间值为12.527秒的情况下，12.5272/5＝2.5054，则可以确定初始进度数组中与音视频的播放时间值对应的位置为第三个元素。

在操作S240，根据初始进度数组中与音视频的播放时间值对应的位置，更新初始进度数组中元素的元素值，得到新的进度数组。

根据本公开的实施例，在确定初始进度数组中与音视频的播放时间值对应的位置的情况下，可以更新初始进度数组中与音视频的播放时间值对应位置的元素的元素值，以得到新的进度数组。

在操作S250，在新的进度数组满足触发条件的情况下，触发弹窗事件。

根据本公开的实施例，在新的进度数组满足触发条件的情况下，才可以触发弹窗事件；在新的进度数组未满足触发条件的情况下，不会触发弹窗事件。

根据本公开的实施例，在音视频的播放位置发生变化的情况下，可以获取音视频的播放时间值，并基于对音视频的时间轴进行切分得到的切分时间间隔，得到初始进度数组中与音视频的播放时间值对应的位置，从而可以更新初始进度数组中元素的元素值，得到新的进度数组，以记录音视频的播放情况，并在新的进度数组满足触发条件的情况下，触发弹窗事件，由于判断新的进度数组是否满足触发条件，使得能够在准确时刻触发弹窗事件，并且，通过简单操作即可实现音视频播放过程中的交互。

根据本公开的实施例，初始进度数组是根据切分点数目和初始元素值得到的，包括：根据切分点数目，确定初始进度数组的元素数目；将初始进度数组中的每个元素的元素值赋值为初始元素值，得到初始进度数组。

根据本公开的实施例，可以根据切分点数目，确定初始进度数组的元素数目，其中，切分点数目与初始进度数组的元素数目是一致的。在确定初始进度数组的元素数目的情况下，可以将初始进度数组中每个元素的元素值设置为初始元素值，从而可以得到初始进度数组，其中，初始元素值可以包括0。

例如，在切分点数目为n的情况下，可以生成一个长度为n，元素值均为0的一维数组，即初始进度数组，其中，n为大于等于1的整数，长度为n可以表征包括n个元素。

根据本公开的实施例，可以将该初始进度数组缓存在页面缓存localstorage(持久化的本地存储)中。同时，为了确保每个音视频均有唯一的切分点数据，localstorage的key值需拼接上音视频，以支持多个视频同时播放，即每个音视频都存在各自对应的key值。

根据本公开的实施例，基于切分点数目，可以生成包括切分点数目的元素且元素均为初始元素值的初始进度数组，以便于后续根据初始进度数组记录音视频的播放情况。

根据本公开的实施例，根据初始进度数组中与音视频的播放时间值对应的位置，更新初始进度数组中元素的元素值，得到新的进度数组，包括：根据初始进度数组中与音视频的播放时间值对应的位置，将初始进度数组中目标元素的元素值重新赋值，得到新的进度数组。

其中，目标元素是由初始进度数组中与音视频的播放时间值对应的位置确定的。

根据本公开的实施例，在确定初始进度数组中与音视频的播放时间值对应的位置的情况下，可以将目标元素的元素值重新赋值，以得到新的进度数组。

例如，在音视频播放经过相应的切分点时，将缓存在localstorage的初始进度数组中对应的元素值重新赋值为1，以表示该切分点已完成学习。以此类推，假使音视频完整播放结束，则得到的新的进度数组内的元素值均被置为1。

例如，在音视频的时长为2分钟的情况下，每隔5秒切分一次，得到的初始进度数组可以由24个元素组成，初始进度数组可以表示为[0，0，0，…，0，0，0]。在音视频的播放时间值为5秒的情况下，初始进度数组中与音视频的播放时间值对应的位置可以表征初始进度数组中第二个元素的位置，该第二个元素和第一元素均为目标元素，将该目标元素重新赋值，如，将目标元素的元素值重新赋值为1，则得到的新的进度数组可以表示为[1，1，0，…，0，0，0]。

例如，后续在音视频的播放时间值为10秒的情况下，初始进度数组中与音视频的播放时间值对应的位置可以表征初始进度数组中第三个元素的位置，该第三个元素为目标元素，将该目标元素重新赋值，如，将目标元素的元素值重新赋值为1，则得到的新的进度数组可以表示为[1，1，1，0…，0，0，0]。

其中，可以利用js(Java Script)对象，如初始化一个空对象hashPoint，当某一切分点已完成学习，则将对应的hashPoint[index]置为1，后续判断hashPoint[index]为1，可以确定对应的切分点为已完成。

根据本公开的实施例，基于初始进度数组中与音视频的播放时间值对应的位置，将初始进度数组中目标元素的元素值重新赋值，得到新的进度数组，以记录音视频的播放情况，便于后续计算播放进度和当前观看时长。

根据本公开的实施例，在新的进度数组满足触发条件的情况下，触发弹窗事件，包括：根据新的进度数组中的变更元素数目和元素总数目，计算得到音视频的播放进度，其中，变更元素表征元素值为非初始元素值的元素；在音视频的播放进度满足第一触发条件的情况下，触发弹窗事件，其中，触发条件包括第一触发条件。

根据本公开的实施例，可以将新的进度数组中的变更元素的数目与元素总数目作比，得到的比值可以表征音视频的播放进度。第一触发条件可以表征播放进度满足预设进度条件。

例如，新的进度数组可以表示为[1，1，0，…，0，0，0]，其中，新的进度数组由24个元素组成，则新的进度数组中的变更元素数目为2，元素总数目为22，音视频的播放进度为2/22＝9.1％。在第一触发条件表征播放进度为15％的情况下，音视频的播放进度不满足第一触发条件，则不会触发弹窗事件；在后续音视频的播放进度满足第一触发条件，即播放进度为15％的情况下，才会触发弹窗事件。其中，预设进度条件为15％。

根据本公开的实施例，弹窗事件可以包括广告弹窗、调查问卷弹窗、问答弹窗等。

根据本公开的实施例，根据新的进度数组中的变更元素数目和元素总数目，可以计算得到音视频的播放进度，使得可以根据音视频的播放进度判断是否触发弹窗事件，并在音视频的播放进度满足第一触发条件的情况下，触发弹窗事件，实现精准定位弹窗事件发生的时刻。

根据本公开的实施例，上述音视频播放中触发弹窗事件的方法还包括：根据新的进度数组中的变更元素数目和切分时间间隔，计算得到当前观看时长；在当前观看时长满足第二触发条件的情况下，触发弹窗事件，其中，触发条件包括第二触发条件。

根据本公开的实施例，可以将新的进度数组中的变更元素的数目与切分时间间隔相乘，得到的乘积可以表征用户的当前观看时长。第二触发条件可以表征当前观看时长满足预设时长条件。

例如，新的进度数组可以表示为[1，1，0，…，0，0，0]，切分时间间隔为5秒，则新的进度数组中的变更元素数目为2，用户的当前观看时长为2×5＝10秒。在第二触发条件表征当前观看时长为20秒的情况下，当前观看时长不满足第二触发条件，则不会触发弹窗事件；在后续用户的当前观看时长满足第二触发条件，即当前观看时长为20秒的情况下，才会触发弹窗事件。其中，预设时长条件为20秒。

根据本公开的实施例，根据新的进度数组中的变更元素数目和切分时间间隔，可以计算得到当前观看时长，使得可以根据当前观看时长判断是否触发弹窗事件，并在当前观看时长满足第二触发条件的情况下，触发弹窗事件，实现精准定位弹窗事件发生的时刻。

根据本公开的实施例，进度数组还可以适用于倍速播放、拖拽进度条等情况。比如，在音视频的时长为2分钟的情况下，每隔5秒切分一次，则可以切分得到24个切分点，切分点数目为24，进度数组可以表示为[0，0，0，…，0，0，0]，先观看前20秒，后拖动进度条至1分钟的位置再观看20秒，则最终新的进度数组可以表示为[1，1，1，1，0，…，1，1，1，1，0，…，0，0，0]，其中，开始记录为4个1，再是8个0，接着是4个1，后面是8个0。

图3示意性示出了根据本公开实施例的弹出互动问答窗口的示意图。

如图3所示，弹窗事件表征弹出互动问答窗口，在满足触发条件的情况下，前端页面可以弹出如图3所示的互动问答窗口，丰富视频播放过程中的互动交流。

根据本公开的实施例，在计算音视频的播放进度或当前观看时长之前，还包括：在音视频的播放时间值满足进度提交条件的情况下，提交新的进度数组。

根据本公开的实施例，在触发ontimeupdate事件的情况下，可以根据音视频的播放时间值，更新进度数组，以得到新的进度数组，但，并不是每次更新进度数组均需要进行判断是否满足触发条件，可以设定进度提交条件，在音视频的播放时间值满足进度提交条件的情况下，再根据提交的新的进度数组判断是否满足触发条件。

其中，进度提交条件可以表征设定的提交新的进度数组的时间间隔。

例如，可以设定进度提交条件为每隔20秒提交一次新的进度数组，即submitSize＝20，可以通过Index2＝Math.round(currentTime/submitSize)，计算确定提交新的进度数组的时刻。其中，可以设定初始提交新的进度数组的时刻为10秒，后续需要在30秒、50秒、70秒等时刻分别提交新的进度数组。

根据本公开的实施例，在音视频的播放时间值满足进度提交条件的情况下，再提交新的进度数组，以用于判断是否满足触发条件，避免实时判断导致计算量过大。

根据本公开的实施例，上述音视频播放中触发弹窗事件的方法还包括：确定音视频的时间轴中与目标元素对应的目标切分点；将音视频的时间轴中位于目标切分点之前的时间轴标记颜色，得到颜色标记后的时间轴。

根据本公开的实施例，可以根据目标元素，确定音视频的时间轴中与目标元素对应的目标切分点，从而可以将目标切分点之间的时间轴标记颜色，以表征在该目标切分点之前的音视频已经完成播放。

例如，将目标元素的元素值重新赋值之后得到的新的进度数组可以表示为[1，1，1，0，...，0，0，0]，则目标元素可以表征新的进度数组中的第三个元素，则目标切分点可以表征音视频的时间轴上的第三个切分点，可以将时间轴中位于第三个切分点之前的时间轴的进度颜色设置为淡蓝色。

根据本公开的实施例，通过将音视频的时间轴中位于目标切分点之前的时间轴标记颜色，便于直观展示音视频的已播放部分。

图4示意性示出了根据本公开实施例的用于实现音视频播放中触发弹窗事件的流程图。

如图4所示，该流程实施例400包括操作S410～操作S470。

在操作S410，视频播放。

根据本公开的实施例，用户可以选择开始，从而可以进行视频播放。其中，还可以进行音频播放。

在操作S420，监听事件。

根据本公开的实施例，前端页面可以通过监听视频video标签的原生事件ontimeupdate。

在操作S430，触发事件。

根据本公开的实施例，在音视频播放经过相应播放点的情况下，触发监听事件，计算视频播放时长和播放进度。

根据本公开的实施例，HTML5可以提供对音视频的支持，使得可以利用提供的API来实现ontimeupdate事件的功能。可以通过“const videoElement＝document.querySelector(′#video-element′)”获取视频元素，通过“videoElement.addEventListener(itimeupdate′，()＝>{const currentTime＝videoElement.currentTime；})”实现ontimeupdate事件，并获取音视频的播放时间值。

在操作S440，调用接口。

根据本公开的实施例，监听事件里面可以根据视频播放时长，调用服务端的接口。

在操作S450，事件配置。

根据本公开的实施例，可以通过调用的接口，获取后端的事件配置，其中，事件配置可以包括事件内容的信息，如，弹窗等。

在操作S460，匹配规则。

根据本公开的实施例，判断视频播放时长是否符合匹配规则。

在操作S470，弹出事件。

根据本公开的实施例，在视频播放时长符合匹配规则的情况下，前端可以根据事件配置，做出相应的弹出事件。

例如，在视频播放时长达到符合视频播放时长要求的情况下，实现视频播放过程中触发事件的功能。

例如，音视频播放过程中，通过监听ontimeupdate，获取当前播放时间，即播放时间值，并且获取需要弹出的弹窗时间配置，如，播放进度2％时弹出，则在播放进度为2％的情况下，触发弹窗事件，前端页面的效果可以表征弹出窗口。

基于上述内容，本发明利用简单的技术原理外加播放进度和观看时长的算法基础上实现视频播放进度的交互逻辑。可以利用网页前端开发技术，配合服务端做场景配置，视频播放时基于视频进度算法调用服务端接口，获取弹出事件配置，做对应的弹出事件场景反应。并且，还可以将设计的简单复用的组件，应用到视频播放中，调用该组件后，可以做到即插即用的视频播放新增事件的功能。

根据本公开的实施例，本发明通过利用HTML5原生技术和视频播放进度、播放时长计算规则实现场景功能，并发掘了HTML5视频播放原生技术更多的扩展点。并且，使得代码足够轻量级，利用HTML5的原生事件能力就能做到各类根据播放时间触发事件的场景，不需要过多复杂的技术介入，同时又能支持正确记录进度；侵入性小，不影响原本视频；可扩展性，还能通过计算出的视频播放时长，用来记录用户视频观看时长。

基于上述音视频播放中触发弹窗事件的方法，本公开还提供了一种音视频播放中触发弹窗事件的装置。以下将结合图5对该装置进行详细描述。

图5示意性示出了根据本公开实施例的音视频播放中触发弹窗事件的装置的结构框图。

如图5所示，该实施例的音视频播放中触发弹窗事件的装置500包括获取模块510、切分模块520、获得模块530、更新模块540和触发模块550。

获取模块510用于响应于音视频的播放位置发生变化，获取音视频的播放时间值。在一实施例中，获取模块510可以用于执行前文描述的操作S210，在此不再赘述。

切分模块520用于对音视频的时间轴进行切分，得到切分点数目和切分时间间隔。在一实施例中，切分模块520可以用于执行前文描述的操作S220，在此不再赘述。

获得模块530用于根据音视频的播放时间值和切分时间间隔，得到初始进度数组中与音视频的播放时间值对应的位置，其中，初始进度数组是根据切分点数目和初始元素值得到的。在一实施例中，获得模块530可以用于执行前文描述的操作S230，在此不再赘述。

更新模块540用于根据初始进度数组中与音视频的播放时间值对应的位置，更新初始进度数组中元素的元素值，得到新的进度数组。在一实施例中，更新模块540可以用于执行前文描述的操作S240，在此不再赘述。

触发模块550用于在新的进度数组满足触发条件的情况下，触发弹窗事件。在一实施例中，触发模块550可以用于执行前文描述的操作S250，在此不再赘述。

根据本公开的实施例，获得模块530包括第一确定单元和第一获得单元。

第一确定单元，用于根据切分点数目，确定初始进度数组的元素数目。

第一获得单元，用于将初始进度数组中的每个元素的元素值赋值为初始元素值，得到初始进度数组。

根据本公开的实施例，更新模块540包括赋值单元。

赋值单元，用于根据初始进度数组中与音视频的播放时间值对应的位置，将初始进度数组中目标元素的元素值重新赋值，得到新的进度数组，其中，目标元素是由初始进度数组中与音视频的播放时间值对应的位置确定的。

根据本公开的实施例，触发模块550包括第一计算单元和第一触发单元。

第一计算单元，用于根据新的进度数组中的变更元素数目和元素总数目，计算得到音视频的播放进度，其中，变更元素表征元素值为非初始元素值的元素。

第一触发单元，用于在音视频的播放进度满足第一触发条件的情况下，触发弹窗事件，其中，触发条件包括第一触发条件。

根据本公开的实施例，触发模块550还包括第二计算单元和第二触发单元。

第二计算单元，用于根据新的进度数组中的变更元素数目和切分时间间隔，计算得到当前观看时长。

第二触发单元，用于在当前观看时长满足第二触发条件的情况下，触发弹窗事件，其中，触发条件包括第二触发条件。

根据本公开的实施例，触发模块550还包括提交单元。

提交单元，用于在音视频的播放时间值满足进度提交条件的情况下，提交新的进度数组。

根据本公开的实施例，更新模块540包括第二确定单元和第二获得单元。

第二确定单元，用于确定音视频的时间轴中与目标元素对应的目标切分点。

第二获得单元，用于将音视频的时间轴中位于目标切分点之前的时间轴标记颜色，得到颜色标记后的时间轴。

根据本公开的实施例，获取模块510、切分模块520、获得模块530、更新模块540和触发模块550中的任意多个模块可以合并在一个模块中实现，或者其中的任意一个模块可以被拆分成多个模块。或者，这些模块中的一个或多个模块的至少部分功能可以与其他模块的至少部分功能相结合，并在一个模块中实现。根据本公开的实施例，获取模块510、切分模块520、获得模块530、更新模块540和触发模块550中的至少一个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式等硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，获取模块510、切分模块520、获得模块530、更新模块540和触发模块550中的至少一个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

图6示意性示出了根据本公开实施例的适于实现音视频播放中触发弹窗事件的方法的电子设备的方框图。

如图6所示，根据本公开实施例的电子设备600包括处理器601，其可以根据存储在只读存储器(ROM)602中的程序或者从存储部分608加载到随机访问存储器(RAM)603中的程序而执行各种适当的动作和处理。处理器601例如可以包括通用微处理器(例如CPU)、指令集处理器和/或相关芯片组和/或专用微处理器(例如，专用集成电路(ASIC))等等。处理器601还可以包括用于缓存用途的板载存储器。处理器601可以包括用于执行根据本公开实施例的方法流程的不同动作的单一处理单元或者是多个处理单元。

在RAM 603中，存储有电子设备600操作所需的各种程序和数据。处理器601、ROM602以及RAM 603通过总线604彼此相连。处理器601通过执行ROM 602和/或RAM 603中的程序来执行根据本公开实施例的方法流程的各种操作。需要注意，所述程序也可以存储在除ROM 602和RAM 603以外的一个或多个存储器中。处理器601也可以通过执行存储在所述一个或多个存储器中的程序来执行根据本公开实施例的方法流程的各种操作。

根据本公开的实施例，电子设备600还可以包括输入/输出(I/O)接口605，输入/输出(I/O)接口605也连接至总线604。电子设备600还可以包括连接至输入/输出(I/O)接口605的以下部件中的一项或多项：包括键盘、鼠标等的输入部分606；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分607；包括硬盘等的存储部分608；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分609。通信部分609经由诸如因特网的网络执行通信处理。驱动器610也根据需要连接至输入/输出(I/O)接口605。可拆卸介质611，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器610上，以便于从其上读出的计算机程序根据需要被安装入存储部分608。

本公开还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施例中描述的设备/装置/系统中所包含的；也可以是单独存在，而未装配入该设备/装置/系统中。上述计算机可读存储介质承载有一个或者多个程序，当上述一个或者多个程序被执行时，实现根据本公开实施例的方法。

根据本公开的实施例，计算机可读存储介质可以是非易失性的计算机可读存储介质，例如可以包括但不限于：便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。例如，根据本公开的实施例，计算机可读存储介质可以包括上文描述的ROM 602和/或RAM 603和/或ROM 602和RAM 603以外的一个或多个存储器。

本公开的实施例还包括一种计算机程序产品，其包括计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。当计算机程序产品在计算机系统中运行时，该程序代码用于使计算机系统实现本公开实施例所提供的音视频播放中触发弹窗事件的方法。

在该计算机程序被处理器601执行时执行本公开实施例的系统/装置中限定的上述功能。根据本公开的实施例，上文描述的系统、装置、模块、单元等可以通过计算机程序模块来实现。

在一种实施例中，该计算机程序可以依托于光存储器件、磁存储器件等有形存储介质。在另一种实施例中，该计算机程序也可以在网络介质上以信号的形式进行传输、分发，并通过通信部分609被下载和安装，和/或从可拆卸介质611被安装。该计算机程序包含的程序代码可以用任何适当的网络介质传输，包括但不限于：无线、有线等等，或者上述的任意合适的组合。

在这样的实施例中，该计算机程序可以通过通信部分609从网络上被下载和安装，和/或从可拆卸介质611被安装。在该计算机程序被处理器601执行时，执行本公开实施例的系统中限定的上述功能。根据本公开的实施例，上文描述的系统、设备、装置、模块、单元等可以通过计算机程序模块来实现。

根据本公开的实施例，可以以一种或多种程序设计语言的任意组合来编写用于执行本公开实施例提供的计算机程序的程序代码，具体地，可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。程序设计语言包括但不限于诸如Java，C++，python，“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

本领域技术人员可以理解，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合或/或结合，即使这样的组合或结合没有明确记载于本公开中。特别地，在不脱离本公开精神和教导的情况下，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合。所有这些组合和/或结合均落入本公开的范围。

以上对本公开的实施例进行了描述。但是，这些实施例仅仅是为了说明的目的，而并非为了限制本公开的范围。尽管在以上分别描述了各实施例，但是这并不意味着各个实施例中的措施不能有利地结合使用。本公开的范围由所附权利要求及其等同物限定。不脱离本公开的范围，本领域技术人员可以做出多种替代和修改，这些替代和修改都应落在本公开的范围之内。

Claims (11)

1.一种音视频播放中触发弹窗事件的方法，包括：

响应于音视频的播放位置发生变化，获取所述音视频的播放时间值；

对所述音视频的时间轴进行切分，得到切分点数目和切分时间间隔；

根据所述音视频的播放时间值和所述切分时间间隔，得到初始进度数组中与所述音视频的播放时间值对应的位置，其中，所述初始进度数组是根据所述切分点数目和初始元素值得到的；

根据所述初始进度数组中与所述音视频的播放时间值对应的位置，更新所述初始进度数组中元素的元素值，得到新的进度数组；

在所述新的进度数组满足触发条件的情况下，触发弹窗事件。

2.根据权利要求1所述的方法，其中，所述初始进度数组是根据所述切分点数目和初始元素值得到的，包括：

根据所述切分点数目，确定所述初始进度数组的元素数目；

将所述初始进度数组中的每个元素的元素值赋值为所述初始元素值，得到所述初始进度数组。

3.根据权利要求1所述的方法，其中，所述根据所述初始进度数组中与所述音视频的播放时间值对应的位置，更新所述初始进度数组中元素的元素值，得到新的进度数组，包括：

根据所述初始进度数组中与所述音视频的播放时间值对应的位置，将所述初始进度数组中目标元素的元素值重新赋值，得到所述新的进度数组，其中，所述目标元素是由所述初始进度数组中与所述音视频的播放时间值对应的位置确定的。

4.根据权利要求1所述的方法，其中，所述在所述新的进度数组满足触发条件的情况下，触发弹窗事件，包括：

根据所述新的进度数组中的变更元素数目和元素总数目，计算得到所述音视频的播放进度，其中，所述变更元素表征元素值为非初始元素值的元素；以及

在所述音视频的播放进度满足第一触发条件的情况下，触发所述弹窗事件，其中，所述触发条件包括所述第一触发条件。

5.根据权利要求4所述的方法，还包括：

根据所述新的进度数组中的所述变更元素数目和所述切分时间间隔，计算得到当前观看时长；以及

在所述当前观看时长满足第二触发条件的情况下，触发所述弹窗事件，其中，所述触发条件包括所述第二触发条件。

6.根据权利要求5所述的方法，其中，在计算所述音视频的播放进度或所述当前观看时长之前，还包括：

在所述音视频的播放时间值满足进度提交条件的情况下，提交所述新的进度数组。

7.根据权利要求3所述的方法，还包括：

确定所述音视频的时间轴中与所述目标元素对应的目标切分点；

将所述音视频的时间轴中位于所述目标切分点之前的时间轴标记颜色，得到颜色标记后的时间轴。

8.一种音视频播放中触发弹窗事件的装置，包括：

获取模块，用于响应于音视频的播放位置发生变化，获取所述音视频的播放时间值；

切分模块，用于对所述音视频的时间轴进行切分，得到切分点数目和切分时间间隔；

获得模块，用于根据所述音视频的播放时间值和所述切分时间间隔，得到初始进度数组中与所述音视频的播放时间值对应的位置，其中，所述初始进度数组是根据所述切分点数目和初始元素值得到的；

更新模块，用于根据所述初始进度数组中与所述音视频的播放时间值对应的位置，更新所述初始进度数组中元素的元素值，得到新的进度数组；

触发模块，用于在所述新的进度数组满足触发条件的情况下，触发弹窗事件。

9.一种电子设备，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器执行根据权利要求1～7中任一项所述的方法。

10.一种计算机可读存储介质，其上存储有可执行指令，该指令被处理器执行时使处理器执行根据权利要求1～7中任一项所述的方法。

11.一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现根据权利要求1～7中任一项所述的方法。