[发明专利]一种移动端网页视频背景处理方法、系统、储存介质

说明书

本发明涉及一种移动端网页视频背景处理方法、系统、储存介质，方法包含以下步骤：S1，获取视频文件及所述视频文件的视频格式类型，所述视频格式类型包括第一视频格式合集、第二视频格式合集；S2，获取浏览器userAgent属性，若所述浏览器支持标准video元素且所述视频格式类型属于第一视频格式合集，转至步骤S3，其它，转至步骤S4；S3，调用标准video元素播放所述视频文件作为视频背景；S4，将所述视频文件解码并逐帧绘制成多张图片，按时序播放所述图片作为视频背景。本发明通过获取浏览器userAgent属性，对不同的浏览器采取不同的视频处理策略。从而兼容移动端浏览器，实现网页视频背景。

技术领域

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

背景技术

网页视频背景是浏览器以动态视频作为文字、标题等的背景，呈现出动态效果。

目前移动端浏览器对于Web标准实现并不统一，使用原生的video元素实现网页的视频背景会有很多兼容性问题，诸如：视频无法自动播放、视频元素作为弹窗元素无法被覆盖、无法隐藏播放按钮、视频会默认全屏播放等，从而导致网页视频背景在移动端浏览器失效。如图1所示，图1中左侧的图片为网页视频背景正常显示的移动端截图，中间和右边的图片为出现兼容性问题导致图层错位或无法自动播放出现的情况的移动端截图。

针对上述的现有技术存在的问题设计一种移动端网页视频背景处理方法、系统、储存介质是本发明研究的目的。

发明内容

针对上述现有技术存在的问题，本发明在于提供一种移动端网页视频背景处理方法、系统、储存介质，能够有效解决上述现有技术存在的问题。

本发明的技术方案是：

一种移动端网页视频背景处理方法，包含以下步骤：

S1，获取视频文件及所述视频文件的视频格式类型，所述视频格式类型包括第一视频格式合集、第二视频格式合集；

S2，获取浏览器userAgent属性，若所述浏览器支持标准video元素且所述视频格式类型属于第一视频格式合集，转至步骤S3，其它，转至步骤S4；

S3，调用标准video元素播放所述视频文件作为视频背景；

S4，将所述视频文件解码并逐帧绘制成多张图片，按时序播放所述图片作为视频背景。

进一步地，步骤S4中，所述视频文件解码并通过Canvas接口逐帧绘制成多张图片。

进一步地，步骤S4中，所述将所述视频文件解码并逐帧绘制成多张图片具体为：

对所述浏览器进行浏览器能力检测，选用浏览器支持且合适的浏览器接口将所述视频文件解码并逐帧绘制成多张图片。

进一步地，对所述浏览器进行浏览器能力检测，获取所述浏览器对Web Workers接口、WebGL接口的支持支持情况。

进一步地，所述选用浏览器支持且合适的浏览器接口具体为：

若所述浏览器不支持所述Web Workers接口也不支持所述WebGL接口，选用所述浏览器的Canvas 2d接口；

若所述浏览器不支持所述Web Workers接口、支持所述WebGL接口，选用所述浏览器的Canvas WebGI接口；

若所述浏览器支持所述Web Workers接口、不支持所述WebGL接口，选用所述浏览器的Canvas 2d接口；

若所述浏览器支持所述Web Workers接口也支持所述WebGL接口，选用所述浏览器的Canvas WebGI接口。

进一步地，