一种移动端网页视频背景处理方法、系统、储存介质与流程

1.本发明涉及网页视频背景处理领域，具体指有一种移动端网页视频背景处理方法、系统、储存介质。


背景技术：

2.网页视频背景是浏览器以动态视频作为文字、标题等的背景，呈现出动态效果。
3.目前移动端浏览器对于web标准实现并不统一，使用原生的video元素实现网页的视频背景会有很多兼容性问题，诸如：视频无法自动播放、视频元素作为弹窗元素无法被覆盖、无法隐藏播放按钮、视频会默认全屏播放等，从而导致网页视频背景在移动端浏览器失效。如图1所示，图1中左侧的图片为网页视频背景正常显示的移动端截图，中间和右边的图片为出现兼容性问题导致图层错位或无法自动播放出现的情况的移动端截图。
4.针对上述的现有技术存在的问题设计一种移动端网页视频背景处理方法、系统、储存介质是本发明研究的目的。


技术实现要素：

5.针对上述现有技术存在的问题，本发明在于提供一种移动端网页视频背景处理方法、系统、储存介质，能够有效解决上述现有技术存在的问题。
6.本发明的技术方案是：
7.一种移动端网页视频背景处理方法，包含以下步骤：
8.s1，获取视频文件及所述视频文件的视频格式类型，所述视频格式类型包括第一视频格式合集、第二视频格式合集；
9.s2，获取浏览器useragent属性，若所述浏览器支持标准video元素且所述视频格式类型属于第一视频格式合集，转至步骤s3，其它，转至步骤s4；
10.s3，调用标准video元素播放所述视频文件作为视频背景；
11.s4，将所述视频文件解码并逐帧绘制成多张图片，按时序播放所述图片作为视频背景。
12.进一步地，步骤s4中，所述视频文件解码并通过canvas接口逐帧绘制成多张图片。
13.进一步地，步骤s4中，所述将所述视频文件解码并逐帧绘制成多张图片具体为：
14.对所述浏览器进行浏览器能力检测，选用浏览器支持且合适的浏览器接口将所述视频文件解码并逐帧绘制成多张图片。
15.进一步地，对所述浏览器进行浏览器能力检测，获取所述浏览器对web workers接口、webgl接口的支持支持情况。
16.进一步地，所述选用浏览器支持且合适的浏览器接口具体为：
17.若所述浏览器不支持所述web workers接口也不支持所述webgl接口，选用所述浏览器的canvas 2d接口；
18.若所述浏览器不支持所述web workers接口、支持所述webgl接口，选用所述浏览
器的canvas webgi接口；
19.若所述浏览器支持所述web workers接口、不支持所述webgl接口，选用所述浏览器的canvas 2d接口；
20.若所述浏览器支持所述web workers接口也支持所述webgl接口，选用所述浏览器的canvas webgi接口。
21.进一步地，
22.若所述浏览器不支持所述web workers接口，所述浏览器通过主程序解码所述视频文件；
23.若所述浏览器支持所述web workers接口，所述浏览器通过web workers接口解码所述视频文件。
24.进一步地，所述canvas webgi接口通过gpu渲染。
25.进一步地，所述第一视频格式合集至少包含mp4格式，所述第二视频格式合集至少包含ts格式。
26.进一步提供一种移动端网页视频背景处理系统，包含：
27.获取模块，用于获取视频文件及所述视频文件的视频格式类型，所述视频格式类型包括第一视频格式合集、第二视频格式合集；
28.浏览器属性判断模块，用于获取浏览器useragent属性，判断所述浏览器是否支持标准video元素且所述视频格式类型属于第一视频格式合集，若是则转至步骤s3，若否则转至步骤s4；
29.标准video元素播放模块，用于若所述浏览器支持标准video元素，调用标准video元素播放所述视频文件作为视频背景；
30.绘图播放模块，用于若所述浏览器不支持标准video元素，将所述视频文件解码并逐帧绘制成多张图片，按时序播放所述图片作为视频背景。
31.进一步提供一种计算机可读存储介质，存储有计算机程序，所述计算机程序被处理器执行时实现上述所述的网页视频背景处理处理方法。
32.因此，本发明提供以下的效果和/或优点：
33.本发明通过获取浏览器useragent属性，对不同的浏览器采取不同的视频处理策略。从而兼容移动端浏览器，实现网页视频背景。
34.本发明对不兼容的移动端浏览器，将所述视频文件解码并逐帧绘制成多张图片，按时序播放所述图片，实现网页视频背景，能够对不同的浏览器、不同的视频文件格式、不同的硬件设备实现网页视频背景。
35.本发明的视觉效果更好，而视频则不受此限制，其可以使用完整的rgb24位色(16777216种颜色)来表示图片，所以视频背景的视觉效果会更好。本发明可以做播放控制，gif图片无法做播放控制，而本发明可以通过视频的播放暂停等操作来实现视频背景的播放控制。
36.本发明通过对不同的浏览器的能力情况，对于支持webgl能力的浏览器，可使用webgl来直接生成视频图片的纹理，可直接使用gpu渲染的能力以提高图片绘制渲染的效率，从而降低资源生产成本，相对与gif视频资源更丰富且生产成本更低。而gif在生产过程往需要考虑体积的影响需要做很多诸如：压缩、抽帧、裁剪等优化操作，大大降低了生成门
槛。
37.本发明通过对于支持web workers的浏览器可将视频解码的工作交由web workers线程来完成，减小对浏览器主程的资源占用，以提升程序执行的效率，对于不支持web workers的浏览器可将视频解码的工作交由主程序来完成，保证背景视频的生成。
38.应当明白，本发明的上文的概述和下面的详细说明是示例性和解释性的，并且意在提供对如要求保护的本发明的进一步的解释。
附图说明
39.图1为不同的移动端浏览器显示的网页视频背景截图。
40.图2为本发明的主流程示意图。
41.图3为本发明的总流程示意图。
42.图4为帧图片集的示意图。
具体实施方式
43.为了便于本领域技术人员理解，现将实施例结合附图对本发明的结构作进一步详细描述：
44.参考图2
‑
3，一种移动端网页视频背景处理方法，包含以下步骤：
45.s1，获取视频文件及所述视频文件的视频格式类型，所述视频格式类型包括第一视频格式合集、第二视频格式合集；本实施例中，获取所述视频文件后，解析所述视频文件的信息，信息至少包括视频格式类型，例如mp4、ts、avi等，本实施例对视频文件的格式没有要求，获取视频文件的格式是为了便于后续采用相应的策略，例如标准video元素可以直接解码mp4格式的视频文件，而不能解码例如ts格式的视频文件，因此在此步骤进一步确认视频文件的格式，有利于后续的处理步骤对不同的视频文件进行不同的区别处理。
46.s2，获取浏览器useragent属性，若所述浏览器支持标准video元素且所述视频格式类型属于第一视频格式合集，转至步骤s3，其它，转至步骤s4。浏览器useragent属性是指浏览器的信息，包括硬件平台、系统软件、应用软件和用户个人偏好，通过浏览器useragent属性可以分析出浏览器名称、浏览器版本号、渲染引擎、操作系统。使用方法直接打开查看即可，也可以把其它浏览器的浏览器useragent属性复制过来进行分析。例如对iphone6获取浏览器useragent属性，可得到例如：“mozilla/5.0(iphone；cpu iphone os 9_1like mac os x)applewebkit/601.1.46(khtml,like gecko)version/9.0mobile/13b143 safari/601.1”这样的一排数据，其中包括了硬件平台是iphone，采用applewebkit，版本version/9.0移动端，浏览器是safari/601.1。不同的浏览器对视频文件的格式支持的能力不同，通过浏览器useragent属性可区分出不同的浏览器，判断浏览器是否支持标准的video元素，针对支持与不支持的浏览器分别走不同的背景视频实现策略。
47.s3，调用标准video元素播放所述视频文件作为视频背景；支持标准video元素行为的浏览器使用video元素播放mp4格式视频的方式实现视频背景。标准video元素是html5中专门用来播放网络上的视频或者电影，使用video元素进行播放时不再需要使用其他的插件，只要浏览器支持html5即可。mp4格式的视频在ie9.0以上、safari3.1以上、iso5.0以上、android4.0以上均可通过调用标准video元素播放，无需其他插件或代码。
48.s4，将所述视频文件解码并逐帧绘制成多张图片，按时序播放所述图片作为视频背景。本实施例中，视频格式为ts格式，视频解码并逐帧绘制成多张图片，如图4所示，获得帧图片集，并且帧图片集按照帧顺序命名。本实施例中，无需对图片进行分辨率调整，和视频文件原始的分辨率相同即可。与传统的视频转换为gif相比，本实施例不受限于gif格式只能使用8位色(256种颜色)来表示图片，实现更好的视觉效果。
49.进一步地，步骤s4中，所述视频文件解码并通过canvas接口逐帧绘制成多张图片。canvas接口使得用户可以在web中绘制各种图形。canvas接口为基于像素的绘图，相当于画板的html5节点，用户可以以js操作绘图，能够以.png或.jpg格式保存结果图像。
50.进一步地，步骤s4中，所述将所述视频文件解码并逐帧绘制成多张图片具体为：
51.对所述浏览器进行浏览器能力检测，选用浏览器支持且合适的浏览器接口将所述视频文件解码并逐帧绘制成多张图片。
52.进一步地，对所述浏览器进行浏览器能力检测，获取所述浏览器对web workers接口、webgl接口的支持情况。
53.浏览器能力检测又可以称为特性检测，它的目标是识别浏览器的能力，例如在ie8浏览器及以下，不兼容getelementsbyclassname，那么为了判断当前浏览器是否支持getelementsbyclassname，对浏览器进行能力检测，创建一个getelementsbyclassname元素，若浏览器兼容该元素则返回true。通过浏览器能力检测，可以检测浏览器对各个元素、接口的支持情况。浏览器能力检测的方法属于现有技术，并且不属于本技术的核心改进点，在此不详细展开。本实施例通过浏览器能力检测获取所述浏览器对web workers接口、webgl接口的支持支持情况，web worker接口为web内容在后台线程中运行脚本提供了一种简单的方法，线程可以执行任务而不干扰用户界面。通过web worker接口可以减小对浏览器主程的资源占用。webgl可以调用gpu的渲染能力以提高图片绘制渲染的效率。从而对浏览器对web workers接口、webgl接口的支持情况做出不同的策略，具体策略如下所述。
54.进一步地，所述选用浏览器支持且合适的浏览器接口具体为：
55.若所述浏览器不支持所述web workers接口也不支持所述webgl接口，选用所述浏览器的canvas 2d接口；
56.若所述浏览器不支持所述web workers接口、支持所述webgl接口，选用所述浏览器的canvas webgi接口；
57.若所述浏览器支持所述web workers接口、不支持所述webgl接口，选用所述浏览器的canvas 2d接口；
58.若所述浏览器支持所述web workers接口也支持所述webgl接口，选用所述浏览器的canvas webgi接口。
59.浏览器运行过程中，canvas 2d接口比canvas webgi接口的渲染速度慢，因此对于支持canvas webgi接口的浏览器优先采用canvas webgi接口进行渲染。
60.进一步地，
61.若所述浏览器不支持所述web workers接口，所述浏览器通过主程序解码所述视频文件；
62.若所述浏览器支持所述web workers接口，所述浏览器通过web workers接口解码所述视频文件。
63.浏览器需要创建并选用相应的进程来运行相应的任务。选用合适的线程可以执行任务而不干扰用户界面。对于浏览器支持所述web workers接口的情况，浏览器可以通过web workers接口创建并选用相应的进程解码视频文件，优化解码视频效率。而对于不支持所述web workers接口的情况，需要浏览器选用主程序解码所述视频文件，从而保证解码的进行。
64.进一步地，所述canvas webgi接口通过gpu渲染。
65.进一步地，所述第一视频格式合集至少包含mp4格式，所述第二视频格式合集至少包含ts格式。本实施例中，第一视频格式合集属于标准video元素所支持的视频格式，例如mp4，在某些浏览器中也可以支持webm等格式，所述第二视频格式为标准video元素不支持的视频格式，例如ts、avi等格式。
66.实施例二
67.一种移动端网页视频背景处理系统，包含：
68.获取模块，用于获取视频文件及所述视频文件的视频格式类型，所述视频格式类型包括第一视频格式合集、第二视频格式合集；
69.浏览器属性判断模块，用于获取浏览器useragent属性，判断所述浏览器是否支持标准video元素且所述视频格式类型属于第一视频格式合集，若是则转至步骤s3，若否则转至步骤s4；
70.标准video元素播放模块，用于若所述浏览器支持标准video元素，调用标准video元素播放所述视频文件作为视频背景；
71.绘图播放模块，用于若所述浏览器不支持标准video元素，将所述视频文件解码并逐帧绘制成多张图片，按时序播放所述图片作为视频背景。
72.实施例三
73.一种计算机可读存储介质，存储有计算机程序，所述计算机程序被处理器执行时实现实施例一中所述的网页视频背景处理处理方法。
74.以上所述仅为本发明的较佳实施例，凡依本发明申请专利范围所做的均等变化与修饰，皆应属于本发明的涵盖范围。