网页视频同层渲染方法、装置、电子设备及介质与流程
本发明涉及同层渲染，具体提供一种网页视频同层渲染方法、装置、电子设备及介质。
背景技术：
1、随着智能终端的普及以及5g网络费用的降低，人们通过终端浏览器观看视频变得越来越普遍，从而对浏览器内核的播放能力带来了更高要求。
2、目前主流的浏览器厂商，基本都是采用chromium内核+外接播放的方式来提高视频格式的播放兼容性，但是由于是外接播放，就会带来外接视频播放与浏览器内核不在同一渲染层的问题，从而引起网页信息被遮挡或者上下滑动不流畅、有割裂感，给用户带来了不好的使用体验。
3、相应地，本领域需要一种新的网页视频同层渲染方法来解决上述问题。
技术实现思路
1、本发明旨在解决上述技术问题，即解决现有技术中外接视频播放与浏览器内核不在同一渲染层，从而导致网页信息被遮挡或者上下滑动不流畅、有割裂感的问题。
2、为了实现上述目的，在第一方面，本发明提供一种网页视频同层渲染方法，所述方法包含以下步骤：
3、响应于加载指令，创建内核侧的surface texture对象、video layer对象以及外接播放器对象并将所述video layer对象与所述surface texture对象进行绑定；
4、当所述外接播放器对象被触发播放且所述外接播放器对象包含需要进行渲染的视频数据时，将所述视频数据基于所述surface texture对象传送给所述video layer对象；
5、基于所述video layer对象接收的所述视频数据，触发layer tree对所述视频数据进行合成及渲染。
6、在上述网页视频同层渲染方法的可选技术方案中，所述方法还包括：
7、解析网页中是否包含video标签；
8、当解析到包含所述video标签且所述video标签需要加载时，生成所述加载指令。
9、在上述网页视频同层渲染方法的可选技术方案中，“将所述video layer对象与所述surface texture对象进行绑定”的步骤包括：
10、创建video frame compositor对象；
11、将所述video frame compositor对象注册为所述surface texture对象的数据监听者；
12、将所述video frame compositor对象设置为所述video layer对象的数据输入者。
13、在上述网页视频同层渲染方法的可选技术方案中，“将所述视频数据基于所述surface texture对象传送给所述video layer对象”的步骤包括：
14、将所述视频数据传送给所述surface texture对象；
15、当所述surface texture对象接收到所述视频数据后，基于所述video framecompositor对象将所述视频数据传送给所述video layer对象。
16、在上述网页视频同层渲染方法的可选技术方案中，所述将所述视频数据传送给所述surface texture对象之前，所述方法还包括：
17、将所述surface texture对象封装成surface对象，并将所述surface对象设置给所述外接播放器对象；
18、“将所述视频数据传送给所述surface texture对象”的步骤包括：
19、基于所述surface对象，将所述视频数据传送给所述surface texture对象。
20、在上述网页视频同层渲染方法的可选技术方案中，“基于所述video layer对象接收的所述视频数据，触发layer tree对所述视频数据进行合成及渲染”的步骤包括：
21、更新所述layer tree的状态，并将所述video layer对象接收的所述视频数据传送给所述layertree，以完成对所述视频数据进行合成及渲染。
22、在上述网页视频同层渲染方法的可选技术方案中，所述方法还包括：
23、创建内核侧的html media element对象；
24、将所述video layer对象设置给所述html media element对象。
25、在第二方面，本发明还提供了一种网页视频同层渲染装置，所述装置包括：
26、对象创建模块，被配置为响应于加载指令，创建内核侧的surface texture对象、video layer对象以及外接播放器对象并将所述video layer对象与所述surface texture对象进行绑定；
27、数据传送对象，被配置为当所述外接播放器对象被触发播放且所述外接播放器对象包含需要进行渲染的视频数据时，将所述视频数据基于所述surface texture对象传送给所述video layer对象；
28、数据渲染模块，被配置为基于所述video layer对象接收的所述视频数据，触发layer tree对所述视频数据进行合成及渲染。
29、在第三方面，本发明还提供了一种电子设备，所述电子设备包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述中任一项所述的网页视频同层渲染方法。
30、在第四方面，本发明还提供了一种可读存储介质，所述可读存储介质中存储有多条程序代码，所述程序代码适于由处理器加载并运行以执行上述中任一项所述的网页视频同层渲染方法。
31、本领域技术人员能够理解的是，在本发明的技术方案中通过响应于加载指令，创建内核侧的surface texture对象、video layer对象以及外接播放器对象并将videolayer对象与surface texture对象进行绑定；外接播放器对象被触发播放且外接播放器对象包含需要进行渲染的视频数据时，将视频数据基于surface texture对象传送给videolayer对象；基于video layer对象接收的视频数据，触发layer tree对视频数据进行合成及渲染。这样的设置能够实现外接视频渲染层与浏览器内核渲染层在同一层级，避免了页面信息被遮挡或者页面上下滑动不流畅、有割裂感的情况发生，提升了用户的使用体验。
32、进一步地，“将视频数据基于surface texture对象传送给video layer对象”的步骤包括：将视频数据传送给surface texture对象；当surface texture对象接收到视频数据后，基于video frame compositor对象将视频数据传送给video layer对象。这样的设置能够实现将外接播放器对象中需要进行渲染的视频数据传送到video layer对象，以便由浏览器内核渲染层来完成对视频数据的合成与渲染，为用户带来了良好的视频观看体验。
技术特征：
1.一种网页视频同层渲染方法，其特征在于，所述方法包含以下步骤：
2.根据权利要求1所述的网页视频同层渲染方法，其特征在于，所述方法还包括：
3.根据权利要求1所述的网页视频同层渲染方法，其特征在于，“将所述videolayer对象与所述surfacetexture对象进行绑定”的步骤包括：
4.根据权利要求3所述的网页视频同层渲染方法，其特征在于，“将所述视频数据基于所述surfacetexture对象传送给所述videolayer对象”的步骤包括：
5.根据权利要求4所述的网页视频同层渲染方法，其特征在于，所述将所述视频数据传送给所述surfacetexture对象之前，所述方法还包括：
6.根据权利要求1所述的网页视频同层渲染方法，其特征在于，“基于所述videolayer对象接收的所述视频数据，触发layertree对所述视频数据进行合成及渲染”的步骤包括：
7.根据权利要求1所述的网页视频同层渲染方法，其特征在于，所述方法还包括：
8.一种网页视频同层渲染装置，其特征在于，所述装置包括：
9.一种电子设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至7中任一项所述的网页视频同层渲染方法。
10.一种可读存储介质，其中存储有多条程序代码，其特征在于，所述程序代码适于由处理器加载并运行以执行权利要求1至7中任一项所述的网页视频同层渲染方法。
技术总结
本发明涉及同层渲染技术领域，具体提供一种网页视频同层渲染方法、装置、电子设备及介质，旨在解决现有技术中外接视频播放与浏览器内核不在同一渲染层，从而导致网页信息被遮挡或者上下滑动不流畅、有割裂感的问题。为此目的，本发明通过响应于加载指令，创建内核侧的SurfaceTexture对象、VideoLayer对象以及外接播放器对象并将Video Layer对象与SurfaceTexture对象进行绑定；外接播放器对象被触发播放且外接播放器对象包含需要进行渲染的视频数据时，将视频数据基于SurfaceTexture对象传送给VideoLayer对象；基于VideoLayer对象接收的视频数据，触发LayerTree对视频数据进行合成及渲染。这样的设置避免了页面信息被遮挡或者页面上下滑动不流畅、有割裂感的情况发生，提升了用户的使用体验。
技术研发人员：赵贝贝
受保护的技术使用者：蔚来移动科技有限公司
技术研发日：
技术公布日：2024/9/23