【技术实现步骤摘要】
本专利技术涉及计算机，特别是涉及一种小程序中实现透明视频氛围的方法及系统。
技术介绍
1、在小程序里，目前并未提供透明视频播放的能力，这在一些需要展示酷炫复杂的氛围时，可能是序列帧动画，或是简单的矢量动画，对于能有更好表现的位图视频，则可用的手段十分有限。
2、市面上透明视频播放方案有如afx、png序列帧动画、lottie等，播放方式则是手动在符合条件时播放，需求变更都需要重新开发埋点和配置视频，浪费人力物力，效率较低，而lottie仅支持矢量图，不支持复杂的视频内容播放。
技术实现思路
1、有鉴于此，本公开实施例提供一种小程序中实现透明视频氛围的方法，至少部分解决现有技术中存在的问题。
2、第一方面，本公开实施例提供了一种小程序中实现透明视频氛围的方法，所述方法包括以下步骤：
3、逐帧解析视频的像素信息，得到每一帧的像素数据；
4、在webgl中创建自定义的着色器进行图像渲染；
5、基于项目的页面、组件、事件在中台中进行配置播放事件触发器；当在小程序中符合播放条件时，触发加载/播放对应的透明视频氛围的事件。
6、根据本公开实施例的一种具体实现方式，所述方法还包括：
7、在所述事件触发时，获取当前执行的运行时的上下文数据。
8、根据本公开实施例的一种具体实现方式，所述逐帧解析视频的像素信息，得到每一帧的像素数据，包括：
9、将原始视频处理为可使用自定义着色器的视频，并且原视
10、使用ffmpeg对视频进行处理，生成双倍尺寸的视频；其中，透明通道用白色表示，原视频用正常原彩表示。
11、根据本公开实施例的一种具体实现方式，所述在webgl中创建自定义的着色器进行图像渲染，包括：
12、使用2个自定义着色器对每一帧信息的像素进行处理，根据左侧的像素数据和右侧原始帧数据，计算出需要绘制的像素；
13、将计算后的像素数据通过webgl.drawarrays逐帧绘制到canvas上下文中，绘制出符合预期的透明视频。
14、根据本公开实施例的一种具体实现方式，所述根据左侧的像素数据和右侧原始帧数据，计算出需要绘制的像素，包括：
15、使用顶点着色器将顶点位置和纹理坐标发送至gpu，进行变换并且输出变换后的位置和纹理坐标；
16、将所述变换后的位置和纹理坐标发送至片原着色器，对每一个像素进行颜色计算，基于rgb颜色与左侧纹理采样组合成输出新的像素信息，最终输出到屏幕上。
17、第二方面，本公开实施例提供了一种小程序中实现透明视频氛围的系统，所述系统包括：
18、解析模块，被配置用于逐帧解析视频的像素信息，得到每一帧的像素数据；
19、渲染模块，被配置用于在webgl中创建自定义的着色器进行图像渲染；
20、触发模块，被配置用于基于项目的页面、组件、事件在中台中进行配置播放事件触发器；当在小程序中符合播放条件时，触发加载/播放对应的透明视频氛围的事件。
21、根据本公开实施例的一种具体实现方式，所述系统还包括：
22、处理模块，被配置用于将原始视频处理为可使用自定义着色器的视频，并且原视频在特效软件中导出时，保留透明通道数据；以及，
23、使用ffmpeg对视频进行处理，生成双倍尺寸的视频；其中，透明通道用白色表示，原视频用正常原彩表示。
24、第三方面，本公开实施例还提供了一种电子设备，该电子设备包括：
25、至少一个处理器；以及，
26、与所述至少一个处理器通信连接的存储器；其中，
27、所述存储器存储有能够被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行时，使所述至少一个处理器前述第一方面或第一方面的任一实现方式中的任一项所述的小程序中实现透明视频氛围的方法。
28、第四方面，本公开实施例还提供了一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令当由至少一个处理器执行时使所述至少一个处理器执行前述第一方面或第一方面的任一实现方式中的小程序中实现透明视频氛围的方法。
29、第五方面，本公开实施例还提供了一种计算机程序产品，所述计算机程序产品包括存储在非暂态计算机可读存储介质上的计算程序，所述计算机程序包括程序指令，当所述程序指令被计算机执行时，使该计算机执行前述第一方面或第一方面的任一实现方式中的小程序中实现透明视频氛围的方法。
30、本公开实施例中的小程序中实现透明视频氛围的方法，通过这一技术方案，可以在配置系统中对小程序业务中任意页面和事件进行播放埋点配置而无需修改代码。在符合埋点条件时，调起视频播放组件，进行透明视频播放来达到氛围渲染效果，提升用户体验。
本文档来自技高网...【技术保护点】
1.一种小程序中实现透明视频氛围的方法，其特征在于，所述方法包括以下步骤：
2.根据权利要求1所述的小程序中实现透明视频氛围的方法，其特征在于，所述方法还包括：
3.根据权利要求1所述的小程序中实现透明视频氛围的方法，其特征在于，所述逐帧解析视频的像素信息，得到每一帧的像素数据，包括：
4.根据权利要求1所述的小程序中实现透明视频氛围的方法，其特征在于，所述在webgl中创建自定义的着色器进行图像渲染，包括：
5.根据权利要求4所述的小程序中实现透明视频氛围的方法，其特征在于，所述根据左侧的像素数据和右侧原始帧数据，计算出需要绘制的像素，包括：
6.一种小程序中实现透明视频氛围的系统，其特征在于，所述系统包括：
7.根据权利要求6所述的小程序中实现透明视频氛围的系统，其特征在于，所述系统还包括：
8.一种电子设备，其特征在于，该电子设备包括：
9.一种非暂态计算机可读存储介质，其特征在于，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令当由至少一个处理器执行时使所述至少一个处
...【技术特征摘要】
1.一种小程序中实现透明视频氛围的方法，其特征在于，所述方法包括以下步骤：
2.根据权利要求1所述的小程序中实现透明视频氛围的方法，其特征在于，所述方法还包括：
3.根据权利要求1所述的小程序中实现透明视频氛围的方法，其特征在于，所述逐帧解析视频的像素信息，得到每一帧的像素数据，包括：
4.根据权利要求1所述的小程序中实现透明视频氛围的方法，其特征在于，所述在webgl中创建自定义的着色器进行图像渲染，包括：
5.根据权利要求4所述的小程序中实现透明视频氛围的方法，其特征在于，所述...
【专利技术属性】
技术研发人员：曹悦，
申请(专利权)人：艺龙网信息技术北京有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。