视频处理方法和装置与流程

1.本发明涉及计算机技术领域，尤其涉及一种视频处理方法和装置。


背景技术：

2.随着web平台上媒体功能的逐渐应用及普及，视频由于高压缩率和易用性，已经被广泛应用在网页的装饰和内容中。但是，由于目前的网页视频播放不支持背景透明展示，使得网页中的视频难以很好地与网页中的文本等内容结合。例如，如果能够将天空或大海的特效视频与网页内容有机结合，则会丰富网页表现效果，但是由于当前技术的限制，这些特效视频中的背景部分无法透明化呈现导致无法实现以上有机结合。


技术实现要素：

3.有鉴于此，本发明实施例提供一种视频处理方法和装置，能够实现网页中视频背景的透明呈现。
4.为实现上述目的，根据本发明的一个方面，提供了一种视频处理方法。
5.本发明实施例的视频处理方法包括：在浏览器引擎创建视频标签，基于所述视频标签获取待处理视频；其中，所述待处理视频对应有预先制作的遮罩视频，所述遮罩视频与所述待处理视频具有形状和尺寸一致的主体部分以及背景部分；所述遮罩视频的主体部分像素为第一颜色、背景部分像素为不同于第一颜色的第二颜色；对于所述待处理视频和所述遮罩视频中的任一对视频帧，使用基于预设绘图协议的着色器将该对视频帧的遮罩帧中由第二颜色标识的背景部分像素的透明度置为表征高透明度的第一数值；对于该对视频帧的遮罩帧中由第一颜色标识的主体部分的任一像素，使用所述着色器将该对视频帧的待处理帧中的对应像素的颜色赋值到所述任一像素、将所述任一像素的透明度置为表征低透明度的第二数值，以使所述遮罩帧形成目标帧；将由所述目标帧组成的目标视频输出在网页进行展示。
6.可选地，所述方法进一步包括：在所述使用基于预设绘图协议的着色器将该对视频帧的遮罩帧中由第二颜色标识的背景部分像素的透明度置为表征高透明度的第一数值之前，在所述浏览器引擎创建画布标签，基于由所述画布标签形成的画布将该对视频帧作为纹理附着在调用所述绘图协议接口创建的缓冲区中。
7.可选地，第一颜色为白色；以及，所述使用所述着色器将该对视频帧的待处理帧中的对应像素的颜色赋值到所述任一像素，包括：确定所述待处理帧中与所述任一像素具有相同坐标的对应像素；将所述任一像素的像素值与所述对应像素的像素值相加，作为所述目标帧中所述任一像素的像素值。
8.可选地，第二颜色为黑色，第一数值为零，第二数值为一，所述着色器为顶点着色器。
9.可选地，所述视频标签为超文本标记语言html5的video标签，所述画布标签为html5的canvas标签，所述绘图协议为网页绘图协议webgl。
10.为实现上述目的，根据本发明的另一方面，提供了一种视频处理装置。
11.本发明实施例的视频处理装置可以包括：视频确定单元，用于在浏览器引擎创建视频标签，基于所述视频标签获取待处理视频；其中，所述待处理视频对应有预先制作的遮罩视频，所述遮罩视频与所述待处理视频具有形状和尺寸一致的主体部分以及背景部分；所述遮罩视频的主体部分像素为第一颜色、背景部分像素为不同于第一颜色的第二颜色；目标帧形成单元，用于：对于所述待处理视频和所述遮罩视频中的任一对视频帧，使用基于预设绘图协议的着色器将该对视频帧的遮罩帧中由第二颜色标识的背景部分像素的透明度置为表征高透明度的第一数值；对于该对视频帧的遮罩帧中由第一颜色标识的主体部分的任一像素，使用所述着色器将该对视频帧的待处理帧中的对应像素的颜色赋值到所述任一像素、将所述任一像素的透明度置为表征低透明度的第二数值，以使所述遮罩帧形成目标帧；输出单元，用于将由所述目标帧组成的目标视频输出在网页进行展示。
12.可选地，第一颜色为白色；所述装置进一步包括：缓冲单元，用于：在所述使用基于预设绘图协议的着色器将该对视频帧的遮罩帧中由第二颜色标识的背景部分像素的透明度置为表征高透明度的第一数值之前，在所述浏览器引擎创建画布标签，基于由所述画布标签形成的画布将该对视频帧作为纹理附着在调用所述绘图协议接口创建的缓冲区中；目标帧形成单元进一步用于：确定所述待处理帧中与所述任一像素具有相同坐标的对应像素；将所述任一像素的像素值与所述对应像素的像素值相加，作为所述目标帧中所述任一像素的像素值。
13.可选地，第二颜色为黑色，第一数值为零，第二数值为一，所述着色器为顶点着色器；所述视频标签为超文本标记语言html5的video标签，所述画布标签为html5的canvas标签，所述绘图协议为网页绘图协议webgl。
14.为实现上述目的，根据本发明的又一方面，提供了一种电子设备。
15.本发明的一种电子设备包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明所提供的视频处理方法。
16.为实现上述目的，根据本发明的再一方面，提供了一种计算机可读存储介质。
17.本发明的一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现本发明所提供的视频处理方法。
18.根据本发明的技术方案，上述发明中的实施例具有如下优点或有益效果：
19.在对网页中的待处理视频进行背景透明化处理之前，预先制作相应的遮罩视频，此遮罩视频除了颜色与待处理视频存在差异之外，其它方面均相同，在颜色方面，遮罩视频的主体部分和背景部分分别具有第一颜色和第二颜色，从而能够通过颜色准确区分视频中的主体和背景。在利用顶点着色器进行绘制时，由第二颜色定位遮罩视频中的背景并将其透明度置为零，由第一颜色定位遮罩视频中的主体并由待处理视频相应位置像素的颜色进行赋值(即赋值为本色)，从而在确保视频主体画面质量的前提下实现背景透明化，有利于扩大网页中视频的使用范围，提升视频使用效果，丰富网页内容表现。
20.上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。
附图说明
21.附图用于更好地理解本发明，不构成对本发明的不当限定。其中：
22.图1是本发明实施例中视频处理方法的主要步骤示意图；
23.图2是本发明实施例的待处理视频与遮罩视频示意图；
24.图3是本发明实施例的webgl绘制流程示意图；
25.图4是本发明实施例中视频处理方法的具体执行步骤示意图；
26.图5是本发明实施例中视频处理装置的组成部分示意图；
27.图6是根据本发明实施例可以应用于其中的示例性系统架构图；
28.图7是用来实现本发明实施例中视频处理方法的电子设备结构示意图。
具体实施方式
29.以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。
30.需要指出的是，在不冲突的情况下，本发明的实施例以及实施例中的技术特征可以相互结合。
31.图1是根据本发明实施例中视频处理方法的主要步骤示意图。
32.如图1所示，本发明实施例的视频处理方法可以由前端的web平台执行，具体执行步骤如下：
33.步骤s101：在浏览器引擎创建视频标签，基于视频标签获取待处理视频。
34.在本发明实施例中，以上浏览器引擎可以是支持html5(html为hypertext markup language，超文本标记语言)的任何浏览器引擎，视频标签可以是html5的video标签，视频标签用于在网页中定义视频，例如各种格式的视频流。在本步骤中，为了在网页中呈现背景透明化处理后的视频，web平台首先创建视频标签，并在为视频标签的各种参数(如视频流地址src)赋值以及添加视频标签的相关方法之后，将视频标签添加到网页中，由此实现视频元素的初始化，即获取到网页中的待处理视频。需要说明的是，以上待处理视频指的是利用src参数直接获取的初始视频，待处理视频中的主体和背景的颜色都是未经后续处理的初始颜色(即本色)。可以理解，以上主体指的是图像或视频中的待呈现目标，背景指的是主体之外的部分。
35.特别地，在本发明实施例的实际应用中，对于任一待处理视频，工作人员都预先制作一个对应的遮罩视频，遮罩视频与待处理视频的差异仅在于主体部分或者背景部分的颜色不同，其它地方均相同。也就是说，遮罩视频与相应的待处理视频具有形状和尺寸一致的主体部分，同时具有形状和尺寸一致的背景部分，二者的差异仅在于主体部分或者背景部分的某些像素的颜色可能不同。此外，在遮罩视频中，主体部分与背景部分能够通过颜色(即像素值)准确区分，主体部分像素为第一颜色，背景部分像素为第二颜色，其中第二颜色不同于第一颜色。例如，遮罩视频的主体部分被设置为白色(第一颜色)，背景部分被设置为黑色(第二颜色)，则后续能够通过白色像素值的选取定位到遮罩视频中所有的主体部分像素，能够通过黑色像素值的选取定位到遮罩视频中所有的背景部分像素。以上黑色和白色
仅为示例，第一颜色和第二颜色也可以采用其它的任意适用颜色。
36.显然，对于相互对应的待处理视频和遮罩视频，处在同一视频播放时刻的一对视频帧(包括待处理视频中的待处理帧和遮罩视频中的遮罩帧)是相互对应的，即，在一对视频帧中，待处理帧与遮罩帧仅可能存在主体部分或者背景部分的颜色差异，二者具有形状和尺寸一致的主体部分的背景部分。图2是本发明实施例的待处理视频与遮罩视频示意图，左半部分为遮罩视频在某时刻的遮罩帧，右半部分为待处理视频在同一时刻的待处理帧，可以看到，在左半部分的遮罩帧中，主体部分和背景部分被白、黑两种颜色严格分开；在右半部分的待处理帧中，主体部分的颜色为主体的本色，左右两部分仅具有主体部分的颜色差异。在本步骤中，web平台在获取到待处理视频之后，根据预先确定的存储地址获取到对应的遮罩视频。
37.步骤s102：对于待处理视频和遮罩视频中的任一对视频帧，使用基于预设绘图协议的着色器将该对视频帧的遮罩帧中由第二颜色标识的背景部分像素的透明度置为表征高透明度的第一数值；对于该对视频帧的遮罩帧中由第一颜色标识的主体部分的任一像素，使用着色器将该对视频帧的待处理帧中的对应像素的颜色赋值到所述任一像素、将所述任一像素的透明度置为表征低透明度的第二数值，以使遮罩帧形成目标帧。
38.在本步骤中，可以利用基于预设绘图协议如webgl(web graphics library，网页绘图协议)创建的着色器进行背景透明化处理。实际应用中，webgl系统中的着色器可以包括顶点着色器(vertex shader)和片元着色器(fragment shader)，这两种着色器都是显卡中的已知功能模块，顶点着色器一般用于对顶点相关数据进行计算，片元着色器一般用于处理光栅化后生成的片元，针对本步骤，主要由顶点着色器来执行背景透明化处理。
39.较佳地，web平台针对待处理视频和遮罩视频中的每一对视频帧执行类似处理过程以实现背景透明化。以其中任一对视频帧为例，在获取到待处理视频和遮罩视频之后，web平台首先在以上浏览器引擎创建画布标签(如html5的canvas标签)，由画布标签形成画布，并基于画布将该对视频帧作为纹理附着在调用以上绘图协议接口(如webgl的createbuffer接口)所创建的缓冲区中，此后则可以在缓冲区中执行背景透明化处理。可以理解，以上画布标签也可以在历史时刻预先创建完成。
40.具体地，web平台使用顶点着色器针对遮罩帧独立执行两方面的步骤，这两方面的步骤可以任何顺序先后执行，也可以同时执行。第一方面，web平台将该对视频帧的遮罩帧中由第二颜色标识的背景部分像素的透明度(即alpha取值)置为第一数值，第一数值代表高透明度(包括完全透明)，可以根据实际情况取零或者接近于零的数值(如小于0.1的正数)。如此，通过第二颜色准确定位遮罩帧中的背景部分进而将其透明度设置为零，实现了背景部分的透明化。
41.第二方面，对于该对视频帧的遮罩帧中由第一颜色标识的主体部分的任一像素，web平台将该对视频帧的待处理帧中的对应像素(即在待处理帧中的坐标与以上任一像素在遮罩帧中坐标相同的像素)的颜色赋值到以上任一像素，并且将以上任一像素的透明度置为第二数值，第二数值代表低透明度(包括不透明)，可以根据实际情况取1或者略小于1的数值(如0.9与1之间的值)。这样，web平台首先利用第一颜色准确定位遮罩帧中的主体部分，进而通过待处理帧中的对应像素的本色为主体部分赋值，并且设置主体部分为低透明度，由此实现主体部分的颜色还原和在网页中的正常呈现。经过以上处理，上述遮罩帧最终
形成具有透明背景以及本色主体、符合预先展示要求的目标帧，当遮罩视频中的各遮罩帧成为目标帧，则遮罩视频成为具有透明背景以及本色主体、符合预先展示要求的目标视频。
42.实际应用中，通过视频标签生成的视频的背景一般为黑色，因而在某些传统技术中，通过直接将黑色像素的透明度置为零来实现背景透明化，但是，由于主体像素中往往也含有黑色像素，这种处理方法对画面质量具有较为严重的破坏。本发明的以上方法能够克服这一缺陷，从以上说明能够看到，本发明是首先通过遮罩视频来严格界定主体和背景，此后针对分割准确的主体和背景分别执行透明度和颜色的赋值来实现背景透明化，因而不会对画面主体形成任何破坏。
43.在一个实施例中，当遮罩视频中主体部分的颜色为白色时，web平台可以采用图像相加的方式实现颜色赋值。具体地，在这种情况下，web平台首先确定待处理帧中与上述任一像素具有相同坐标的对应像素，此后将上述任一像素的像素值与对应像素的像素值相加，作为目标帧中上述任一像素的像素值，从而更为方便地实现遮罩视频中主体部分像素的颜色赋值。
44.步骤s103：将由目标帧组成的目标视频输出在网页进行展示。
45.在本步骤中，web平台将此前生成的具有透明背景以及本色主体、符合预先要求的目标视频绘制在网页进而展示给用户，从而实现透明背景视频的页面展示，由于目标视频能够与网页中的文本等内容有机结合，所有本发明方案能够扩大网页中视频的使用范围，提升视频使用效果，丰富网页内容表现。
46.图3是本发明实施例的webgl绘制流程示意图，参见图3，首先javascript通过webgl提供的接口创建缓冲区对象，并将必要的坐标及颜色信息传入缓冲区。接着，顶点着色器读取缓冲区对象的数据，根据传入的参数分别提取出顶点坐标和对应的rgb(即红绿蓝三原色)颜色分量值。在得到了顶点坐标的数据之后，需要经图形绘制过程通知webgl根据顶点坐标绘制图形。此后，通过光栅化处理将图形覆盖的区域转换成像素填充信息，光栅化处理涉及抗锯齿、采样等已知算法。光栅化处理结束后，webgl逐片元调用片元着色器进行绘制，最终每个像素都被填充了光栅化处理后的颜色，并写入颜色缓冲区，从而在浏览器中显示出最终的图形和颜色。
47.以下说明本发明的一个具体实施例，该实施例涉及在网页中引入动画视频。参见图2和图4。
48.现有的实现网页中引入视频的方式可以采用以下几种：
49.第一，gif动画：gif是一种压缩位图格式，支持透明背景图像，适用于多种操作系统，gif是将多幅图像保存为一个图像文件，从而形成视频，制作方式可以通过相关软件制作，最终由前端工程师利用前端技术嵌入到网页中。
50.第二，video视频动画：video是html5新引入的标签元素，可以直接将视频文件地址赋值给属性src来完成视频的呈现，同时可以设置视频自动播放、循环播放来实现视频效果。
51.第三，css3(css为cascading style sheets，层叠样式表)动画：css3过渡动画可以在某个元素样式或状态改变时进行平滑的动画效果过度，从而实现动画视频的效果。css3 animation是真正意义上的css3动画，其通过关键帧和循环次数的控制，页面标签元素会根据设定好的样式改变进行平滑过渡，并且可以实现复杂的动画效果。
52.以上三种方式只是目前在前端开发中用到最频繁的动画技术，除此之外，动画实现还可以借助其他的技术实现，如：flash、javascript+html、javascript+canvas等。
53.现有的实现网页中引入动画视频的方式具有以下缺点：
54.(1)gif动画只支持256色，所以在详细的动画中可能会看起来是经过调色的，同时只支持有限的透明度，没有半透明或褪色效果，除此之外，高清的gif动画体积是比较大的，如果经过压缩展示，会因为失帧而出现交互差的情况。体积较大会在前端页面性能方面造成一定的影响，如果在首屏渲染过程中引入大量的gif图像，则会出现由于加载而阻塞页面渲染，进而出现白屏现象，这种情况下，用户体验是非常差的。
55.(2)video标签的背景颜色默认为黑色，如果想要实现其他颜色可以使用css样式及层级元素z-index进行修改和覆盖，但是无法实现透明背景。
56.(3)css3是目前比较流行的动画实现方式，但是它的动画实现局限于某一个标签元素，且动画效果是比较简单、单一的，如：旋转、缩放、渐进等，更适合于优化页面的交互效果，满足用户的基本感知，但是如果要想实现复杂的动画效果，那么css3属性是完全不够的。
57.本实施例主要解决web前端页面需要展示复杂动画效果时，现有的技术手段会造成静态资源过多、体积过大、进而导致页面加载慢等诸多缺点，同时也会出现因现有资源实现效果过于简单而达不到目标值的情况。此发明利用webgl可在任何兼容的web浏览器中渲染高性能的交互式3d和2d图形的天然优势以及canvas良好的渲染动画的良好性能特点，通过对video标签进行重新构造及优化，使其具有“alpha通道(即透明度)”来实现背景颜色可透明的效果，再结合video标签的可循环、自动播放、声道等特点，实现性能佳、体积小、同时可播放声音的动画展示。最终再进行进一步的封装、打包，之后发布到npm(node package manager，软件包管理工具)源中，对于用户其只是一个插件，只需要下载、配置相应参数及可实现简单的使用。
58.此技术方案最终会将其发布到npm上作为插件使用，一定程度上降低了用户对于代码的学习成本，可做到开箱即用，同时此插件结合了canvas、webgl、video等技术的良好特性，在web前端页面使用并展示时，降低了对页面性能消耗，减少了不必要的卡顿，用户体验良好。
59.本实施例的具体执行步骤如下：
60.第一步：定义一个类，即javascript中的构造函数alphavideo，设置默认参数autoplay：true(是否自动播放)、onerror(错误处理函数)、onplay(播放视频函数)，除此之外，此构造函数还可以设置参数src(视频流地址)、loop(是否循环播放)、canvas(动画的canvas画布元素)、width(宽度)、height(高度)，后续在调用这个构造函数并传入相应的参数后，能够返回背景透明的目标视频。
61.第二步，初始化视频video元素，首先需要调用document.createelement(
‘
video’)方法创建video标签，并将用户传入参数以及默认参数赋值，再调用addeventlistener方法在video标签上添加play(重新绘制动画)以及error(错误处理)方法，最终使用document.body.appendchild方法将video标签添加到网页中。
62.第三步，video视频元素初始化之后，调用webgl提供的textimage2d方法，设置texture_2d为纹理对象，同时指定颜色标准位rgb，像素数据的数据类型为unsigned_type，
最后指定图像的指针为视频元素video从而将纹理对象与视频绑定，并调用webgl提供的drawarrays方法开始绘制图形。
63.第四步，由于一个视频动画是由很多帧形成的，在本实施例中对每一帧的处理都是相同的，可以利用循环步骤来处理视频动画中的每一帧。
64.在获取到视频的每一帧之后，需要将每一帧中需要透明的区域找出，并设置为透明，由于动画的原色可能也会是黑色的，所以如果直接找到黑色元素并设置为透明，很可能会破坏原动画的效果，此时需要ui设计师预先制作一个左右对称的视频(参见图2，即预先制作遮罩视频)，即左侧的遮罩视频动画元素为白色，背景为黑色，右侧的待处理视频动画原色为本色，背景为本色。具体操作时，可以解析左侧的像素点，白色代表主体，黑色代表需要修改为透明的背景，获取定位到左侧主体在右侧对应像素的rgb并将其赋值给左侧白色区域并设置透明度是1，于是完成左侧白色像素的颜色还原，另一方面将左侧背景像素的透明度设置为零，于是使左侧黑色背景转换为透明背景，以下为其中涉及到的主要步骤：
65.第一，获取canvas画布元素，对其宽度和高度进行设置，如果检测到dom(document object model，文档对象模型)元素中没有，则使用document.createelement(
‘
canvas’)创建，并使用appendchild方法将其加入到dom元素中，调用canvas的方法getcontext(
‘
webgl’)创建一个webglrenderingcontext三维渲染上下文对象，用于在html中的canvas元素内绘图。
66.第二，调用new float32array()设置缓冲区位置坐标，调用webgl提供的createbuffer()创建缓冲区，调用webgl的bindbuffer()将缓冲区对象绑定到遮罩视频和待处理视频，最后调用webgl的bufferdata()方法将缓冲区对象写入到顶点数据中。实际应用中，可以创建两个缓冲区分别存储整帧图像(即遮罩帧结合待处理帧)和左侧图像(遮罩帧)，前者可便于颜色和透明度赋值的执行，后者可用于目标帧的写入。
67.第三，顶点着色器读取缓冲区对象的数据，根据图像的顶点坐标以及对应的rgb值进行重新绘制，调用texture2d方法进行转换，即可实现透明背景。
68.第四，执行光栅化处理，实现颜色的平滑过渡。
69.第五，光栅化结束后，逐片元调用片元着色器，将每个像素填充光栅化处理后的颜色，呈现最终效果。
70.以上过程只是一帧图像的完整步骤，对于视频需要循环处理每一帧图像，此时可以使用requestanimationframe()方法实现这个功能。
71.在对多个视频进行背景透明化处理时，可以对外抛出alphavideo构造函数，用户使用时，只需基于构造函数创建实例，并传入预先定义的参数，最终调用av.play()(av表示实例名)即会呈现最终的效果，以上方法最终打包发布到npm，用户直接通过npm install alphavideo命令即可下载使用。
72.如此，能够基于webgl技术结合canvas画布、video实现对动画视频的透明背景效果，可以降低动画视频的体积和客户端的性能消耗，同时提供简易的方法做到开箱即用。
73.需要说明的是，对于前述的各方法实施例，为了便于描述，将其表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明并不受所描述的动作顺序的限制，某些步骤事实上可以采用其它顺序进行或者同时进行。此外，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是实现本发明所必须
的。
74.为便于更好的实施本发明实施例的上述方案，下面还提供用于实施上述方案的相关装置。
75.请参阅图5所示，本发明实施例提供的视频处理装置可以包括：视频确定单元501、目标帧形成单元502和输出单元503。
76.其中，视频确定单元501可用于在浏览器引擎创建视频标签，基于所述视频标签获取待处理视频；其中，所述待处理视频对应有预先制作的遮罩视频，所述遮罩视频与所述待处理视频具有形状和尺寸一致的主体部分以及背景部分；所述遮罩视频的主体部分像素为第一颜色、背景部分像素为不同于第一颜色的第二颜色；目标帧形成单元502可用于：对于所述待处理视频和所述遮罩视频中的任一对视频帧，使用基于预设绘图协议的着色器将该对视频帧的遮罩帧中由第二颜色标识的背景部分像素的透明度置为表征高透明度的第一数值；对于该对视频帧的遮罩帧中由第一颜色标识的主体部分的任一像素，使用所述着色器将该对视频帧的待处理帧中的对应像素的颜色赋值到所述任一像素、将所述任一像素的透明度置为表征低透明度的第二数值，以使所述遮罩帧形成目标帧；输出单元503可用于将由所述目标帧组成的目标视频输出在网页进行展示。
77.在本发明实施例中，第一颜色为白色；所述装置500可进一步包括：缓冲单元，用于：在所述使用基于预设绘图协议的着色器将该对视频帧的遮罩帧中由第二颜色标识的背景部分像素的透明度置为表征高透明度的第一数值之前，在所述浏览器引擎创建画布标签，基于由所述画布标签形成的画布将该对视频帧作为纹理附着在调用所述绘图协议接口创建的缓冲区中；目标帧形成单元502可进一步用于：确定所述待处理帧中与所述任一像素具有相同坐标的对应像素；将所述任一像素的像素值与所述对应像素的像素值相加，作为所述目标帧中所述任一像素的像素值。
78.作为一个优选方案，第二颜色为黑色，第一数值为零，第二数值为一，所述着色器为顶点着色器；所述视频标签为超文本标记语言html5的video标签，所述画布标签为html5的canvas标签，所述绘图协议为网页绘图协议webgl。
79.根据本发明实施例的技术方案，在对网页中的待处理视频进行背景透明化处理之前，预先制作相应的遮罩视频，此遮罩视频除了颜色与待处理视频存在差异之外，其它方面均相同，在颜色方面，遮罩视频的主体部分和背景部分分别具有第一颜色和第二颜色，从而能够通过颜色准确区分视频中的主体和背景。在利用顶点着色器进行绘制时，由第二颜色定位遮罩视频中的背景并将其透明度置为零，由第一颜色定位遮罩视频中的主体并由待处理视频相应位置像素的颜色进行赋值，从而在确保视频主体画面质量的前提下实现背景透明化，有利于扩大网页中视频的使用范围，提升视频使用效果，丰富网页内容表现。
80.图6示出了可以应用本发明实施例的视频处理方法或视频处理装置的示例性系统架构600。
81.如图6所示，系统架构600可以包括终端设备601、602、603，网络604和服务器605(此架构仅仅是示例，具体架构中包含的组件可以根据申请具体情况调整)。网络604用以在终端设备601、602、603和服务器605之间提供通信链路的介质。网络604可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等。
82.用户可以使用终端设备601、602、603通过网络604与服务器605交互，以接收或发
送消息等。终端设备601、602、603上可以安装有各种客户端应用，例如浏览器应用(仅为示例)。
83.终端设备601、602、603可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。
84.服务器605可以是提供各种服务的服务器，例如对用户利用终端设备601、602、603所操作的浏览器应用提供支持的网页服务器(仅为示例)。网页服务器可以对接收到的网页请求进行处理，并将处理结果(例如所请求的网页
‑‑
仅为示例)反馈给终端设备601、602、603。
85.需要说明的是，本发明实施例所提供的视频处理方法一般由服务器605执行，相应地，视频处理装置一般设置于服务器605中。
86.应该理解，图6中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
87.本发明还提供了一种电子设备。本发明实施例的电子设备包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明所提供的视频处理方法。
88.下面参考图7，其示出了适于用来实现本发明实施例的电子设备的计算机系统700的结构示意图。图7示出的电子设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。
89.如图7所示，计算机系统700包括中央处理单元(cpu)701，其可以根据存储在只读存储器(rom)702中的程序或者从存储部分708加载到随机访问存储器(ram)703中的程序而执行各种适当的动作和处理。在ram703中，还存储有计算机系统700操作所需的各种程序和数据。cpu701、rom 702以及ram 703通过总线704彼此相连。输入/输出(i/o)接口705也连接至总线704。
90.以下部件连接至i/o接口705：包括键盘、鼠标等的输入部分706；包括诸如阴极射线管(crt)、液晶显示器(lcd)等以及扬声器等的输出部分707；包括硬盘等的存储部分708；以及包括诸如lan卡、调制解调器等的网络接口卡的通信部分709。通信部分709经由诸如因特网的网络执行通信处理。驱动器710也根据需要连接至i/o接口705。可拆卸介质711，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器710上，以便从其上读出的计算机程序根据需要被安装入存储部分708。
91.特别地，根据本发明公开的实施例，上文的主要步骤图描述的过程可以被实现为计算机软件程序。例如，本发明实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行主要步骤图所示的方法的程序代码。在上述实施例中，该计算机程序可以通过通信部分709从网络上被下载和安装，和/或从可拆卸介质711被安装。在该计算机程序被中央处理单元701执行时，执行本发明的系统中限定的上述功能。
92.需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便
携式计算机磁盘、硬盘、随机访问存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(eprom或闪存)、光纤、便携式紧凑磁盘只读存储器(cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。在本发明中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、rf等等，或者上述的任意合适的组合。
93.附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这根据所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
94.描述于本发明实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中，例如，可以描述为：一种处理器包括视频确定单元、目标帧形成单元和输出单元。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定，例如，视频确定单元还可以被描述为“向目标帧形成单元提供待处理视频和遮罩视频的单元”。
95.作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中的。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该设备执行时，使得该设备执行的步骤包括：在浏览器引擎创建视频标签，基于所述视频标签获取待处理视频；其中，所述待处理视频对应有预先制作的遮罩视频，所述遮罩视频与所述待处理视频具有形状和尺寸一致的主体部分以及背景部分；所述遮罩视频的主体部分像素为第一颜色、背景部分像素为不同于第一颜色的第二颜色；对于所述待处理视频和所述遮罩视频中的任一对视频帧，使用基于预设绘图协议的着色器将该对视频帧的遮罩帧中由第二颜色标识的背景部分像素的透明度置为表征高透明度的第一数值；对于该对视频帧的遮罩帧中由第一颜色标识的主体部分的任一像素，使用所述着色器将该对视频帧的待处理帧中的对应像素的颜色赋值到所述任一像素、将所述任一像素的透明度置为表征低透明度的第二数值，以使所述遮罩帧形成目标帧；将由所述目标帧组成的目标视频输出在网页进行展示。
96.在本发明实施例的技术方案中，在对网页中的待处理视频进行背景透明化处理之前，预先制作相应的遮罩视频，此遮罩视频除了颜色与待处理视频存在差异之外，其它方面
均相同，在颜色方面，遮罩视频的主体部分和背景部分分别具有第一颜色和第二颜色，从而能够通过颜色准确区分视频中的主体和背景。在利用顶点着色器进行绘制时，由第二颜色定位遮罩视频中的背景并将其透明度置为零，由第一颜色定位遮罩视频中的主体并由待处理视频相应位置像素的颜色进行赋值，从而在确保视频主体画面质量的前提下实现背景透明化，有利于扩大网页中视频的使用范围，提升视频使用效果，丰富网页内容表现。
97.上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。