CN112019911A - 一种网页动画的显示方法、装置及电子设备 - Google Patents

一种网页动画的显示方法、装置及电子设备 Download PDF

Info

Publication number
CN112019911A
CN112019911A CN202010935850.6A CN202010935850A CN112019911A CN 112019911 A CN112019911 A CN 112019911A CN 202010935850 A CN202010935850 A CN 202010935850A CN 112019911 A CN112019911 A CN 112019911A
Authority
CN
China
Prior art keywords
video
animation
color
transparency
picture
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.)
Pending
Application number
CN202010935850.6A
Other languages
English (en)
Inventor
袁有财
刘鹏飞
李承均
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Lewo Wuxian Technology Co ltd
Original Assignee
Beijing Lewo Wuxian Technology Co ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Beijing Lewo Wuxian Technology Co ltd filed Critical Beijing Lewo Wuxian Technology Co ltd
Priority to CN202010935850.6A priority Critical patent/CN112019911A/zh
Publication of CN112019911A publication Critical patent/CN112019911A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/431—Generation of visual interfaces for content selection or interaction; Content or additional data rendering
    • H04N21/4312—Generation of visual interfaces for content selection or interaction; Content or additional data rendering involving specific graphical features, e.g. screen layout, special fonts or colors, blinking icons, highlights or animations
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/44—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs
    • H04N21/44016—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs involving splicing one content stream with another content stream, e.g. for substituting a video clip
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/478—Supplemental services, e.g. displaying phone caller identification, shopping application
    • H04N21/4782—Web browsing, e.g. WebTV

