CN114880613B - 一种图像播放处理方法 - Google Patents
一种图像播放处理方法 Download PDFInfo
- Publication number
- CN114880613B CN114880613B CN202210515953.6A CN202210515953A CN114880613B CN 114880613 B CN114880613 B CN 114880613B CN 202210515953 A CN202210515953 A CN 202210515953A CN 114880613 B CN114880613 B CN 114880613B
- Authority
- CN
- China
- Prior art keywords
- image
- index
- component
- address
- time
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000003672 processing method Methods 0.000 title claims abstract description 14
- 238000012545 processing Methods 0.000 claims abstract description 48
- 238000000034 method Methods 0.000 claims description 24
- 230000004044 response Effects 0.000 claims description 21
- 238000012163 sequencing technique Methods 0.000 claims description 2
- 238000004891 communication Methods 0.000 description 6
- 238000010586 diagram Methods 0.000 description 4
- 230000006870 function Effects 0.000 description 4
- 230000002093 peripheral effect Effects 0.000 description 3
- 230000008569 process Effects 0.000 description 3
- 238000004422 calculation algorithm Methods 0.000 description 2
- 238000004088 simulation Methods 0.000 description 2
- 238000004458 analytical method Methods 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000000802 evaporation-induced self-assembly Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012795 verification Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/901—Indexing; Data structures therefor; Storage structures
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明实施例涉及一种图像播放处理方法，所述方法包括：浏览器载入图像播放页面的可执行脚本文件；在浏览器的显示页面上创建第一、第二、第三图像组件、文件输入组件、顺序播放组件、倒序回放组件；若文件输入组件的onchange事件被激活则对待播放的多个图像文件进行选择从而得到对应的图像地址序列；若顺序播放组件的onc l i ck事件被激活则根据图像地址序列和第一、第二、第三图像组件进行图像顺序播放处理；若倒序回放组件的onc l i ck事件被激活则根据图像地址序列和第一、第二、第三图像组件进行图像倒序回放处理。通过本发明，可以解决常规方案中帧间黑屏的问题，从而达到提高图片播放流畅度及稳定性的目的。
Description
技术领域
本发明涉及数据处理技术领域，特别涉及一种图像播放处理方法。
背景技术
对自动驾驶系统的仿真验证需要大量的实景图像文件，这些图像文件都是通过实车路跑由摄像头拍摄获得的。在对自动驾驶系统进行仿真验证时，经常需要将某个时段连续获取的多个实景图像文件按一定的速率进行播放。当前解决仿真图片播放的技术方案基本都是基于浏览器的WEB应用解决方案，这种WEB应用解决方案是以一个图像(image，img)对象为绘图对象，每隔一个设定帧间时长更新这个绘图对象的图像地址(source，src)属性，由此来实现图像的连续播放。这种方式只有在相邻帧切换时刻才可以修改绘图对象的src属性，浏览器也只有在该src属性被修改之后才能获取下一帧图像，倘若下一帧图像过大导致浏览器获取时间过长则可能会出现帧间黑屏的问题。
发明内容
本发明的目的，就是针对现有技术的缺陷，提供一种图像播放处理方法、电子设备及计算机可读存储介质，在显示页面上构建3个完全重叠的img对象；并在进行图像顺序播放或图像倒序回放时循环利用这3个img对象中的2个对象作为当前帧图像和下一帧图像的加载主体；并基于浏览器将z-index值较大的页面元素叠加(覆盖)在z-index值较小的页面元素之上的工作原理，在帧间切换时通过修改img对象的z-index属性值即可实现从当前帧图像到下一帧图像的快速切换。通过本发明，可以解决常规方案中帧间黑屏的问题，从而达到提高图片播放流畅度及稳定性的目的。
为实现上述目的，本发明实施例第一方面提供了一种图像播放处理方法，所述方法包括：
浏览器载入图像播放页面的可执行脚本文件；所述可执行脚本文件中包括组件设置代码部分和组件事件响应代码部分；
解析所述组件设置代码部分，在浏览器的显示页面上创建三个位置完全重叠的用于加载图像的第一、第二、第三图像组件，创建一个用于选择多个文件的文件输入组件，创建一个用于启动图像顺序播放的顺序播放组件，创建一个用于启动图像倒序回放的倒序回放组件；所述第一、第二、第三图像组件的高度相同都为预设的组件高度H，宽度相同都为预设的组件宽度W；所述第一、第二、第三图像组件分别对应一个原图地址和一个重叠索引；所述第一、第二、第三图像组件中，只有所述重叠索引为最大值的那个图像组件的所述原图地址对应的图像在浏览器的显示页面上可见；
解析所述组件事件响应代码部分，对所述文件输入组件的onchange事件进行侦听，若所述文件输入组件的onchange事件被激活则对待播放的多个图像文件进行选择从而得到对应的图像地址序列；并对所述顺序播放组件的onclick事件进行侦听，若所述顺序播放组件的onclick事件被激活则根据所述图像地址序列和所述第一、第二、第三图像组件进行图像顺序播放处理；并对所述倒序回放组件的onclick事件进行侦听，若所述倒序回放组件的onclick事件被激活则根据所述图像地址序列和所述第一、第二、第三图像组件进行图像倒序回放处理。
优选的，所述可执行脚本文件支持超文本标记语言HTML、JavaScript语言和动态服务器页面ASP语言。
优选的，所述组件设置代码部分中，设置三个图像img对象分别对应所述第一、第二、第三图像组件，并将所述三个图像img对象的绝对位置设为一致、高度设为一致为所述组件高度H、宽度设为一致为所述组件宽度W，从而实现所述第一、第二、第三图像组件的完全重叠；设置一个支持多文件选择的具体为文件file类型的输入input对象对应所述文件输入组件；设置两个具体为按钮button类型的输入input对象分别对应所述顺序播放组件和所述倒序回放组件；
所述第一、第二或第三图像组件的所述原图地址对应图像img对象的src属性，所述第一、第二或第三图像组件的所述重叠索引对应图像img对象的z-index属性。
优选的，所述若所述文件输入组件的onchange事件被激活则对待播放的多个图像文件进行选择从而得到对应的图像地址序列，具体包括：
若所述文件输入组件的onchange事件被激活，则向用户显示文件选择窗口；并在用户于所述文件选择窗口内完成多个图像文件选择并确认提交时，对用户提交的所有选中文件的文件地址与文件时间进行获取；并将各个文件地址作为对应的所述图像地址，并按对应的所述文件时间的先后顺序对所有所述图像地址进行排序生成对应的所述图像地址序列；所述图像地址序列中所述图像地址的数量默认大于3。
优选的，所述若所述顺序播放组件的onclick事件被激活则根据所述图像地址序列和所述第一、第二、第三图像组件进行图像顺序播放处理，具体包括：
步骤51，若所述顺序播放组件的onclick事件被激活，则对所述图像地址序列的所述图像地址的数量进行统计生成对应的第一数量n；并初始化当前索引i为1，初始化前一索引ip为所述第一数量n，初始化后一索引ia为(i+1)；
步骤52，将所述图像地址序列中索引位置与所述前一索引ip匹配的所述图像地址作为前帧图像地址，索引位置与所述当前索引i匹配的所述图像地址作为当前帧图像地址，索引位置与所述后一索引ia匹配的所述图像地址作为后帧图像地址；并设置所述第一图像组件的所述原图地址为所述前帧图像地址，设置所述第二图像组件的所述原图地址为所述当前帧图像地址，设置所述第三图像组件的所述原图地址为所述后帧图像地址；
步骤53，设置所述第二图像组件的所述重叠索引大于所述第一、第三图像组件的所述重叠索引，使所述第二图像组件的所述原图地址对应的图像在浏览器的显示页面上可见，并记录当前时刻的系统时间作为第一时间；并对实时系统时间与所述第一时间的时差是否超过预设的帧间时长进行持续判断，一旦时差超过所述帧间时长则转至步骤54；
步骤54，将当前索引i加1,并对新的所述当前索引i进行识别；若所述当前索引i小于所述第一数量n，则将所述后一索引ia设为(i+1)，并转至步骤55；若所述当前索引i等于所述第一数量n，则将所述后一索引ia设为1，并转至步骤55；若所述当前索引i大于所述第一数量n，则转至步骤59；
步骤55，设置所述第三图像组件的所述重叠索引大于所述第一、第二图像组件的所述重叠索引，使所述第三图像组件的所述原图地址对应的图像在浏览器的显示页面上可见，并记录当前时刻的系统时间作为第二时间；并将所述图像地址序列中索引位置与所述后一索引ia匹配的所述图像地址作为新的所述后帧图像地址，并设置所述第一图像组件的所述原图地址为新的所述后帧图像地址；并对实时系统时间与所述第二时间的时差是否超过所述帧间时长进行持续判断，一旦时差超过所述帧间时长则转至步骤56；
步骤56，将当前索引i加1,并对新的所述当前索引i进行识别；若所述当前索引i小于所述第一数量n，则将所述后一索引ia设为(i+1)，并转至步骤57；若所述当前索引i等于所述第一数量n，则将所述后一索引ia设为1，并转至步骤57；若所述当前索引i大于所述第一数量n，则转至步骤59；
步骤57，设置所述第一图像组件的所述重叠索引大于所述第二、第三图像组件的所述重叠索引，使所述第一图像组件的所述原图地址对应的图像在浏览器的显示页面上可见，并记录当前时刻的系统时间记为第三时间；并将所述图像地址序列中索引位置与所述后一索引ia匹配的所述图像地址作为新的所述后帧图像地址；并设置所述第二图像组件的所述原图地址为新的所述后帧图像地址；并对实时系统时间与所述第三时间的时差是否超过所述帧间时长进行持续判断，一旦时差超过所述帧间时长则转至步骤58；
步骤58，将当前索引i加1,并对新的所述当前索引i进行识别；若所述当前索引i小于所述第一数量n，则将所述后一索引ia设为(i+1)，并转至步骤53；若所述当前索引i等于所述第一数量n，则将所述后一索引ia设为1，并转至步骤53；若所述当前索引i大于所述第一数量n，则转至步骤59；
步骤59，结束所述图像顺序播放处理并退出。
优选的，所述若所述倒序回放组件的onclick事件被激活则根据所述图像地址序列和所述第一、第二、第三图像组件进行图像倒序回放处理，具体包括：
步骤61，若所述倒序回放组件的onclick事件被激活，则对所述图像地址序列的所述图像地址的数量进行统计生成对应的第一数量n；并初始化当前索引j为所述第一数量n，初始化前一索引jp为所述1，初始化后一索引ja为(j-1)；
步骤62，将所述图像地址序列中索引位置与所述前一索引jp匹配的所述图像地址作为前帧图像地址，索引位置与所述当前索引j匹配的所述图像地址作为当前帧图像地址，索引位置与所述后一索引ja匹配的所述图像地址作为后帧图像地址；并设置所述第一图像组件的所述原图地址为所述前帧图像地址，设置所述第二图像组件的所述原图地址为所述当前帧图像地址，设置所述第三图像组件的所述原图地址为所述后帧图像地址；
步骤63，设置所述第二图像组件的所述重叠索引大于所述第一、第三图像组件的所述重叠索引，使所述第二图像组件的所述原图地址对应的图像在浏览器的显示页面上可见，并记录当前时刻的系统时间作为第四时间；并对实时系统时间与所述第四时间的时差是否超过预设的帧间时长进行持续判断，一旦时差超过所述帧间时长则转至步骤64；
步骤64，将当前索引j减1,并对新的所述当前索引j进行识别；若所述当前索引j大于1，则将所述后一索引ja设为(j-1)，并转至步骤65；若所述当前索引j等于1，则将所述后一索引ja设为所述第一数量n，并转至步骤65；若所述当前索引j小于1，则转至步骤69；
步骤65，设置所述第三图像组件的所述重叠索引大于所述第一、第二图像组件的所述重叠索引，使所述第三图像组件的所述原图地址对应的图像在浏览器的显示页面上可见，并记录当前时刻的系统时间作为第五时间；并将所述图像地址序列中索引位置与所述后一索引ja匹配的所述图像地址作为新的所述后帧图像地址，并设置所述第一图像组件的所述原图地址为新的所述后帧图像地址；并对实时系统时间与所述第五时间的时差是否超过所述帧间时长进行持续判断，一旦时差超过所述帧间时长则转至步骤66；
步骤66，将当前索引j减1,并对新的所述当前索引j进行识别；若所述当前索引j大于1，则将所述后一索引ja设为(j-1)，并转至步骤67；若所述当前索引j等于1，则将所述后一索引ja设为所述第一数量n，并转至步骤67；若所述当前索引j小于1，则转至步骤69；
步骤67，设置所述第一图像组件的所述重叠索引大于所述第二、第三图像组件的所述重叠索引，使所述第一图像组件的所述原图地址对应的图像在浏览器的显示页面上可见，并记录当前时刻的系统时间记为第六时间；并将所述图像地址序列中索引位置与所述后一索引ja匹配的所述图像地址作为新的所述后帧图像地址；并设置所述第二图像组件的所述原图地址为新的所述后帧图像地址；并对实时系统时间与所述第六时间的时差是否超过所述帧间时长进行持续判断，一旦时差超过所述帧间时长则转至步骤68；
步骤68，将当前索引j减1,并对新的所述当前索引j进行识别；若所述当前索引j大于1，则将所述后一索引ja设为(j-1)，并转至步骤63；若所述当前索引j等于1，则将所述后一索引ja设为所述第一数量n，并转至步骤63；若所述当前索引j小于1，则转至步骤69；
步骤69，结束所述图像倒序回放处理并退出。
本发明实施例第二方面提供了一种电子设备，包括：存储器、处理器和收发器；
所述处理器用于与所述存储器耦合，读取并执行所述存储器中的指令，以实现上述第一方面所述的方法步骤；
所述收发器与所述处理器耦合，由所述处理器控制所述收发器进行消息收发。
本发明实施例第三方面提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机指令，当所述计算机指令被计算机执行时，使得所述计算机执行上述第一方面所述的方法的指令。
本发明实施例提供了一种图像播放处理方法、电子设备及计算机可读存储介质，在显示页面上构建3个完全重叠的img对象；并在进行图像顺序播放或图像倒序回放时循环利用这3个img对象中的2个对象作为当前帧图像和下一帧图像的加载主体；并基于浏览器将z-index值较大的页面元素叠加(覆盖)在z-index值较小的页面元素之上的工作原理，在帧间切换时通过修改img对象的z-index属性值即可实现从当前帧图像到下一帧图像的快速切换。通过本发明，解决了常规方案中帧间黑屏的问题，提高了图片播放的流畅度和稳定性。
附图说明
图1为本发明实施例一提供的一种图像播放处理方法示意图；
图2为本发明实施例二提供的一种电子设备的结构示意图。
具体实施方式
为了使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明作进一步地详细描述，显然，所描述的实施例仅仅是本发明一部份实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。
本发明实施例一提供一种图像播放处理方法，如图1为本发明实施例一提供的一种图像播放处理方法示意图所示，本方法主要包括如下步骤：
步骤1，浏览器载入图像播放页面的可执行脚本文件；
其中，可执行脚本文件支持超文本标记语言(Hyper Text Markup Language，HTML)、JavaScript语言和动态服务器页面(Active Server Pages，ASP)语言；可执行脚本文件中包括组件设置代码部分和组件事件响应代码部分；
组件设置代码部分中，设置三个图像img对象分别对应第一、第二、第三图像组件，并将三个图像img对象的绝对位置设为一致、高度设为一致为组件高度H、宽度设为一致为组件宽度W，从而实现第一、第二、第三图像组件的完全重叠；设置一个支持多文件选择的具体为文件file类型的输入input对象对应文件输入组件；设置两个具体为按钮button类型的输入input对象分别对应顺序播放组件和倒序回放组件。
这里，可执行脚本文件就是对应图像播放页面的HTML格式、JavaScript格式或ASP格式的网页源文件，其中HTML格式文件中也可嵌入JavaScript脚本；该文件中的脚本代码可被浏览器解析执行。可执行脚本文件中包括组件设置代码部分和组件事件响应代码部分，组件设置代码部分类似常规网页源文件中的对象设置代码部分，组件事件响应代码部分则类似常规网页源文件中的对象事件对应的函数代码部分。本发明实施例可执行脚本文件的组件设置代码部分具体用于对3个img对象(第一、第二、第三图像组件)、1个type＝“file”的input对象(文件输入组件)、2个type＝“button”的input对象(顺序播放组件和倒序回放组件)进行设置；通过设置3个img对象的绝对位置position属性、高度height属性、宽度width属性、z-index属性，确保第一、第二、第三图像组件的大小一致并完全重叠；通过设置1个input对象的类型type属性为“file”，多选multiple属性为"multiple"，来确保文件输入组件可以选择多个图像文件；通过设置2个input对象的类型type属性为“button”，来提供2个可以激活顺序播放和倒序回放的组件(顺序播放组件和倒序回放组件)。本发明实施例可执行脚本文件的组件事件响应代码部分具体用于存放文件输入组件的onchange事件响应处理代码，顺序播放组件的onclick事件响应处理代码，倒序回放组件的onclick事件响应处理代码，并将文件输入组件的onchange事件与onchange事件响应处理代码关联，将顺序播放组件的onclick事件与对应的onclick事件响应处理代码关联，将倒序回放组件的onclick事件与对应的onclick事件响应处理代码关联；其中，文件输入组件的onchange事件响应处理代码用于实现后续步骤3中对待播放的多个图像文件进行选择从而得到对应的图像地址序列的处理流程，顺序播放组件的onclick事件响应处理代码用于实现后续步骤3中根据图像地址序列和第一、第二、第三图像组件进行图像顺序播放的处理流程，倒序回放组件的onclick事件响应处理代码用于实现后续步骤3中根据图像地址序列和第一、第二、第三图像组件进行图像倒序回放的处理流程。
步骤2，解析组件设置代码部分，在浏览器的显示页面上创建三个位置完全重叠的用于加载图像的第一、第二、第三图像组件，创建一个用于选择多个文件的文件输入组件，创建一个用于启动图像顺序播放的顺序播放组件，创建一个用于启动图像倒序回放的倒序回放组件；
其中，第一、第二、第三图像组件的高度相同都为预设的组件高度H，宽度相同都为预设的组件宽度W；第一、第二、第三图像组件分别对应一个原图地址和一个重叠索引；第一、第二或第三图像组件的原图地址对应图像img对象的src属性，第一、第二或第三图像组件的重叠索引对应图像img对象的z-index属性；第一、第二、第三图像组件中，只有重叠索引为最大值的那个图像组件的原图地址对应的图像在浏览器的显示页面上可见。
这里，浏览器对上述组件设置代码部分进行解析之后，可在浏览器的显示页面上显示出一个用于选择多个文件的文件输入组件，一个用于启动图像顺序播放的顺序播放组件，一个用于启动图像倒序回放的倒序回放组件；对于第一、第二、第三图像组件，在显示页面上只可见重叠索引(z-index属性)为最大值的那个图像组件，其余两个图像组件被这个最大重叠索引的图像组件覆盖了。
步骤3，解析组件事件响应代码部分，对文件输入组件的onchange事件进行侦听，若文件输入组件的onchange事件被激活则对待播放的多个图像文件进行选择从而得到对应的图像地址序列；并对顺序播放组件的onclick事件进行侦听，若顺序播放组件的onclick事件被激活则根据图像地址序列和第一、第二、第三图像组件进行图像顺序播放处理；并对倒序回放组件的onclick事件进行侦听，若倒序回放组件的onclick事件被激活则根据图像地址序列和第一、第二、第三图像组件进行图像倒序回放处理；
这里，通过前述步骤2完成网页显示之后，用户可通过点击文件输入组件进行多个图像文件选择从而得到图像地址序列；在得到图像地址序列之后用户可点击顺序播放组件对该图像地址序列对应的多个图像文件进行连续播放，播放时帧间间隔为设定的帧间时长；另外，在得到图像地址序列之后用户还可点击倒序回放组件对该图像地址序列对应的多个图像文件进行倒序回放，播放时帧间间隔同样为设定的帧间时长；
具体包括：步骤31，对文件输入组件的onchange事件进行侦听，若文件输入组件的onchange事件被激活则对待播放的多个图像文件进行选择从而得到对应的图像地址序列；
具体包括：若文件输入组件的onchange事件被激活，则向用户显示文件选择窗口；并在用户于文件选择窗口内完成多个图像文件选择并确认提交时，对用户提交的所有选中文件的文件地址与文件时间进行获取；并将各个文件地址作为对应的图像地址，并按对应的文件时间的先后顺序对所有图像地址进行排序生成对应的图像地址序列；图像地址序列中图像地址的数量默认大于3；
这里，当前步骤31是前文中提及的onchange事件响应处理代码的处理内容；步骤中提及的图像地址的数据格式为统一资源定位系统(uniform resource locator，URL)格式也就是常说的网址格式；需要强调是，此处通过文件输入组件获得的仅仅是图像文件的地址而不是图像文件本身；因为图像地址序列将会被用于连续播放或倒序回放，若其中的图像地址太少则基本没有播放的意义，所以此处强调图像地址序列中图像地址的数量默认大于3；
步骤32，对顺序播放组件的onclick事件进行侦听，若顺序播放组件的onclick事件被激活则根据图像地址序列和第一、第二、第三图像组件进行图像顺序播放处理；
这里，当前步骤32是前文中提及的顺序播放组件的onclick事件响应处理代码的处理内容；
具体包括：步骤321，若顺序播放组件的onclick事件被激活，则对图像地址序列的图像地址的数量进行统计生成对应的第一数量n；并初始化当前索引i为1，初始化前一索引ip为第一数量n，初始化后一索引ia为(i+1)；
例如，图像地址序列中有3个图像地址分别为图像地址1、2、3，则第一数量n＝3，当前索引i＝1，前一索引ip＝n＝3，后一索引ia＝(i+1)＝2；
步骤322，将图像地址序列中索引位置与前一索引ip匹配的图像地址作为前帧图像地址，索引位置与当前索引i匹配的图像地址作为当前帧图像地址，索引位置与后一索引ia匹配的图像地址作为后帧图像地址；并设置第一图像组件的原图地址为前帧图像地址，设置第二图像组件的原图地址为当前帧图像地址，设置第三图像组件的原图地址为后帧图像地址；
例如，图像地址序列中有图像地址1、2、3，n＝3，当前索引i＝1，前一索引ip＝3，后一索引ia＝2；那么，前帧图像地址为图像地址序列中索引位置与ip＝3匹配的图像地址即图像地址3，当前帧图像地址为图像地址序列中索引位置与i＝1匹配的图像地址即图像地址1，后帧图像地址为图像地址序列中索引位置与ia＝2匹配的图像地址即图像地址2；对第一、第二、第三图像组件的原图地址完成设置后，第一图像组件的原图地址＝图像地址3，第二图像组件的原图地址＝图像地址1，第三图像组件的原图地址＝图像地址2；
需要说明的是，根据浏览器的工作原理，一旦第一、第二、第三图像组件的原图地址(src属性)发生了改变就会立即根据新设置的原图地址获取对应的图像，并在第一、第二、第三图像组件的页面位置上对各自获得的图像进行显示；因为第一、第二、第三图像组件完全重叠，那么能被用户看见的也就是第一、第二、第三图像组件中重叠索引(z-index属性)为最大值的那个；
步骤323，设置第二图像组件的重叠索引大于第一、第三图像组件的重叠索引，使第二图像组件的原图地址对应的图像在浏览器的显示页面上可见，并记录当前时刻的系统时间作为第一时间；并对实时系统时间与第一时间的时差是否超过预设的帧间时长进行持续判断，一旦时差超过帧间时长则转至步骤324；
例如，设帧间时长为△t，第一图像组件的原图地址＝图像地址3，第二图像组件的原图地址＝图像地址1，第三图像组件的原图地址＝图像地址2；那么，设置第二图像组件的重叠索引大于第一、第三图像组件的重叠索引之后就可用第二图像组件覆盖第一、第三图像组件，这样从第一时间起在浏览器的显示页面上显示的就是图像地址1；设第一时间为t1，那么在t1到t1+△t之间，本发明实施例只会对实时系统时间与第一时间的时差是否超过预设的帧间时长进行持续判断并不会继续后续步骤，直到时差超过△t才会转入执行后续步骤324；
需要说明的是，帧间时长△t的设定方式有多种，其中一种是基于定制的播放频率进行设定：帧间时长＝int(1000/播放频率)，int为取整函数，帧间时长的单位为毫秒，播放频率的单位为帧/秒；
步骤324，将当前索引i加1,并对新的当前索引i进行识别；若当前索引i小于第一数量n，则将后一索引ia设为(i+1)，并转至步骤325；若当前索引i等于第一数量n，则将后一索引ia设为1，并转至步骤325；若当前索引i大于第一数量n，则转至步骤329；
例如，第一数量n＝3，当前索引i＝1，后一索引ia＝2；那么，将当前索引i加1之后新的当前索引i＝1+1＝2，因为2<3，所以后一索引ia＝(i+1)＝3；
步骤325，设置第三图像组件的重叠索引大于第一、第二图像组件的重叠索引，使第三图像组件的原图地址对应的图像在浏览器的显示页面上可见，并记录当前时刻的系统时间作为第二时间；并将图像地址序列中索引位置与后一索引ia匹配的图像地址作为新的后帧图像地址，并设置第一图像组件的原图地址为新的后帧图像地址；并对实时系统时间与第二时间的时差是否超过帧间时长进行持续判断，一旦时差超过帧间时长则转至步骤326；
例如，已知第一图像组件的原图地址＝图像地址3，第二图像组件的原图地址＝图像地址1，第三图像组件的原图地址＝图像地址2；设置第三图像组件的重叠索引大于第一、第二图像组件的重叠索引之后就可用第三图像组件覆盖第一、第二图像组件，这样从第二时间起在浏览器的显示页面上显示的就是图像地址2；新的后帧图像地址为图像地址序列中索引位置与后一索引ia＝3匹配的图像地址3，那么第一图像组件的原图地址＝图像地址3；设第二时间为t2，那么在t2到t2+△t之间，本发明实施例只会对实时系统时间与第二时间的时差是否超过预设的帧间时长进行持续判断，并不会继续后续步骤，直到时差超过△t才会转入执行后续步骤326；
需要说明的是，这里，第二时间t2实际近似等于第一时间t1+帧间时长△t，即t2≈t1+△t；
步骤326，将当前索引i加1,并对新的当前索引i进行识别；若当前索引i小于第一数量n，则将后一索引ia设为(i+1)，并转至步骤327；若当前索引i等于第一数量n，则将后一索引ia设为1，并转至步骤327；若当前索引i大于第一数量n，则转至步骤329；
例如，第一数量n＝3，当前索引i＝2，后一索引ia＝3；那么，将当前索引i加1之后新的当前索引i＝2+1＝3，因为新的当前索引i等于第一数量n，所以后一索引ia＝1；
步骤327，设置第一图像组件的重叠索引大于第二、第三图像组件的重叠索引，使第一图像组件的原图地址对应的图像在浏览器的显示页面上可见，并记录当前时刻的系统时间记为第三时间；并将图像地址序列中索引位置与后一索引ia匹配的图像地址作为新的后帧图像地址；并设置第二图像组件的原图地址为新的后帧图像地址；并对实时系统时间与第三时间的时差是否超过帧间时长进行持续判断，一旦时差超过帧间时长则转至步骤328；
例如，已知第一图像组件的原图地址＝图像地址3，第二图像组件的原图地址＝图像地址1，第三图像组件的原图地址＝图像地址2；设置第一图像组件的重叠索引大于第二、第三图像组件的重叠索引之后就可用第一图像组件覆盖第二、第三图像组件，这样从第三时间起在浏览器的显示页面上显示的就是图像地址3；新的后帧图像地址为图像地址序列中索引位置与后一索引ia＝1匹配的图像地址1，那么第二图像组件的原图地址＝图像地址1；设第三时间为t3，那么在t3到t3+△t之间，本发明实施例只会对实时系统时间与第三时间的时差是否超过预设的帧间时长进行持续判断，并不会继续后续步骤，直到时差超过△t才会转入执行后续步骤328；
需要说明的是，这里，第三时间t3实际近似等于第二时间t2+帧间时长△t，即t3≈t2+△t；
步骤328，将当前索引i加1,并对新的当前索引i进行识别；若当前索引i小于第一数量n，则将后一索引ia设为(i+1)，并转至步骤323；若当前索引i等于第一数量n，则将后一索引ia设为1，并转至步骤323；若当前索引i大于第一数量n，则转至步骤329；
例如，第一数量n＝3，当前索引i＝3，后一索引ia＝1；那么，将当前索引i加1之后新的当前索引i＝3+1＝4，因为4>3，所以转至步骤329结束图像顺序播放处理并退出；
步骤329，结束图像顺序播放处理并退出；
步骤33，对倒序回放组件的onclick事件进行侦听，若倒序回放组件的onclick事件被激活则根据图像地址序列和第一、第二、第三图像组件进行图像倒序回放处理；
这里，当前步骤33是前文中提及的倒序回放组件的onclick事件响应处理代码的处理内容；
具体包括：步骤331，若倒序回放组件的onclick事件被激活，则对图像地址序列的图像地址的数量进行统计生成对应的第一数量n；并初始化当前索引j为第一数量n，初始化前一索引jp为1，初始化后一索引ja为(j-1)；
例如，图像地址序列中有3个图像地址分别为图像地址1、2、3，则第一数量n＝3，当前索引j＝3，前一索引jp＝1，后一索引ja＝(j-1)＝2；
步骤332，将图像地址序列中索引位置与前一索引jp匹配的图像地址作为前帧图像地址，索引位置与当前索引j匹配的图像地址作为当前帧图像地址，索引位置与后一索引ja匹配的图像地址作为后帧图像地址；并设置第一图像组件的原图地址为前帧图像地址，设置第二图像组件的原图地址为当前帧图像地址，设置第三图像组件的原图地址为后帧图像地址；
例如，图像地址序列中有图像地址1、2、3，n＝3，当前索引j＝3，前一索引jp＝1，后一索引ja＝2；那么，前帧图像地址为图像地址序列中索引位置与jp＝3匹配的图像地址即图像地址1，当前帧图像地址为图像地址序列中索引位置与j＝3匹配的图像地址即图像地址3，后帧图像地址为图像地址序列中索引位置与ja＝2匹配的图像地址即图像地址2；对第一、第二、第三图像组件的原图地址完成设置后，第一图像组件的原图地址＝图像地址1，第二图像组件的原图地址＝图像地址3，第三图像组件的原图地址＝图像地址2；
步骤333，设置第二图像组件的重叠索引大于第一、第三图像组件的重叠索引，使第二图像组件的原图地址对应的图像在浏览器的显示页面上可见，并记录当前时刻的系统时间作为第四时间；并对实时系统时间与第四时间的时差是否超过预设的帧间时长进行持续判断，一旦时差超过帧间时长则转至步骤334；
例如，设帧间时长为△t，第一图像组件的原图地址＝图像地址1，第二图像组件的原图地址＝图像地址3，第三图像组件的原图地址＝图像地址2；那么，设置第二图像组件的重叠索引大于第一、第三图像组件的重叠索引之后就可用第二图像组件覆盖第一、第三图像组件，这样从第一时间起在浏览器的显示页面上显示的就是图像地址3；设第四时间为t4，那么在t4到t4+△t之间，本发明实施例只会对实时系统时间与第四时间的时差是否超过预设的帧间时长进行持续判断，并不会继续后续步骤，直到时差超过△t才会转入执行后续步骤334；
步骤334，将当前索引j减1,并对新的当前索引j进行识别；若当前索引j大于1，则将后一索引ja设为(j-1)，并转至步骤335；若当前索引j等于1，则将后一索引ja设为第一数量n，并转至步骤335；若当前索引j小于1，则转至步骤339；
例如，第一数量n＝3，当前索引j＝3，后一索引ja＝2；那么，将当前索引j减1之后新的当前索引j＝3-1＝2，因为2>1，所以后一索引ja＝(j-1)＝1；
步骤335，设置第三图像组件的重叠索引大于第一、第二图像组件的重叠索引，使第三图像组件的原图地址对应的图像在浏览器的显示页面上可见，并记录当前时刻的系统时间作为第五时间；并将图像地址序列中索引位置与后一索引ja匹配的图像地址作为新的后帧图像地址，并设置第一图像组件的原图地址为新的后帧图像地址；并对实时系统时间与第五时间的时差是否超过帧间时长进行持续判断，一旦时差超过帧间时长则转至步骤336；
例如，已知第一图像组件的原图地址＝图像地址1，第二图像组件的原图地址＝图像地址3，第三图像组件的原图地址＝图像地址2；设置第三图像组件的重叠索引大于第一、第二图像组件的重叠索引之后就可用第三图像组件覆盖第一、第二图像组件，这样从第五时间起在浏览器的显示页面上显示的就是图像地址2；新的后帧图像地址为图像地址序列中索引位置与后一索引ja＝1匹配的图像地址1，那么第一图像组件的原图地址＝图像地址1；设第五时间为t5，那么在t5到t5+△t之间，本发明实施例只会对实时系统时间与第五时间的时差是否超过预设的帧间时长进行持续判断，并不会继续后续步骤，直到时差超过△t才会转入执行后续步骤336；
需要说明的是，这里，第五时间t5实际近似等于第四时间t4+帧间时长△t，即t5≈t4+△t；
步骤336，将当前索引j减1,并对新的当前索引j进行识别；若当前索引j大于1，则将后一索引ja设为(j-1)，并转至步骤337；若当前索引j等于1，则将后一索引ja设为第一数量n，并转至步骤337；若当前索引j小于1，则转至步骤339；
例如，第一数量n＝3，当前索引j＝2，后一索引ja＝1；那么，将当前索引j减1之后新的当前索引j＝2-1＝1，因为当前索引j等于1，所以后一索引ja＝n＝3；
步骤337，设置第一图像组件的重叠索引大于第二、第三图像组件的重叠索引，使第一图像组件的原图地址对应的图像在浏览器的显示页面上可见，并记录当前时刻的系统时间记为第六时间；并将图像地址序列中索引位置与后一索引ja匹配的图像地址作为新的后帧图像地址；并设置第二图像组件的原图地址为新的后帧图像地址；并对实时系统时间与第六时间的时差是否超过帧间时长进行持续判断，一旦时差超过帧间时长则转至步骤338；
例如，已知第一图像组件的原图地址＝图像地址1，第二图像组件的原图地址＝图像地址3，第三图像组件的原图地址＝图像地址2；设置第一图像组件的重叠索引大于第二、第三图像组件的重叠索引之后就可用第一图像组件覆盖第二、第三图像组件，这样从第六时间起在浏览器的显示页面上显示的就是图像地址1；新的后帧图像地址为图像地址序列中索引位置与后一索引ia＝3匹配的图像地址3，那么第二图像组件的原图地址＝图像地址3；设第六时间为t6，那么在t6到t6+△t之间，本发明实施例只会对实时系统时间与第六时间的时差是否超过预设的帧间时长进行持续判断，并不会继续后续步骤，直到时差超过△t才会转入执行后续步骤338；
需要说明的是，这里，第六时间t6实际近似等于第五时间t5+帧间时长△t，即t6≈t5+△t；
步骤338，将当前索引j减1,并对新的当前索引j进行识别；若当前索引j大于1，则将后一索引ja设为(j-1)，并转至步骤333；若当前索引j等于1，则将后一索引ja设为第一数量n，并转至步骤333；若当前索引j小于1，则转至步骤339；
例如，第一数量n＝3，当前索引j＝1，后一索引ja＝3；那么，将当前索引j减1之后新的当前索引j＝1-1＝0，因为0<1，所以转至步骤339结束图像倒序回放处理并退出；
步骤339，结束图像倒序回放处理并退出。
图2为本发明实施例二提供的一种电子设备的结构示意图。该电子设备可以为前述的终端设备或者服务器，也可以为与前述终端设备或者服务器连接的实现本发明实施例方法的终端设备或服务器。如图2所示，该电子设备可以包括：处理器301(例如CPU)、存储器302、收发器303；收发器303耦合至处理器301，处理器301控制收发器303的收发动作。存储器302中可以存储各种指令，以用于完成各种处理功能以及实现前述方法实施例描述的处理步骤。优选的，本发明实施例涉及的电子设备还包括：电源304、系统总线305以及通信端口306。系统总线305用于实现元件之间的通信连接。上述通信端口306用于电子设备与其他外设之间进行连接通信。
在图2中提到的系统总线305可以是外设部件互连标准(Peripheral ComponentInterconnect，PCI)总线或扩展工业标准结构(Extended Industry StandardArchitecture，EISA)总线等。该系统总线可以分为地址总线、数据总线、控制总线等。为便于表示，图2中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。通信接口用于实现数据库访问装置与其他设备(例如客户端、读写库和只读库)之间的通信。存储器可能包含随机存取存储器(Random Access Memory，RAM)，也可能还包括非易失性存储器(Non-Volatile Memory)，例如至少一个磁盘存储器。
上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(Network Processor，NP)、图形处理器(Graphics Processing Unit，GPU)等；还可以是数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(FieldProgrammable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
需要说明的是，本发明实施例还提供一种计算机可读存储介质，该计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述实施例中提供的方法和处理过程。
本发明实施例还提供一种运行指令的芯片，该芯片用于执行前述方法实施例描述的处理步骤。
本发明实施例提供了一种图像播放处理方法、电子设备及计算机可读存储介质，在显示页面上构建3个完全重叠的img对象；并在进行图像顺序播放或图像倒序回放时循环利用这3个img对象中的2个对象作为当前帧图像和下一帧图像的加载主体；并基于浏览器将z-index值较大的页面元素叠加(覆盖)在z-index值较小的页面元素之上的工作原理，在帧间切换时通过修改img对象的z-index属性值即可实现从当前帧图像到下一帧图像的快速切换。通过本发明，解决了常规方案中帧间黑屏的问题，提高了图片播放的流畅度和稳定性。
专业人员应该还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。
结合本文中所公开的实施例描述的方法或算法的步骤可以用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。
以上所述的具体实施方式，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本发明的具体实施方式而已，并不用于限定本发明的保护范围，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
Claims (8)
1.一种图像播放处理方法，其特征在于，所述方法包括：
浏览器载入图像播放页面的可执行脚本文件；所述可执行脚本文件中包括组件设置代码部分和组件事件响应代码部分；
解析所述组件设置代码部分，在浏览器的显示页面上创建三个位置完全重叠的用于加载图像的第一、第二、第三图像组件，创建一个用于选择多个文件的文件输入组件，创建一个用于启动图像顺序播放的顺序播放组件，创建一个用于启动图像倒序回放的倒序回放组件；所述第一、第二、第三图像组件的高度相同都为预设的组件高度H，宽度相同都为预设的组件宽度W；所述第一、第二、第三图像组件分别对应一个原图地址和一个重叠索引；所述第一、第二、第三图像组件中，只有所述重叠索引为最大值的那个图像组件的所述原图地址对应的图像在浏览器的显示页面上可见；
解析所述组件事件响应代码部分，对所述文件输入组件的onchange事件进行侦听，若所述文件输入组件的onchange事件被激活则对待播放的多个图像文件进行选择从而得到对应的图像地址序列；并对所述顺序播放组件的onclick事件进行侦听，若所述顺序播放组件的onclick事件被激活则根据所述图像地址序列和所述第一、第二、第三图像组件进行图像顺序播放处理；并对所述倒序回放组件的onclick事件进行侦听，若所述倒序回放组件的onclick事件被激活则根据所述图像地址序列和所述第一、第二、第三图像组件进行图像倒序回放处理。
2.根据权利要求1所述的图像播放处理方法，其特征在于，
所述可执行脚本文件支持超文本标记语言HTML、JavaScript语言和动态服务器页面ASP语言。
3.根据权利要求1所述的图像播放处理方法，其特征在于，
所述组件设置代码部分中，设置三个图像img对象分别对应所述第一、第二、第三图像组件，并将所述三个图像img对象的绝对位置设为一致、高度设为一致为所述组件高度H、宽度设为一致为所述组件宽度W，从而实现所述第一、第二、第三图像组件的完全重叠；设置一个支持多文件选择的具体为文件file类型的输入input对象对应所述文件输入组件；设置两个具体为按钮button类型的输入input对象分别对应所述顺序播放组件和所述倒序回放组件；
所述第一、第二或第三图像组件的所述原图地址对应图像img对象的src属性，所述第一、第二或第三图像组件的所述重叠索引对应图像img对象的z-index属性。
4.根据权利要求1所述的图像播放处理方法，其特征在于，所述若所述文件输入组件的onchange事件被激活则对待播放的多个图像文件进行选择从而得到对应的图像地址序列，具体包括：
若所述文件输入组件的onchange事件被激活，则向用户显示文件选择窗口；并在用户于所述文件选择窗口内完成多个图像文件选择并确认提交时，对用户提交的所有选中文件的文件地址与文件时间进行获取；并将各个文件地址作为对应的所述图像地址，并按对应的所述文件时间的先后顺序对所有所述图像地址进行排序生成对应的所述图像地址序列；所述图像地址序列中所述图像地址的数量默认大于3。
5.根据权利要求1所述的图像播放处理方法，其特征在于，所述若所述顺序播放组件的onclick事件被激活则根据所述图像地址序列和所述第一、第二、第三图像组件进行图像顺序播放处理，具体包括：
步骤51，若所述顺序播放组件的onclick事件被激活，则对所述图像地址序列的所述图像地址的数量进行统计生成对应的第一数量n；并初始化当前索引i为1，初始化前一索引ip为所述第一数量n，初始化后一索引ia为(i+1)；
步骤52，将所述图像地址序列中索引位置与所述前一索引ip匹配的所述图像地址作为前帧图像地址，索引位置与所述当前索引i匹配的所述图像地址作为当前帧图像地址，索引位置与所述后一索引ia匹配的所述图像地址作为后帧图像地址；并设置所述第一图像组件的所述原图地址为所述前帧图像地址，设置所述第二图像组件的所述原图地址为所述当前帧图像地址，设置所述第三图像组件的所述原图地址为所述后帧图像地址；
步骤53，设置所述第二图像组件的所述重叠索引大于所述第一、第三图像组件的所述重叠索引，使所述第二图像组件的所述原图地址对应的图像在浏览器的显示页面上可见，并记录当前时刻的系统时间作为第一时间；并对实时系统时间与所述第一时间的时差是否超过预设的帧间时长进行持续判断，一旦时差超过所述帧间时长则转至步骤54；
步骤54，将当前索引i加1,并对新的所述当前索引i进行识别；若所述当前索引i小于所述第一数量n，则将所述后一索引ia设为(i+1)，并转至步骤55；若所述当前索引i等于所述第一数量n，则将所述后一索引ia设为1，并转至步骤55；若所述当前索引i大于所述第一数量n，则转至步骤59；
步骤55，设置所述第三图像组件的所述重叠索引大于所述第一、第二图像组件的所述重叠索引，使所述第三图像组件的所述原图地址对应的图像在浏览器的显示页面上可见，并记录当前时刻的系统时间作为第二时间；并将所述图像地址序列中索引位置与所述后一索引ia匹配的所述图像地址作为新的所述后帧图像地址，并设置所述第一图像组件的所述原图地址为新的所述后帧图像地址；并对实时系统时间与所述第二时间的时差是否超过所述帧间时长进行持续判断，一旦时差超过所述帧间时长则转至步骤56；
步骤56，将当前索引i加1,并对新的所述当前索引i进行识别；若所述当前索引i小于所述第一数量n，则将所述后一索引ia设为(i+1)，并转至步骤57；若所述当前索引i等于所述第一数量n，则将所述后一索引ia设为1，并转至步骤57；若所述当前索引i大于所述第一数量n，则转至步骤59；
步骤57，设置所述第一图像组件的所述重叠索引大于所述第二、第三图像组件的所述重叠索引，使所述第一图像组件的所述原图地址对应的图像在浏览器的显示页面上可见，并记录当前时刻的系统时间记为第三时间；并将所述图像地址序列中索引位置与所述后一索引ia匹配的所述图像地址作为新的所述后帧图像地址；并设置所述第二图像组件的所述原图地址为新的所述后帧图像地址；并对实时系统时间与所述第三时间的时差是否超过所述帧间时长进行持续判断，一旦时差超过所述帧间时长则转至步骤58；
步骤58，将当前索引i加1,并对新的所述当前索引i进行识别；若所述当前索引i小于所述第一数量n，则将所述后一索引ia设为(i+1)，并转至步骤53；若所述当前索引i等于所述第一数量n，则将所述后一索引ia设为1，并转至步骤53；若所述当前索引i大于所述第一数量n，则转至步骤59；
步骤59，结束所述图像顺序播放处理并退出。
6.根据权利要求1所述的图像播放处理方法，其特征在于，所述若所述倒序回放组件的onclick事件被激活则根据所述图像地址序列和所述第一、第二、第三图像组件进行图像倒序回放处理，具体包括：
步骤61，若所述倒序回放组件的onclick事件被激活，则对所述图像地址序列的所述图像地址的数量进行统计生成对应的第一数量n；并初始化当前索引j为所述第一数量n，初始化前一索引jp为所述1，初始化后一索引ja为(j-1)；
步骤62，将所述图像地址序列中索引位置与所述前一索引jp匹配的所述图像地址作为前帧图像地址，索引位置与所述当前索引j匹配的所述图像地址作为当前帧图像地址，索引位置与所述后一索引ja匹配的所述图像地址作为后帧图像地址；并设置所述第一图像组件的所述原图地址为所述前帧图像地址，设置所述第二图像组件的所述原图地址为所述当前帧图像地址，设置所述第三图像组件的所述原图地址为所述后帧图像地址；
步骤63，设置所述第二图像组件的所述重叠索引大于所述第一、第三图像组件的所述重叠索引，使所述第二图像组件的所述原图地址对应的图像在浏览器的显示页面上可见，并记录当前时刻的系统时间作为第四时间；并对实时系统时间与所述第四时间的时差是否超过预设的帧间时长进行持续判断，一旦时差超过所述帧间时长则转至步骤64；
步骤64，将当前索引j减1,并对新的所述当前索引j进行识别；若所述当前索引j大于1，则将所述后一索引ja设为(j-1)，并转至步骤65；若所述当前索引j等于1，则将所述后一索引ja设为所述第一数量n，并转至步骤65；若所述当前索引j小于1，则转至步骤69；
步骤65，设置所述第三图像组件的所述重叠索引大于所述第一、第二图像组件的所述重叠索引，使所述第三图像组件的所述原图地址对应的图像在浏览器的显示页面上可见，并记录当前时刻的系统时间作为第五时间；并将所述图像地址序列中索引位置与所述后一索引ja匹配的所述图像地址作为新的所述后帧图像地址，并设置所述第一图像组件的所述原图地址为新的所述后帧图像地址；并对实时系统时间与所述第五时间的时差是否超过所述帧间时长进行持续判断，一旦时差超过所述帧间时长则转至步骤66；
步骤66，将当前索引j减1,并对新的所述当前索引j进行识别；若所述当前索引j大于1，则将所述后一索引ja设为(j-1)，并转至步骤67；若所述当前索引j等于1，则将所述后一索引ja设为所述第一数量n，并转至步骤67；若所述当前索引j小于1，则转至步骤69；
步骤67，设置所述第一图像组件的所述重叠索引大于所述第二、第三图像组件的所述重叠索引，使所述第一图像组件的所述原图地址对应的图像在浏览器的显示页面上可见，并记录当前时刻的系统时间记为第六时间；并将所述图像地址序列中索引位置与所述后一索引ja匹配的所述图像地址作为新的所述后帧图像地址；并设置所述第二图像组件的所述原图地址为新的所述后帧图像地址；并对实时系统时间与所述第六时间的时差是否超过所述帧间时长进行持续判断，一旦时差超过所述帧间时长则转至步骤68；
步骤68，将当前索引j减1,并对新的所述当前索引j进行识别；若所述当前索引j大于1，则将所述后一索引ja设为(j-1)，并转至步骤63；若所述当前索引j等于1，则将所述后一索引ja设为所述第一数量n，并转至步骤63；若所述当前索引j小于1，则转至步骤69；
步骤69，结束所述图像倒序回放处理并退出。
7.一种电子设备，其特征在于，包括：存储器、处理器和收发器；
所述处理器用于与所述存储器耦合，读取并执行所述存储器中的指令，以实现权利要求1-6任一项所述的方法步骤；
所述收发器与所述处理器耦合，由所述处理器控制所述收发器进行消息收发。
8.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机指令，当所述计算机指令被计算机执行时，使得所述计算机执行权利要求1-6任一项所述的方法的指令。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210515953.6A CN114880613B (zh) | 2022-05-12 | 2022-05-12 | 一种图像播放处理方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210515953.6A CN114880613B (zh) | 2022-05-12 | 2022-05-12 | 一种图像播放处理方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN114880613A CN114880613A (zh) | 2022-08-09 |
| CN114880613B true CN114880613B (zh) | 2024-03-22 |
Family
ID=82675455
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210515953.6A Active CN114880613B (zh) | 2022-05-12 | 2022-05-12 | 一种图像播放处理方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114880613B (zh) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102142016A (zh) * | 2010-01-29 | 2011-08-03 | 微软公司 | 跨浏览器交互活动记录、回放以及编辑 |
| US10083159B1 (en) * | 2016-07-13 | 2018-09-25 | Screen Share Technology Ltd. | Method for recording, editing and reproduction of web browser session |
| CN110377500A (zh) * | 2019-06-14 | 2019-10-25 | 平安科技（深圳）有限公司 | 网站页面的测试方法、装置、终端设备及介质 |
| CN110647703A (zh) * | 2019-09-18 | 2020-01-03 | 平安科技（深圳）有限公司 | 动画播放方法、装置、计算机设备和存储介质 |
| CN113553529A (zh) * | 2021-07-26 | 2021-10-26 | 平安养老保险股份有限公司 | 记录网页行为方法、装置、计算机设备及存储介质 |
-
2022
- 2022-05-12 CN CN202210515953.6A patent/CN114880613B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102142016A (zh) * | 2010-01-29 | 2011-08-03 | 微软公司 | 跨浏览器交互活动记录、回放以及编辑 |
| US10083159B1 (en) * | 2016-07-13 | 2018-09-25 | Screen Share Technology Ltd. | Method for recording, editing and reproduction of web browser session |
| CN110377500A (zh) * | 2019-06-14 | 2019-10-25 | 平安科技（深圳）有限公司 | 网站页面的测试方法、装置、终端设备及介质 |
| CN110647703A (zh) * | 2019-09-18 | 2020-01-03 | 平安科技（深圳）有限公司 | 动画播放方法、装置、计算机设备和存储介质 |
| CN113553529A (zh) * | 2021-07-26 | 2021-10-26 | 平安养老保险股份有限公司 | 记录网页行为方法、装置、计算机设备及存储介质 |
Non-Patent Citations (1)
| Title |
|---|
| 董东 ; 安素平 ; .Web应用中发布图像的几种途径.网络科技时代.2002,(第02期),全文. * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN114880613A (zh) | 2022-08-09 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11030392B2 (en) | Optimization for rendering web pages | |
| CN112770188B (zh) | 一种视频播放方法及装置 | |
| CN106776969A (zh) | 页面适配方法、装置及电子设备 | |
| CN107885645B (zh) | 计算页面首屏渲染时长的方法、装置及电子设备 | |
| CN107277615B (zh) | 直播风格化处理方法、装置、计算设备及存储介质 | |
| CN102929971B (zh) | 一种多媒体信息播放方法和系统 | |
| CN107105336B (zh) | 数据处理方法及数据处理装置 | |
| CN112087665B (zh) | 视频直播的预览方法、计算设备及计算机存储介质 | |
| CN107315682A (zh) | 测试浏览器兼容方法、装置、存储介质及电子设备 | |
| CN103258058B (zh) | 页面展现方法、系统及浏览器 | |
| CN113703893B (zh) | 一种页面渲染方法、装置、终端及存储介质 | |
| CN111737614B (zh) | 页面显示方法、装置、电子设备和存储介质 | |
| CN111708535A (zh) | 图文显示控制方法、装置及电子设备 | |
| CN110555179A (zh) | 一种动态网站脚本取证方法、终端设备及存储介质 | |
| CN111915705A (zh) | 图片可视化编辑方法、装置、设备和介质 | |
| US11800199B2 (en) | Video playing method and apparatus | |
| CN113688341B (zh) | 动态图片分解方法、装置、电子设备及可读存储介质 | |
| CN111131812A (zh) | 开播时间测试方法、装置及计算机可读存储介质 | |
| CN114385124A (zh) | 基于Vue框架的独立页面的跳转方法、装置及设备 | |
| CN114880613B (zh) | 一种图像播放处理方法 | |
| CN111428452B (zh) | 一种批注数据保存方法及装置 | |
| CN112569574B (zh) | 一种模型拆解方法、装置、电子设备及可读存储介质 | |
| CN111064979B (zh) | 一种网页直播方法、装置、网页终端和存储介质 | |
| CN112948737A (zh) | Html页面截图方法及系统 | |
| CN113127785A (zh) | 字幕处理方法、装置、计算机设备及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |