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

(19)国家知识产权局

(12)发明专利

(10)授权公告号CN112884665B(45)授权公告日2025.07.15

(21)申请号202110098923.5

(22)申请日2021.01.25

(65)同一申请的已公布的文献号申请公布号CN112884665A

(43)申请公布日2021.06.01

(73)专利权人腾讯科技(深圳)有限公司

地址518000广东省深圳市南山区高新区

科技中一路腾讯大厦35层

(72)发明人罗飞虎

(74)专利代理机构深圳市深佳知识产权代理事务所(普通合伙)44285

专利代理师王兆林

(51)Int.CI.

GO6T5/73(2024.01)

GO6T13/00(2011.01)

(56)对比文件

CN111901616A,2020.11.06CN109688465A,2019.04.26

CN106331850A,2017.01.11审查员杜旦杰

权利要求书2页说明书11页附图7页

(54)发明名称

一种动画播放方法、装置、计算机设备及存储介质

(57)摘要

CN112884665B本申请提供一种动画播放方法、装置、计算机设备及存储介质，确定动画播放请求所请求播放的目标视频，在浏览器引擎创建video标签和canvas标签，进而基于video标签实现对目标视频的低清视频流的拉取、加载及隐藏播放，并基于canvas标签将当前video标签中隐藏播放的视频帧绘制到webGL接口中的着色器，通过着色器的接口调用GPU实现对着色器中视频帧的锐化、抠图处理得到目标视频帧，并将目标视频帧渲染至指定位置(指定位置与响应动画播放请求展示的页面有关)。本申请依赖于GPU不仅实现了基于低清视频实现高清动画播放的目的、而且降低了动画播放对电子设备

CN112884665B

接收动画播放请求，确定动百播放请求所请求播放的目标视频

在浏览器引擎创建vidoo标签和canvas标签

调用video标签拉取、加载并隐藏播放目标视频的低清视频流

基于canvas标签将当前vidoo标签中隐藏播放的视频赖绘制到webGL接口中的着色器

通过着色器的接口调用GPU对着色器中的视频帧进行锐化、抠图处理得到目标视频赖，渲染目标视频帧至指定位置：指定位置与响应动画播放请求展示的页面有关

S301

S302

S303

S304

S304

CN112884665B权利要求书1/2页

2

1.一种动画播放方法，其特征在于，应用于动画播放系统，包括：

接收动画播放请求，确定动画播放请求所请求播放的目标视频，所述目标视频为单一背景色的视频，所述动画播放请求还指示播放环境背景图像；

在浏览器引擎创建video标签和canvas标签；

调用所述video标签拉取、加载并隐藏播放所述目标视频的低清视频流；

基于所述canvas标签将当前所述video标签中隐藏播放的视频帧绘制到webGL接口中的着色器；

通过所述着色器的接口调用GPU对所述着色器中的所述视频帧进行锐化、抠图处理得到目标视频帧，渲染所述目标视频帧至指定位置，其中包括：GPU对所述着色器中的所述视频帧进行卷积数字图像处理得到高清视频帧；采用色度抠像ChromaKey对所述高清视频帧进行抠图得到目标视频帧；将所述目标视频帧渲染至响应所述动画播放请求展示的页面中的指定位置；所述指定位置与响应所述动画播放请求展示的页面有关；

创建目标容器并在所述目标容器中加载所述环境背景图像，所述环境背景图像为环境背景视频流或单张环境背景图像；

渲染所述目标容器中的所述环境背景图像至所述指定位置；

监听所述目标视频对应的所述video标签的接口，确定当前所述目标视频的播放时间点；

若所述播放时间点满足预先设置的播放控制条件，基于预先设置的与所述播放控制条件匹配的控制方式控制所述目标视频的播放；

基于所述目标视频对应的所述video标签的接口控制所述目标视频的播放状态，所述播放状态包括暂停、播放、切换、快进、后退中的任意一种或多种。

2.根据权利要求1所述的方法，其特征在于，还包括：

通过所述浏览器引擎向所述着色器传输与所述目标视频的背景颜色匹配的参数；

所述通过所述着色器的接口调用GPU对所述着色器中的所述视频帧进行锐化、抠图处理得到目标视频帧，渲染所述目标视频帧至指定位置，包括：