一种提高浏览器视频播放整秒触发精度的方法与终端与流程

1.本发明涉及计算机技术领域，特别涉及一种提高浏览器视频播放整秒触发精度的方法与终端。


背景技术：

2.现代浏览器由html5(hypertext markup language 5，超文本5.0)技术演进，已可以通过《video》原生标签支持视频资源的播放。同时javascript能支持对《video》原生标签进行timeupdate(时间更新)事件监听检测当前的播放时间的变化。
3.对于timeupdate事件的监听，不同的现代浏览器和操作系统拥有不同的策略。webkit(一个开源的浏览器引擎)系的浏览器和ie edge浏览器当视频在video标签播放时，timeupdate的触发频率基本为250ms左右一次，从上面mdn(一个提供web技术和促进web技术软件不断发展的学习平台)中的文档相关的描述指出是不低于250ms一次。
4.由于部分浏览器下timeupdate的触发频率稳定在250ms左右，按视频流正常播放时，此时的时间基准是从0开始，意味着触发时间点(近似)0、0.25s、0.5s、0.75s、1s、1.25s...可以基本保障在整秒左右可以触发一次timeupdate事件，但如果用户在视频播放过程中拖拉、操作进度条后，基准的时间点就会产生不确定性。例如，如果用户拖拽进度条到1.4s时，那么后续的timeupdate的触发时间点就会变成：1.4s、1.65s、1.9s、2.15s(递增0.25s，即250ms)，也就是说timeupdate的触发时间点无法准确在2s附近，而会延后0.15s。
5.在某些场景下，对视频播放时间敏感的业务，其需要精确整秒的感知时，以上技术的timeupdate的触发时间在用户拖拽进度条后没有精确在2s，则可能会产生问题。


技术实现要素：

