CN112884665B 一种动画播放方法、装置、计算机设备及存储介质 （腾讯科技（深圳）有限公司）

放的目标视频，在浏览器引擎创建video标签和canvas标签，进而基于video标签实现对目标视于canvas标签将当前video标签中隐藏播放的视频帧绘制到webGL接口中的着色器，通过着色器的接口调用GPU实现对着色器中视频帧的锐化、动画播放对电子设备CPU性能的影响、提高了动2接收动画播放请求，确定动画播放请求所请求播放的目标视频，所基于所述canvas标签将当前所述video标签中隐藏播放的视频帧绘制到webGL接口中通过所述着色器的接口调用GPU对所述着色器中的所述视频帧进行锐化、抠图处理得频帧进行卷积数字图像处理得到高清视频帧；采用色度抠像ChromaKey对所述高清视频帧创建目标容器并在所述目标容器中加载所述环渲染所述目标容器中的所述环境背景图像至监听所述目标视频对应的所述video标签的接口，确定当前所述目标视频的播放时间若所述播放时间点满足预先设置的播放控制条件，基于预先基于所述目标视频对应的所述video标签的接口控制所述目标视频的播放状态，所述通过所述浏览器引擎向所述着色器传输与所述目标视频的背景颜所述通过所述着色器的接口调用GPU对所述着色器中的所述视频帧进行锐化、抠图处通过所述着色器的接口调用GPU对所述着色器中的所述视频帧进行锐化处理、基于所绘制单元，用于基于所述canvas标签将当前所述video标签中隐藏播放的视频帧绘制第二播放单元，用于通过所述着色器的接口调用GPU对所述着色器中的所述视频帧进着色器中的所述视频帧进行卷积数字图像处理得到高清视频帧；采用色度抠像ChromaKey3第二创建单元，用于创建目标容器并在所述目标容器中播放控制单元，用于若所述播放时间点满足预先设置的播放控制播放状态控制单元，用于基于所述目标视频对应的所述video标签的接口控制所述目参数传输单元，用于通过所述浏览器引擎向所述着色器传输与所述目所述第二播放单元，具体用于通过所述着色器的接口调用GPU对所述着色器中的所述视频帧进行锐化处理、基于所述参数对锐化处理后的高清视频帧进行抠图得到目标视频4视频帧中背景的像素块透明度置0，以实现去除视频帧中背景保留前景以进行动画播放的[0004]这种动画播放技术需要依赖于电子设备上的CPU对视频帧的绘制渲染，不仅会影[0010]基于所述canvas标签将当前所述video标签中隐藏播放的视频帧绘制到webGL接[0011]通过所述着色器的接口调用GPU对所述着色器中的所述视频帧进行锐化、抠图处[0016]绘制单元，用于基于所述canvas标签将当前所述video标签中隐藏播放的视频帧5[0017]第二播放单元，用于通过所述着色器的接口调用GPU对所述着色器中的所述视频[0021]本申请依赖GPU实现对目标视频的绘制渲染，降低了动画播[0033]图9为本申请实施例提供的一种将目标视频的视频帧传输到片元着色器的示意[0035]图11为本申请实施例提供的一种动画播放方法所适用于的计算机设备的硬件结6[0046]R5(中心像素)＝R1G1+视频帧中背景的像素块透明度置0，以实现去除视频帧中背景保留前景以进行动画播放的7[0051]这种动画播放技术需要依赖于电子设备上的CPU对视频帧的绘制渲染，不仅会影视频渲染到webgl中通过着色器API调用GPU加速，对像素进行高效并行处理包括了图像卷[0055]本申请实施例提供的一种动画播放方法应用于动画播放系统，参见图2动画播放8视频可以认为是以幕布颜色作为背景的视频。需要说明的是，本申请实施例提供的一种动画播放方法，video标签在加载并播放视频流放顺序依次排列的多张视频帧，canvas标签用于实时将当前video标签中加载并隐藏播放[0071]本申请实施例，在video标签加载并隐藏播放所拉取到的目标视频的低清视频流的同时，调用canvas标签实时将当前video标签加载并隐藏播放的目标视频中的视频帧绘9[0080]为了便于对本申请实施例提供的卷积数字图像处理技术的理解，现结合如图6[0082]示例性的，GPU对着色器中的视频帧进行卷积数字图像处理得到高清视频帧的相两个向量的距离(一个分量在另一个分量上的投影)当AB向量接近，alpha趋于1AB向量很标视频中视频帧的视频动画等完美用于各种不同的场可以从一个或多个环境背景图像中选取与当前选中的请求播放的目标视频匹配的一个目[0099]以上仅仅是本申请实施例提供的几种线上场景，有关线[0105]本申请实施例提供的步骤S702_S705的执行方式与上述实施例提供的如图2所示[0110]以播放控制条件为当前播放到目标视频中第3秒的视频内容为例，监听目标视频当前目标视频的播放时间点为当前播放到目标视频中第3秒钟的视频内容，则确定当前目的播放控制方式可以相同也可以不同。相应的，可以监听目标视频对应的video标签的接[0114]本申请实施例提供的一种动画播放方法的执行主体可以认为是终端的CPU，终端[0115]下面结合图8提供的动画播放方法示意图对本申请实施例提供的动画播放方法进[0121]b)通过采用ChromaKey色度抠像对视频帧图像像素级别进行高级准确可调绿幕[0131]绘制单元1004，用于基于canvas标签将当前video标签中隐藏播放的视频帧绘制[0132]第二播放单元1005，用于通过着色器的接口调用GPU对着色器中的视频帧进行锐色器中的视频帧进行卷积数字图像处理得到高清视频帧、采用基于RGB模式的色度抠像技过浏览器引擎向着色器传输与目标视频的背景[0139]相应的，第二播放单元具体用于通过着色器的接口调用GPU对着色器中的视频帧[0150]基于canvas标签将当前video标签中隐藏播放的视频帧绘制到webGL接口中的着[0151]通过着色器的接口调用GPU对着色器中的视频帧进行锐化、抠图处理得到目标视[0152]处理器1102可能是一个中央处理器CPU，或者是特定集成电路ASIC(Application[0157]本申请依赖GPU实现对目标视频的绘制渲染，降低了动画播点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。[0161]对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发