Landscapes

  • Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • Processing Or Creating Images (AREA)
  • User Interface Of Digital Computer (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明实施例提供了一种网页动画的显示方法、装置及电子设备，应用于网页显示技术领域，包括：向服务器发送针对网页动画的获取请求；接收服务器反馈的动画视频，其中，动画视频的视频帧包含：色彩区域和透明区域，色彩区域包括：获取请求所请求网页动画的图片序列中图片的色彩信息，透明区域包括：图片的透明度信息；基于动画视频中每一视频帧包含的透明区域，展示每一视频帧包含的色彩区域。采用本发明实施例显示网页动画可以减小带宽资源的消耗。

Description

一种网页动画的显示方法、装置及电子设备
技术领域
本发明涉及网页显示技术领域，特别是涉及一种网页动画的显示方法、装置及电子设备。
背景技术
随着计算机技术的发展，可以在网页中展示各种类型的网页元素，如网页图片、网页动画等。与网页图片相比，在网页中展示网页动画，趣味性更强，可以延迟用户浏览网页的时长。
传统网页动画一般采用图片序列的形式实现，具体的，按照固定的时间间隔分别展示图片序列包含的每张图片，以形成动画效果。示例性的，网页动画A的图片序列中包含50张图片，按照每秒展示25张图片的速度进行展示，从而形成2秒的动画效果，其原理与图1所示的电影胶片示意图中展示电影胶片的过程类似。
然而，由于采用图片序列的形式实现网页动画时需要使用大量的图片，示例性的，按照每秒钟展示25张图片的速度，为了实现一段10秒钟的网页动画，需要包含250张图片的图片序列，导致为了网页中显示网页动画需要需要消耗大量的带宽资源。
发明内容
本发明实施例的目的在于提供一种网页动画的显示方法、装置及电子设备，以减小显示网页动画所消耗的带宽资源。具体技术方案如下：
本发明实施例提供了一种网页动画的显示方法，应用于客户端，包括：
向服务器发送针对网页动画的获取请求；
接收所述服务器反馈的动画视频，其中，所述动画视频的视频帧包含：色彩区域和透明区域，所述色彩区域包括：所述获取请求所请求网页动画的图片序列中图片的色彩信息，所述透明区域包括：所述图片的透明度信息；
基于所述动画视频中每一视频帧包含的透明区域，展示每一视频帧包含的色彩区域。
进一步的，所述基于所述动画视频中每一视频帧包含的透明区域，展示每一视频帧包含的色彩区域，包括：
基于所述动画视频中每一视频帧包含的色彩区域和透明区域，生成待展示图片，其中，所述待展示图片每一像素点的色彩像素值为所述色彩区域内像素点的像素值，所述待展示图片每一像素点的透明度像素值为所述透明区域内像素点的像素值，展示所述待展示图片；或，
将所述色彩区域内每一像素点的色彩像素值与所述透明区域内每一像素点的色彩像素值合并放入预设画布中进行显示，其中，所述预设画布每一像素点的色彩像素值为所述色彩区域内像素点的像素值，所述预设画布每一像素点的透明度像素值为所述透明区域内像素点的像素值。
进一步的，所述动画视频还包含所述获取请求所请求网页动画的音频；
所述方法还包括：
在执行所述基于所述动画视频中每一视频帧包含的透明区域，展示每一视频帧包含的色彩区域时，播放所述动画视频包含的音频。
进一步的，所述动画视频为基于色彩视频和透明度视频在左右方向或上下方向合并所生成的，其中，所述动画视频的视频帧包含的色彩区域对应所述色彩视频，所述动画视频的视频帧包含的透明区域对应所述透明度视频，所述色彩视频为：基于所述图片序列中每张图片的色彩信息所生成的，所述透明度视频为：基于所述图片序列中每张图片的透明度信息所生成的。
本发明实施例还提供了一种网页动画的显示方法，应用于服务器，包括
接收客户端发送的针对网页动画的获取请求；
选取与所述获取请求所请求网页动画相匹配的动画视频，其中，所述动画视频的视频帧包含：色彩区域和透明区域，所述色彩区域包括：所述获取请求所请求网页动画的图片序列中图片的色彩信息，所述透明区域包括：所述图片的透明度信息；
向所述客户端反馈所述动画视频，以使所述客户端基于所述动画视频中每一视频帧包含的透明区域，展示每一视频帧包含的色彩区域。
进一步的，在所述选取与所述获取请求所请求网页动画相匹配的动画视频之前，所述方法还包括：
获取所述获取请求所请求网页动画的图片序列；
基于所述图片序列中每张图片的色彩信息，生成色彩视频，且基于所述图片序列中每张图片的透明度信息，生成透明度视频；
基于所述色彩视频和所述透明度视频，生成动画视频，其中，所述动画视频中与所述色彩视频对应的区域为色彩区域、且与所述透明度视频对应的区域为透明区域。
进一步的，所述基于所述色彩视频和所述透明度视频，生成动画视频，包括：
将所述彩色视频和所述透明度视频在左右方向或上下方向进行合并，将合并后的视频作为动画视频。
进一步的，所述基于所述色彩视频和所述透明度视频，生成动画视频，包括：
获取所述获取请求所请求网页动画的音频；
将所述彩色视频、所述透明度视频和所述音频进行合并，将合并后的视频作为动画视频。
本发明实施例还提供了种网页动画的显示装置，应用于客户端，包括：
获取请求发送模块，用于向服务器发送针对网页动画的获取请求；
动画视频接收模块，用于接收所述服务器反馈的动画视频，其中，所述动画视频的视频帧包含：色彩区域和透明区域，所述色彩区域包括：所述获取请求所请求网页动画的图片序列中图片的色彩信息，所述透明区域包括：所述图片的透明度信息；
动画展示模块，用于基于所述动画视频中每一视频帧包含的透明区域，展示每一视频帧包含的色彩区域。
进一步的，所述动画展示模块，具体用于：
基于所述动画视频中每一视频帧包含的色彩区域和透明区域，生成待展示图片，其中，所述待展示图片每一像素点的色彩像素值为所述色彩区域内像素点的像素值，所述待展示图片每一像素点的透明度像素值为所述透明区域内像素点的像素值，展示所述待展示图片；或，
将所述色彩区域内每一像素点的色彩像素值与所述透明区域内每一像素点的色彩像素值合并放入预设画布中进行显示，其中，所述预设画布每一像素点的色彩像素值为所述色彩区域内像素点的像素值，所述预设画布每一像素点的透明度像素值为所述透明区域内像素点的像素值。
进一步的，所述动画视频还包含所述获取请求所请求网页动画的音频；
所述动画展示模块，还用于在执行所述基于所述动画视频中每一视频帧包含的透明区域，展示每一视频帧包含的色彩区域时，播放所述动画视频包含的音频。
进一步的，所述动画视频为基于色彩视频和透明度视频在左右方向或上下方向合并所生成的，其中，所述动画视频的视频帧包含的色彩区域对应所述色彩视频，所述动画视频的视频帧包含的透明区域对应所述透明度视频，所述色彩视频为：基于所述图片序列中每张图片的色彩信息所生成的，所述透明度视频为：基于所述图片序列中每张图片的透明度信息所生成的。
本发明实施例还提供了一种网页动画的显示装置，应用于服务器，包括
获取请求接收模块，用于接收客户端发送的针对网页动画的获取请求；
动画视频选取模块，用于选取与所述获取请求所请求网页动画相匹配的动画视频，其中，所述动画视频的视频帧包含：色彩区域和透明区域，所述色彩区域包括：所述获取请求所请求网页动画的图片序列中图片的色彩信息，所述透明区域包括：所述图片的透明度信息；
动画视频反馈模块，用于向所述客户端反馈所述动画视频，以使所述客户端基于所述动画视频中每一视频帧包含的透明区域，展示每一视频帧包含的色彩区域。
进一步的，所述装置还包括：
图片序列获取模块，用于在所述动画视频选取模块选取与所述获取请求所请求网页动画相匹配的动画视频之前，获取所述获取请求所请求网页动画的图片序列；
第一视频生成模块，用于基于所述图片序列中每张图片的色彩信息，生成色彩视频，且基于所述图片序列中每张图片的透明度信息，生成透明度视频；
第二视频生成模块，用于基于所述色彩视频和所述透明度视频，生成动画视频，其中，所述动画视频中与所述色彩视频对应的区域为色彩区域、且与所述透明度视频对应的区域为透明区域。
进一步的，所述第二视频生成模块，具体用于将所述彩色视频和所述透明度视频在左右方向或上下方向进行合并，将合并后的视频作为动画视频。
进一步的，所述第二视频生成模块，具体用于获取所述获取请求所请求网页动画的音频，并且将所述彩色视频、所述透明度视频和所述音频进行合并，将合并后的视频作为动画视频。
本发明实施例还提供了一种电子设备，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；
存储器，用于存放计算机程序；
处理器，用于执行存储器上所存放的程序时，实现上述任一所述的网页动画的显示方法步骤。
本发明实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现上述任一所述的网页动画的显示方法步骤。
本发明实施例还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述任一所述的网页动画的显示方法。
本发明实施例有益效果：
本发明实施例提供的一种网页动画的显示方法、装置及电子设备，服务器在接收到客户端针对网页动画的获取请求后，可以向客户端反馈的是视频帧中包含有网页动画的图片序列中图片的色彩信息和透明度信息的动画视频，相对于图片序列，视频可以采用运动补偿减少数据量，使得视频所占用的数据量远小于图片序列的数据量，服务器向客户端反馈视频所消耗的带宽资源远小于服务器向客户端反馈图片序列所消耗的带宽资源，从而采用本发明实施例显示网页动画可以减小带宽资源的消耗。
当然，实施本发明的任一产品或方法并不一定需要同时达到以上所述的所有优点。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的实施例。
图1为电影胶片示意图。
图2为本发明一个实施例提供的网页动画的显示系统的结构示意图。
图3为本发明一个实施例提供的网页动画的显示系统的交互图。
图4为本发明一个实施例提供的网页动画的显示方法的流程图。
图5为本发明另一个实施例提供的网页动画的显示方法的流程图。
图6为本发明又一个实施例提供的网页动画的显示方法的流程图。
图7为本发明一个实施例提供的网页动画的显示装置的结构示意图。
图8为本发明一个实施例提供的网页动画的显示装置的结构示意图。
图9为本发明一个实施例提供的电子设备的结构示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
为了清楚地阐述本发明实施例提供的技术方案，首先站在系统角度从整体上对本发明实施例提供的技术方案进行简单介绍，如图2所示，本发明实施例提供了一种网页动画的显示系统，包括：客户端和服务器。
在本发明实施例提供的上述网页动画的显示系统中，客户端可以在访问网页时向服务器发送针对网页动画的获取请求。服务器在接收到客户端发送的获取请求后，向客户端反馈与所请求网页动画相匹配的动画视频，客户端在接收到动画视频后，可以根据动画视频实现网页动画的播放。
在本发明的一个实施例中，如图3所示，本发明实施例还提供了一种网页动画的显示系统的交互示意图，包括如下步骤：
步骤301：客户端向服务器发送针对网页动画的获取请求。
步骤302：服务器在接收到客户端发送的针对网页动画的获取请求后，选取与获取请求所请求网页动画相匹配的动画视频。
步骤303：服务器向客户端反馈动画视频。
步骤304：客户端向服务器接收到服务器反馈的动画视频后，基于动画视频中每一视频帧包含的透明区域，展示每一视频帧包含的色彩区域。
可选的，客户端向服务器发送的针对网页动画的获取请求可以为客户端向服务器请求网页访问请求，即客户端向服务器发送网页访问请求，以获取服务器反馈的网页，获取请求所针对的网页动画为所请求网页中包含的网页动画，此时，客户端向服务器发送的获取请求中可以携带所要请求网页的网页标识。
当服务器接收到发送的携带网页标识后，可以确定出该网页标识所对应的网页，并向客户端反馈所确定网页的网页数据，其中，网页数据可包含动画视频，可选的，服务器还可以先获取所确定网页中网页动画的图片序列，并根据图片序列生成动画视频，进而发送生成的动画视频。
可选的，客户端向服务器发送的获取请求也可以为只针对网页动画的获取请求，示例性的，客户端所展示的网页中存在交互式网页动画，仅当接收到针对该交互式网页动画的播放操作请求时，客户端才向服务器发送针对该交互式网页动画的获取请求，此时，客户端向服务器发送的获取请求中可以携带该交互式网页动画的动画标识。
当服务器接收到发送的携带动画标识后，可以获取与动画标识所对应的网页动画相匹配的动画视频，可选的，可以先获取动画标识所标识网页动画的网页序列、并根据图片序列生成动画视频，进而发送生成的动画视频。
可选的，客户端接收到服务器反馈的动画视频后，可以基于动画视频实现网页动画的展示。
采用本发明实施例提供的上述网页动画可以避免服务器直接反馈网页动画的图片序列，而是向客户端反馈数据量远小于图片系列的动画视频，进而减小了带宽资源的消耗。
下面再分别对本发明实施例公开的网页动画的显示方法、装置、电子设备及可读存储介质进行详细说明。
本发明实施例提供一种网页动画的显示方法，应用于客户端，其中，如图4所示，该方法包括：
S401：向服务器发送针对网页动画的获取请求。
S402：接收服务器反馈的动画视频，其中，动画视频的视频帧包含：色彩区域和透明区域，色彩区域包括：获取请求所请求网页动画的图片序列中图片的色彩信息，透明区域包括：图片的透明度信息。
S403：基于动画视频中每一视频帧包含的透明区域，展示每一视频帧包含的色彩区域。
本发明实施例提供的如图4所示的网页动画的显示方法，由于服务器在接收到客户端针对网页动画的获取请求后，向客户端反馈的是视频帧中包含有网页动画的图片序列中图片的色彩信息和透明度信息的动画视频，相对于图片序列，视频可以采用运动补偿减少数据量，使得视频所占用的数据量远小于图片序列的数据量，服务器向客户端反馈视频所消耗的带宽资源远小于服务器向客户端反馈图片序列所消耗的带宽资源，从而采用本发明实施例显示网页动画可以减小带宽资源的消耗。
针对步骤401，如前述所言，客户端向服务器发送的针对网页动画的获取请求可以为客户端向服务器请求网页访问请求，也可以为只针对网页动画的获取请求，具体的实现方式与步骤301相同或相似，在此不再赘述。
针对步骤S402，本领域技术人员所知的，图片中每个像素点的像素值由RGB+Alpha(阿尔法)组成，其中，RGB用于表征像素点所显示的颜色，而Alpha则用于表征像素点的透明度，本发明实施例所指图片的色彩信息图片中每个像素点的色彩像素值，即上述RGB值，图片的透明度信息为图片中的透明度像素值，即上述Alpha值。
在一种实施例中，动画视频中视频帧的数量与网页动画的图片序列中图片的数量相同，如网页动画中图片序列中包含100张图片，则动画视频包含100帧视频帧，图片序列中图片与动画视频的视频帧一一对应。
针对每一视频帧而言，其包含的色彩区域中像素点的像素值为所对应的图片中像素点的色彩像素值，其包含的透明区域中像素点的像素值为所对应的图片中像素点的透明度像素值。
示例性的，图片序列中图片A的像素点的像素值为(R1、G1、B1、Alpha1)，则色彩区域内像素点的像素值为(R1、G1、B1)，透明区域内的像素点的像素值为(Alpha1、Alpha1、Alpha1)。
可选的，上述动画视频可以为基于色彩视频和透明度视频在左右方向或上下方向合并所生成的，其中，动画视频的视频帧包含的色彩区域对应色彩视频，动画视频的视频帧包含的透明区域对应透明度视频，色彩视频为：基于图片序列中每张图片的色彩信息所生成的，透明度视频为：基于图片序列中每张图片的透明度信息所生成的。
上述色彩视频和透明度视频可以通过视频编辑或合成工具对网页动画的图片序列包含的图片进行合成所得到的，其中，色彩视频中视频帧包含图片序列中图片的色彩信息，透明度视频中视频帧包含图片序列中图片的透明度信息。可选的，可以使用视频合成工具FFMPEG对图片序列中图片的色彩信息序列中的图片进行合成。
在另一种实施例中，在合成得到色彩视频和透明度视频后，可以将色彩视频和透明度视频进行组合、拼接得到动画视频，可选的，色彩视频和透明度视频可以在左右方向上进行合并，如色彩视频在左，透明度视频在右，或色彩视频在右，透明度视频在左，可选的，色彩视频和透明度视频还可以在上下方向上进行合并，如色彩视频在上，透明度视频在下，或色彩视频在下，透明度视频在上。
上述色彩视频合并后所在区域为本发明实施例上述所提及的色彩区域，透明度视频合并后所在区域为本发明实施例上述所提及的透明区域。
针对上述步骤S403，如前述所言，动画视频中每一视频帧包含的透明区域包含图片的透明度信息，而透明度信息用于对色差信息进行调整，简单而言，当透明度信息为：像素点1的透明度为100％，则该像素点完全“透明”，即使该像素点的RGB存在相应数值，显示屏中不显示出该像素点1。
可选的，可以基于透明区域所包含的透明度信息，调整基于色彩区域包含的色彩信息的显示透明度。
在本发明的一个实施例中，透明区域内像素点与色彩区域内像素点一一对应，可选的，针对色彩区域内每一像素点，基于透明区域内与该像素点对应的像素点的像素值所表示的透明度信息，调整该像素点的显示透明度。
在本发明的一个实施例中，每一透明区域和色彩区域都对应有区域标识，同一视频帧内的透明区域和色彩区域对应的区域标识相同。可选的，可以预先提取出所有视频帧的透明区域和色彩区域，当需要显示色彩区域是，基于与该色彩区域区域标识相同的透明区域显示该色彩区域。
可选的，还可以采用如下两种方式中的任意一种方式实现上述步骤S403：
第一种方式，基于动画视频中每一视频帧包含的色彩区域和透明区域，生成待展示图片，其中，待展示图片每一像素点的色彩像素值为色彩区域内像素点的像素值，待展示图片每一像素点的透明度像素值为透明区域内像素点的像素值；展示待展示图片。
本方式中，动画视频中每一视频帧包含的色彩区域包含有图片的色彩信息，透明区域包含有图片的透明度信息，即色彩区域内每一像素点的像素值为图片序列中图片的像素点的色彩像素值，透明区域内没有像素点的像素值为图片序列中图片的像素点的透明度像素值，因此，可以分别获取色彩区域包含的色彩信息和透明区域包含的透明度信息，并基于获取的色彩信息和透明度信息生成图片序列中图片。
示例性的，针对待展示图片的任意一个像素点，其包含的像素值RGB+Alpha，其中，RGB为视频帧中色彩区域内的像素点的RGB，Alpha为视频帧中透明区域内像素点的R值、G值或B值，或者也可以为透明区域内像素点的R值、G值和B值的平均值。
可选的，可以在生成待展示图片后，展示待展示图片，或者，也可以为在基于动画视频生成所有的待展示图片后，依次展示待展示图片。
第二种方式，将色彩区域内每一像素点的色彩像素值与透明区域内每一像素点的色彩像素值合并放入预设画布中进行显示，其中，预设画布每一像素点的色彩像素值为色彩区域内像素点的像素值，预设画布每一像素点的透明度像素值为透明区域内像素点的像素值。
本方式中，可以对动画视频进行离屏渲染，并从针对每一视频帧进行离屏渲染所得到的渲染数据中，提取色彩区域内没有像素的色彩像素值和透明区域内每一像素点的色彩像素值，并将提取到的像素值合并后在预设画布中进行显示。
可选的，可以通过调用WebGL(Web Graphics Library，Web图形库)工具、OpenGL(Open Graphics Library，开放图形库)工具，利用显卡的硬件加速功能，合并像素值并在预设画布中显示。
在本发明的一个实施例中，动画视频还包含获取请求所请求网页动画的音频，则在执行基于动画视频中每一视频帧包含的透明区域，展示每一视频帧包含的色彩区域时，播放动画视频包含的音频。
相应的，本发明实施例还提供了一种网页动画的显示方法，应用于服务器，如图5所示，该方法包括：
S501：接收客户端发送的针对网页动画的获取请求。
S502：选取与获取请求所请求网页动画相匹配的动画视频，其中，动画视频的视频帧包含：色彩区域和透明区域，色彩区域包括：获取请求所请求网页动画的图片序列中图片的色彩信息，透明区域包括：图片的透明度信息。
S503：向客户端反馈动画视频，以使客户端基于动画视频中每一视频帧包含的透明区域，展示每一视频帧包含的色彩区域。
本发明实施例提供的如图5所示的网页动画的显示方法，由于服务器在接收到客户端针对网页动画的获取请求后，向客户端反馈的是视频帧中包含有网页动画的图片序列中图片的色彩信息和透明度信息的动画视频，相对于图片序列，视频可以采用运动补偿减少数据量，使得视频所占用的数据量远小于图片序列的数据量，服务器向客户端反馈视频所消耗的带宽资源远小于服务器向客户端反馈图片序列所消耗的带宽资源，从而采用本发明实施例显示网页动画可以减小带宽资源的消耗。
上述实施例具体的实现过程与方法与前述实施例相同或相似，在此不再赘述。
在本发明的一个实施例中，在执行步骤S502之前，还可以先实时生成动画视频，可选的，如图6所示，本发明实施例还提供了一种动画视频生成方法，如图6所示，该方法包括：
S601：获取获取请求所请求网页动画的图片序列。
本步骤中，获取请求中可以携带表示网页动画的标识，可以基于该标识查找获取请求所请求网页动画的图片序列。
S602：基于图片序列中每张图片的色彩信息，生成色彩视频，且基于图片序列中每张图片的透明度信息，生成透明度视频。
本步骤中，可以提取图片序列中每张图片的色彩信息，生成色彩视频，提取图片序列中每张图片的透明度信息，生成透明度视频。
其中，所生成的色彩视频和透明度视频的大小相同。
S603：基于色彩视频和透明度视频，生成动画视频，其中，动画视频中与色彩视频对应的区域为色彩区域、且与透明度视频对应的区域为透明区域。
本步骤中，可以将彩色视频和透明度视频在左右方向或上下方向进行合并，将合并后的视频作为动画视频。
可选的，在获取请求所请求网页动画存在音频的情况下，可以获取获取请求所请求网页动画的音频，并将彩色视频、透明度视频和音频进行合并，将合并后的视频作为动画视频。
本发明实施例提供的如图6所示的网页动画的显示方法，可以根据图片序列中图片的色彩信息生成色彩视频，并根据图片序列中图片的透明度信息生成透明度视频，进而通过将色彩视频和透明度视频合并的方式，生成了及包含有色彩信息，又包含有透明度信息的视频，为后续网页动画的显示提供了基础。
基于同一发明构思，根据本发明实施例提供的如图4所示的网页动画的显示方法，如图7所示，本发明实施例还提供了一种网页动画的显示装置，应用于客户端，该装置包括：
获取请求发送模块701，用于向服务器发送针对网页动画的获取请求；
动画视频接收模块702，用于接收服务器反馈的动画视频，其中，动画视频的视频帧包含：色彩区域和透明区域，色彩区域包括：获取请求所请求网页动画的图片序列中图片的色彩信息，透明区域包括：图片的透明度信息；
动画展示模块703，用于基于动画视频中每一视频帧包含的透明区域，展示每一视频帧包含的色彩区域。
进一步的，动画展示模块，具体用于：
基于动画视频中每一视频帧包含的色彩区域和透明区域，生成待展示图片，其中，待展示图片每一像素点的色彩像素值为色彩区域内像素点的像素值，待展示图片每一像素点的透明度像素值为透明区域内像素点的像素值，展示待展示图片；或，
将色彩区域内每一像素点的色彩像素值与透明区域内每一像素点的色彩像素值合并放入预设画布中进行显示，其中，预设画布每一像素点的色彩像素值为色彩区域内像素点的像素值，预设画布每一像素点的透明度像素值为透明区域内像素点的像素值。
进一步的，动画视频还包含获取请求所请求网页动画的音频；
动画展示模块，还用于在执行基于动画视频中每一视频帧包含的透明区域，展示每一视频帧包含的色彩区域时，播放动画视频包含的音频。
进一步的，动画视频为基于色彩视频和透明度视频在左右方向或上下方向合并所生成的，其中，动画视频的视频帧包含的色彩区域对应色彩视频，动画视频的视频帧包含的透明区域对应透明度视频，色彩视频为：基于图片序列中每张图片的色彩信息所生成的，透明度视频为：基于图片序列中每张图片的透明度信息所生成的。
本发明实施例提供的如图7所示的网页动画的显示装置，由于服务器在接收到客户端针对网页动画的获取请求后，向客户端反馈的是视频帧中包含有网页动画的图片序列中图片的色彩信息和透明度信息的动画视频，相对于图片序列，视频可以采用运动补偿减少数据量，使得视频所占用的数据量远小于图片序列的数据量，服务器向客户端反馈视频所消耗的带宽资源远小于服务器向客户端反馈图片序列所消耗的带宽资源，从而采用本发明实施例显示网页动画可以减小带宽资源的消耗。
基于同一发明构思，根据本发明实施例提供的如图5所示的网页动画的显示方法，如图8所示，本发明实施例还提供了一种网页动画的显示装置，应用于服务器，该装置包括：
获取请求接收模块801，用于接收客户端发送的针对网页动画的获取请求；
动画视频选取模块802，用于选取与获取请求所请求网页动画相匹配的动画视频，其中，动画视频的视频帧包含：色彩区域和透明区域，色彩区域包括：获取请求所请求网页动画的图片序列中图片的色彩信息，透明区域包括：图片的透明度信息；
动画视频反馈模块803，用于向客户端反馈动画视频，以使客户端基于动画视频中每一视频帧包含的透明区域，展示每一视频帧包含的色彩区域。
进一步的，装置还包括：
图片序列获取模块，用于在动画视频选取模块选取与获取请求所请求网页动画相匹配的动画视频之前，获取获取请求所请求网页动画的图片序列；
第一视频生成模块，用于基于图片序列中每张图片的色彩信息，生成色彩视频，且基于图片序列中每张图片的透明度信息，生成透明度视频；
第二视频生成模块，用于基于色彩视频和透明度视频，生成动画视频，其中，动画视频中与色彩视频对应的区域为色彩区域、且与透明度视频对应的区域为透明区域。
进一步的，第二视频生成模块，具体用于将彩色视频和透明度视频在左右方向或上下方向进行合并，将合并后的视频作为动画视频。
进一步的，第二视频生成模块，具体用于获取获取请求所请求网页动画的音频，并且将彩色视频、透明度视频和音频进行合并，将合并后的视频作为动画视频。
本发明实施例提供的如图8所示的网页动画的显示装置，由于服务器在接收到客户端针对网页动画的获取请求后，向客户端反馈的是视频帧中包含有网页动画的图片序列中图片的色彩信息和透明度信息的动画视频，相对于图片序列，视频可以采用运动补偿减少数据量，使得视频所占用的数据量远小于图片序列的数据量，服务器向客户端反馈视频所消耗的带宽资源远小于服务器向客户端反馈图片序列所消耗的带宽资源，从而采用本发明实施例显示网页动画可以减小带宽资源的消耗。
本发明实施例还提供了一种电子设备，如图9所示，包括处理器901、通信接口902、存储器903和通信总线904，其中，处理器901，通信接口902，存储器903通过通信总线904完成相互间的通信，
存储器903，用于存放计算机程序；
处理器901，用于执行存储器903上所存放的程序时，实现上述应用于客户端或服务器的网页动画的显示方法。
本发明实施例提供的如图9所示的电子设备，由于服务器在接收到客户端针对网页动画的获取请求后，向客户端反馈的是视频帧中包含有网页动画的图片序列中图片的色彩信息和透明度信息的动画视频，相对于图片序列，视频可以采用运动补偿减少数据量，使得视频所占用的数据量远小于图片序列的数据量，服务器向客户端反馈视频所消耗的带宽资源远小于服务器向客户端反馈图片序列所消耗的带宽资源，从而采用本发明实施例显示网页动画可以减小带宽资源的消耗。
上述电子设备提到的通信总线可以是外设部件互连标准(Peripheral ComponentInterconnect，PCI)总线或扩展工业标准结构(Extended Industry StandardArchitecture，EISA)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。
通信接口用于上述电子设备与其他设备之间的通信。
存储器可以包括随机存取存储器(Random Access Memory，RAM)，也可以包括非易失性存储器(Non-Volatile Memory，NVM)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储装置。
上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(Network Processor，NP)等；还可以是数字信号处理器(Digital SignalProcessing，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
在本发明提供的又一实施例中，还提供了一种计算机可读存储介质，该计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现上述任一网页动画的显示方法的步骤。
在本发明提供的又一实施例中，还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述实施例中任一网页动画的显示方法。
在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本发明实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘Solid State Disk(SSD))等。
需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置、电子设备、计算机可读存储介质和计算机程序产品实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
以上所述仅为本发明的较佳实施例，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。

Claims (10)

1.一种网页动画的显示方法，其特征在于，应用于客户端，包括：
向服务器发送针对网页动画的获取请求；
接收所述服务器反馈的动画视频，其中，所述动画视频的视频帧包含：色彩区域和透明区域，所述色彩区域包括：所述获取请求所请求网页动画的图片序列中图片的色彩信息，所述透明区域包括：所述图片的透明度信息；
基于所述动画视频中每一视频帧包含的透明区域，展示每一视频帧包含的色彩区域。
2.根据权利要求1所述的方法，其特征在于，所述基于所述动画视频中每一视频帧包含的透明区域，展示每一视频帧包含的色彩区域，包括：
基于所述动画视频中每一视频帧包含的色彩区域和透明区域，生成待展示图片，其中，所述待展示图片每一像素点的色彩像素值为所述色彩区域内像素点的像素值，所述待展示图片每一像素点的透明度像素值为所述透明区域内像素点的像素值，并展示所述待展示图片；或，
将所述色彩区域内每一像素点的色彩像素值与所述透明度区域内每一像素点的色彩像素值合并放入预设画布中进行显示，其中，所述预设画布每一像素点的色彩像素值为所述色彩区域内像素点的像素值，所述预设画布每一像素点的透明度像素值为所述透明区域内像素点的像素值。
3.根据权利要求1所述的方法，其特征在于，
所述动画视频还包含对应的音频；
所述方法还包括：
在执行所述基于所述动画视频中每一视频帧包含的透明区域，展示每一视频帧包含的色彩区域时，播放所述动画视频包含的音频。
4.根据权利要求1-3任一项所述的方法，其特征在于，
所述动画视频为基于色彩视频和透明度视频在左右方向或上下方向合并所生成的，其中，所述动画视频的视频帧包含色彩区域对应所述色彩视频和透明区域对应所述透明度视频，所述色彩视频为：基于所述图片序列中每张图片的色彩信息所生成的，所述透明度视频为：基于所述图片序列中每张图片的透明度信息所生成的。
5.一种网页动画的显示方法，其特征在于，应用于服务器，包括：
接收客户端发送的针对网页动画的获取请求；
选取与所述获取请求所请求网页动画相匹配的动画视频，其中，所述动画视频的视频帧包含：色彩区域和透明区域，所述色彩区域包括：所述获取请求所请求网页动画的图片序列中图片的色彩信息，所述透明区域包括：所述图片的透明度信息；
向所述客户端反馈所述动画视频，以使所述客户端基于所述动画视频中每一视频帧包含的透明区域，展示每一视频帧包含的色彩区域。
6.根据权利要求5所述的方法，其特征在于，在所述选取与所述获取请求所请求网页动画相匹配的动画视频之前，所述方法还包括：
获取所述获取请求所请求网页动画的图片序列；
基于所述图片序列中每张图片的色彩信息，生成色彩视频，且基于所述图片序列中每张图片的透明度信息，生成透明度视频；
基于所述色彩视频和所述透明度视频，生成动画视频，其中，所述动画视频中与所述色彩视频对应的区域为色彩区域、且与所述透明度视频对应的区域为透明区域。
7.根据权利要求6所述的方法，其特征在于，所述基于所述色彩视频和所述透明度视频，生成动画视频，包括：
将所述彩色视频和所述透明度视频在左右方向或上下方向进行合并，将合并后的视频作为动画视频。
8.根据权利要求6所述的方法，其特征在于，所述基于所述色彩视频和所述透明度视频，生成动画视频，包括：
获取所述获取请求所请求网页动画的音频；
将所述彩色视频、所述透明度视频和所述音频进行合并，将合并后的视频作为动画视频。
9.一种网页动画的显示装置，其特征在于，应用于客户端，包括：
获取请求发送模块，用于向服务器发送针对网页动画的获取请求；
动画视频接收模块，用于接收所述服务器反馈的动画视频，其中，所述动画视频的视频帧包含：色彩区域和透明区域，所述色彩区域包括：所述获取请求所请求网页动画的图片序列中图片的色彩信息，所述透明区域包括：所述图片的透明度信息；
动画展示模块，用于基于所述动画视频中每一视频帧包含的透明区域，展示每一视频帧包含的色彩区域。
10.一种网页动画的显示装置，其特征在于，应用于服务器，包括
获取请求接收模块，用于接收客户端发送的针对网页动画的获取请求；
动画视频选取模块，用于选取与所述获取请求所请求网页动画相匹配的动画视频，其中，所述动画视频的视频帧包含：色彩区域和透明区域，所述色彩区域包括：所述获取请求所请求网页动画的图片序列中图片的色彩信息，所述透明区域包括：所述图片的透明度信息；
动画视频反馈模块，用于向所述客户端反馈所述动画视频，以使所述客户端基于所述动画视频中每一视频帧包含的透明区域，展示每一视频帧包含的色彩区域。
CN202010935850.6A 2020-09-08 2020-09-08 一种网页动画的显示方法、装置及电子设备 Pending CN112019911A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010935850.6A CN112019911A (zh) 2020-09-08 2020-09-08 一种网页动画的显示方法、装置及电子设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010935850.6A CN112019911A (zh) 2020-09-08 2020-09-08 一种网页动画的显示方法、装置及电子设备

Publications (1)

Publication Number Publication Date
CN112019911A true CN112019911A (zh) 2020-12-01

Family

ID=73516984

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010935850.6A Pending CN112019911A (zh) 2020-09-08 2020-09-08 一种网页动画的显示方法、装置及电子设备

Country Status (1)

Country Link
CN (1) CN112019911A (zh)

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20180107357A1 (en) * 2013-09-06 2018-04-19 Seespace Ltd. Method and Apparatus for Controlling Display of Video Content
CN109191549A (zh) * 2018-11-14 2019-01-11 广州酷狗计算机科技有限公司 显示动画的方法及装置
CN109272565A (zh) * 2017-07-18 2019-01-25 腾讯科技（深圳）有限公司 动画播放方法、装置、存储介质以及终端
CN110351592A (zh) * 2019-07-17 2019-10-18 深圳市蓝鲸数据科技有限公司 动画呈现方法、装置、计算机设备和存储介质
CN110989878A (zh) * 2019-11-01 2020-04-10 百度在线网络技术（北京）有限公司 小程序中的动画展示方法、装置、电子设备及存储介质

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20180107357A1 (en) * 2013-09-06 2018-04-19 Seespace Ltd. Method and Apparatus for Controlling Display of Video Content
CN109272565A (zh) * 2017-07-18 2019-01-25 腾讯科技（深圳）有限公司 动画播放方法、装置、存储介质以及终端
CN109191549A (zh) * 2018-11-14 2019-01-11 广州酷狗计算机科技有限公司 显示动画的方法及装置
CN110351592A (zh) * 2019-07-17 2019-10-18 深圳市蓝鲸数据科技有限公司 动画呈现方法、装置、计算机设备和存储介质
CN110989878A (zh) * 2019-11-01 2020-04-10 百度在线网络技术（北京）有限公司 小程序中的动画展示方法、装置、电子设备及存储介质

Similar Documents

Publication Publication Date Title
CN106658145B (zh) 一种直播数据处理方法和装置
US20220007083A1 (en) Method and stream-pushing client for processing live stream in webrtc
CN108833787B (zh) 用于生成短视频的方法和装置
US20140082209A1 (en) Personalized streaming internet video
CN106713968B (zh) 一种直播数据显示方法和装置
US11551392B2 (en) Graphic drawing method and apparatus, device, and storage medium
CN112416346B (zh) 界面配色方案的生成方法、装置、设备及存储介质
WO2022127890A1 (zh) 一种基于云服务的渲染方法及其相关设备
CN112511816A (zh) 一种视频延时测试系统、方法、装置、设备和存储介质
CN112532896A (zh) 视频的制作方法、装置、电子设备以及存储介质
CN114630188B (zh) 短视频广告生成方法、装置、电子设备及可读存储介质
CN111580788A (zh) 模板搭配信息推荐方法、装置及电子设备
CN111667313A (zh) 广告展示方法、装置、客户端设备及存储介质
CN112308950A (zh) 视频生成方法及装置
CN112019911A (zh) 一种网页动画的显示方法、装置及电子设备
CN114449334A (zh) 视频录制方法、装置、电子设备及计算机存储介质
CN114913277A (zh) 一种物体立体交互展示方法、装置、设备及介质
CN113038225B (zh) 视频播放方法、装置、计算设备以及存储介质
CN113641853A (zh) 动态封面生成方法、装置、电子设备、介质及程序产品
CN117729344A (zh) 一种直播购物控制方法及显示设备
CN112418942A (zh) 广告显示方法、装置及电子设备
CN111866548A (zh) 一种应用于医疗视频的标记方法
CN109636724A (zh) 一种列表界面的显示方法、装置、设备及存储介质
CN115515006B (zh) 视频处理方法、装置、电子设备及存储介质
CN111107425B (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
RJ01 Rejection of invention patent application after publication

Application publication date: 20201201

RJ01 Rejection of invention patent application after publication