6.本发明所要解决的技术问题是：提供一种提高浏览器视频播放整秒触发精度的方法与终端，能够提高浏览器视频播放的整秒触发精度。
7.为了解决上述技术问题，本发明采用的技术方案为：
8.一种提高浏览器视频播放整秒触发精度的方法，包括：
9.s1、根据用户请求播放视频，对视频的播放进度进行监听，检测到用户进行了视频的进度跳转时，浏览器自动触发一次原生时间更新事件；
10.s2、在每个所述原生时间更新事件的触发时，计算原生时间更新事件的触发时间与下一个整秒的时间差，根据所述时间差设置在所述下一个整秒触发的新时间更新事件；
11.s3、根据所述新时间更新事件进行整秒业务的触发。
12.为了解决上述技术问题，本发明采用的另一种技术方案为：
13.一种提高浏览器视频播放整秒触发精度的终端，包括处理器、存储器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器在执行所述计算机程序时实现以下步骤：
14.s1、根据用户请求播放视频，对视频的播放进度进行监听，检测到用户进行了视频
的进度跳转时，浏览器自动触发一次原生时间更新事件；
15.s2、在每个所述原生时间更新事件的触发时，计算原生时间更新事件的触发时间与下一个整秒的时间差，根据所述时间差设置在所述下一个整秒触发的新时间更新事件；
16.s3、根据所述新时间更新事件进行整秒业务的触发。
17.本发明的有益效果在于：本发明在用户进行视频的进度跳转后，对于每个原生时间更新事件的触发均进行与下一个整秒的时间差，并根据时间差设置在下一个整秒触发的新时间更新事件，保证在每个视频的每个整秒均设有时间更新事件，避免因为用户拖拽进度条和进行进度跳转造成的时间更新触发时间偏移，能够有效提高浏览器视频播放整秒触发精，保证整秒触发的业务的运行。
附图说明
18.图1为本发明实施例的一种提高浏览器视频播放整秒触发精度的方法的流程图；
19.图2为本发明实施例的一种提高浏览器视频播放整秒触发精度的终端的结构图；
20.图3为本发明实施例的一种提高浏览器视频播放整秒触发精度的方法的详细流程图；
21.标号说明：
22.1、一种提高浏览器视频播放整秒触发精度的终端；2、处理器；3、存储器。
具体实施方式
23.为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。
24.请参照图1以及图2，一种提高浏览器视频播放整秒触发精度的方法，包括：
25.s1、根据用户请求播放视频，对视频的播放进度进行监听，检测到用户进行了视频的进度跳转时，浏览器自动触发一次原生时间更新事件；
26.s2、在每个所述原生时间更新事件的触发时，计算原生时间更新事件的触发时间与下一个整秒的时间差，根据所述时间差设置在所述下一个整秒触发的新时间更新事件；
27.s3、根据所述新时间更新事件进行整秒业务的触发。
28.从上述描述可知，本发明的有益效果在于：本发明在用户进行视频的进度跳转后，对于每个原生时间更新事件的触发均进行与下一个整秒的时间差，并根据时间差设置在下一个整秒触发的新时间更新事件，保证在每个视频的每个整秒均设有时间更新事件，避免因为用户拖拽进度条和进行进度跳转造成的时间更新触发时间偏移，能够有效提高浏览器视频播放整秒触发精，保证整秒触发的业务的运行。
29.进一步地，步骤s2具体为：
30.在每个所述原生时间更新事件的触发时，通过视频的当前进度时间属性获取视频的当前进度时间，并根据所述当前进度时间确定所述下一个整秒从而确定所述当前进度时间与所述下一个整秒之间的所述时间差，根据所述时间差设置在所述下一个整秒触发的所述新时间更新事件。
31.由上述描述可知，在每个原生时间更新事件触发时都通过视频的当前进度时间，计算与下一个整秒的时间差，从而设置在下一个整秒触发的新时间更新事件，保证每个整
秒均有时间更新事件触发。
32.进一步地，所述根据所述时间差设置在所述下一个整秒触发的新时间更新事件具体为：
33.根据所述时间差，通过定时器设置在所述时间差后触发的所述新时间更新事件的定时触发器。
34.由上述描述可知，通过定时器设置使新时间更新事件整秒时触发的定时触发器，能够保证整秒触发的精确度。
35.进一步地，在所述通过定时器设置在所述时间差后触发的所述新时间更新事件的定时触发器之前，还包括：
36.清除已设置的所述新时间更新事件的定时触发器。
37.由上述描述可知，在根据时间差设置新时间更新事件之前先清除已设置的新时间更新事件，保证在每个整秒仅存在一个新时间更新事件触发。
38.进一步地，步骤s3具体为：
39.在所述时间差小于所述原生时间更新事件的预设触发间隔时，此次设置的新时间更新事件将会被触发，且仅在所述新时间更新事件触发时，通过视频的当前进度时间属性取视频的当前进度时间，以判断是否存在当前进度时间触发的整秒业务，若存在则执行所述整秒业务，否则不进行处理。
40.由上述描述可知，在时间差小于原生时间更新事件的预设触发时间间隔时，即新时间更新事件触发前不会有原生时间更新事件触发，此时新时间更新事件将在时间到达时触发，此时判断该整秒是否有需要执行的整秒业务进行执行，确保整秒业务在对应的时间触发执行。
41.请参照图2，一种提高浏览器视频播放整秒触发精度的终端，包括处理器、存储器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器在执行所述计算机程序时实现以下步骤：
42.s1、根据用户请求播放视频，对视频的播放进度进行监听，检测到用户进行了视频的进度跳转时，浏览器自动触发一次原生时间更新事件；
43.s2、在每个所述原生时间更新事件的触发时，计算原生时间更新事件的触发时间与下一个整秒的时间差，根据所述时间差设置在所述下一个整秒触发的新时间更新事件；
44.s3、根据所述新时间更新事件进行整秒业务的触发。
45.从上述描述可知，本发明的有益效果在于：本发明在用户进行视频的进度跳转后，对于每个原生时间更新事件的触发均进行与下一个整秒的时间差，并根据时间差设置在下一个整秒触发的新时间更新事件，保证在每个视频的每个整秒均设有时间更新事件，避免因为用户拖拽进度条和进行进度跳转造成的时间更新触发时间偏移，能够有效提高浏览器视频播放整秒触发精，保证整秒触发的业务的运行。
46.进一步地，步骤s2具体为：
47.在每个所述原生时间更新事件的触发时，通过视频的当前进度时间属性获取视频的当前进度时间，并根据所述当前进度时间确定所述下一个整秒从而确定所述当前进度时间与所述下一个整秒之间的所述时间差，根据所述时间差设置在所述下一个整秒触发的所述新时间更新事件。
48.由上述描述可知，在每个原生时间更新事件触发时都通过视频的当前进度时间，计算与下一个整秒的时间差，从而设置在下一个整秒触发的新时间更新事件，保证每个整秒均有时间更新事件触发。
49.进一步地，所述根据所述时间差设置在所述下一个整秒触发的新时间更新事件具体为：
50.根据所述时间差，通过定时器设置在所述时间差后触发的所述新时间更新事件的定时触发器。
51.由上述描述可知，通过定时器设置使新时间更新事件整秒时触发的定时触发器，能够保证整秒触发的精确度。
52.进一步地，所述处理器在执行所述计算机程序时在所述通过定时器设置在所述时间差后触发的所述新时间更新事件的定时触发器之前，还包括：
53.清除已设置的所述新时间更新事件的定时触发器。
54.由上述描述可知，在根据时间差设置新时间更新事件之前先清除已设置的新时间更新事件，保证在每个整秒仅存在一个新时间更新事件触发。
55.进一步地，步骤s3具体为：
56.在所述时间差小于所述原生时间更新事件的预设触发间隔时，此次设置的新时间更新事件将会被触发，且仅在所述新时间更新事件触发时，通过视频的当前进度时间属性取视频的当前进度时间，以判断是否存在当前进度时间触发的整秒业务，若存在则执行所述整秒业务，否则不进行处理。
57.由上述描述可知，在时间差小于原生时间更新事件的预设触发时间间隔时，即新时间更新事件触发前不会有原生时间更新事件触发，此时新时间更新事件将在时间到达时触发，此时判断该整秒是否有需要执行的整秒业务进行执行，确保整秒业务在对应的时间触发执行。
58.请参照图1和图3，本发明的实施例一为：
59.一种提高浏览器视频播放整秒触发精度的方法，包括：
60.s1、根据用户请求播放视频，对视频的播放进度进行监听，检测到用户进行了视频的进度跳转时，浏览器自动触发一次原生时间更新事件；
61.本实施例中，一个5分钟的视频，在30秒处设置了一个互动，该互动会弹出问题让用户作答，作答完成继续播放。用户通过浏览器播放视频，播放到5秒的时候不想看了前面的内容，想直接跳转到30秒处的互动，于是用户拖拽进度条或直接点击到了视频的29秒400毫秒处，即29.4秒处，用户鼠标松开完成视频进度跳转，视频元素会出现暂停到继续播放的短暂过程，继续播放后，浏览器原生的ontimeupdate事件(即原生时间更新事件)马上触发一次。
62.s2、在每个所述原生时间更新事件的触发时，计算原生时间更新事件的触发时间与下一个整秒的时间差，根据所述时间差设置在所述下一个整秒触发的新时间更新事件；
63.其中，步骤s2具体为：
64.在每个所述原生时间更新事件的触发时，通过视频的当前进度时间属性获取视频的当前进度时间，并根据所述当前进度时间确定所述下一个整秒从而确定所述当前进度时间与所述下一个整秒之间的所述时间差，根据所述时间差设置在所述下一个整秒触发的所
述新时间更新事件；
65.其中，在所述通过定时器设置在所述时间差后触发的所述新时间更新事件的定时触发器之前，还包括：
66.清除已设置的所述新时间更新事件的定时触发器；
67.其中，所述根据所述时间差设置在所述下一个整秒触发的新时间更新事件具体为：
68.根据所述时间差，通过定时器设置在所述时间差后触发的所述新时间更新事件的定时触发器；
69.本实施例中，在用户进行视频进度跳转到29.4秒时，触发了原生的ontimeupdate事件，通过获取html页面上播放视频的《video》元素对象htmlvideoelement中的currenttime属性(即当前进度时间属性)获取视频的当前进度时间为29.4秒，此时(29.4秒)离30秒还差30-29.4＝0.6秒，通过js的settimeout定时器方法设置0.6秒后的定时触发器。本实施例中原生时间更新事件的预设触发间隔为0.25秒，在继续播放视频到29.4 0.25＝29.65秒，浏览器原生的ontimeupdate事件触发，程序会计算出此时(29.65秒)离30秒还差30-29.65＝0.35秒，通过js的settimeout定时器方法设置0.35秒后的触发器，同时清除上次29.4秒设置的定时触发器；继续播放后视频播放到29.65 0.25＝29.90秒，浏览器原生的ontimeupdate事件再次触发，程序会计算出此时(29.90秒)离30秒还差30-29.90＝0.1秒，通过js的settimeout定时器方法设置0.1秒后的触发器，同时清除上次29.65秒设置的定时触发器。
70.s3、根据所述新时间更新事件进行整秒业务的触发；
71.其中，步骤s3具体为：
72.在所述时间差小于所述原生时间更新事件的预设触发间隔时，此次设置的新时间更新事件将会被触发，且仅在所述新时间更新事件触发时，通过视频的当前进度时间属性取视频的当前进度时间，以判断是否存在当前进度时间触发的整秒业务，若存在则执行所述整秒业务，否则不进行处理；
73.本实施例中，在29.9秒时设置了0.1秒后的触发器后，此时与下一整秒的时间差为0.1秒，小于原生时间更新事件的预设触发间隔0.25秒，因此该定时触发器能够完成运行，在继续播放0.1秒后，定时触发器得到触发，此时到达了第30秒的整秒时刻，判断是否有需要进行整秒业务，而确有30秒处的整秒业务，因此触发整秒业务，暂停视频，发起互动，在用户互动结束后，即整秒业务完成，视频继续播放。
74.请参照图2，本发明的实施例二为：
75.一种提高浏览器视频播放整秒触发精度的终端1，包括处理器2、存储器3以及存储在所述存储器3上并可在所述处理器2上运行的计算机程序，所述处理器2在执行所述计算机程序时实现以上实施例一中的步骤。
76.综上所述，本发明提供的一种提高浏览器视频播放整秒触发精度的方法与终端，本发明在用户进行视频的进度跳转后，对于每个原生时间更新事件的触发均进行与下一个整秒的时间差，并根据时间差设置在下一个整秒触发的新时间更新事件，保证在每个视频的每个整秒均设有时间更新事件，避免因为用户拖拽进度条和进行进度跳转造成的时间更新触发时间偏移，能够有效提高浏览器视频播放整秒触发精，保证整秒触发的业务的运行。
77.以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。