CN117834972A - 一种浏览器视频显示方法和显示设备 - Google Patents

Abstract

本申请公开了一种浏览器视频显示方法以及显示设备，显示设备包括显示器和控制器。控制器被设置为当获取到视频播放请求时，基于浏览器的合成模块创建视频画布层；绘制浏览器的网页；基于视频画布层获取当前视频帧，根据浏览器中网页的缩放比例和当前视频帧的视频元素信息，确定当前视频帧在网页中的显示区域信息；显示区域信息包括位置坐标信息和尺寸信息；按照位置坐标信息和尺寸信息创建透明视频帧并传输至合成模块；通过合成模块将透明视频帧与网页中对应的视频显示区域进行融合处理，以使网页的视频显示区域中显示当前视频帧。能够在采用硬解码方式进行视频解码时，将浏览器遮挡视频图片的区域透明化，以使用户观看到视频。

Description

一种浏览器视频显示方法和显示设备

技术领域

本申请涉及显示设备控制领域，尤其涉及一种浏览器视频显示方法及显示设备。

背景技术

目前各嵌入式系统主流的浏览器都是基于谷歌的chromium浏览器进行客制化，比如：Vidaa系统的Odin(odinlink.com)浏览器，Vewd浏览器，WebOS的浏览器等。

在传统技术中，基于chromium浏览器播放视频时采用的是软解码方式。软解码是通过对视频的每一帧原始数据解码成一张图片，并在解码出一帧视频的图片时，将该视频帧的图片与网页合成一次后，输出至显示设备的显存中(例如，电视)，通过浏览器进行显示。然而，软解码的方式的解码效率十分低下且对资源消耗较大。目前，为了提高解码效率并降低资源的消耗，通常可以采用各嵌入式系统自带的硬解码解码器对视频进行硬解码，进而得到每一帧的视频图片，并通过浏览器显示视频图片。

然而，采用硬解码方式时，存在浏览器遮挡视频图片的显示画面，用户无法观看到视频页面的问题，导致用户体验较差。

发明内容

本申请提供了一种浏览器视频显示方法及显示设备，以解决采用硬解码方式时，存在浏览器遮挡视频图片的显示画面，用户无法观看到视频页面的问题，导致用户体验较差的问题。

第一方面，本申请提供了一种显示设备，包括：

显示器，被配置为显示用户界面；

控制器，被配置为：当获取到视频播放请求时，基于浏览器的合成模块创建视频画布层；绘制浏览器的网页；基于视频画布层获取当前视频帧，根据浏览器中网页的缩放比例和当前视频帧的视频元素信息，确定当前视频帧在网页中的显示区域信息；显示区域信息包括位置坐标信息和尺寸信息；按照位置坐标信息和尺寸信息创建透明视频帧并传输至合成模块；通过合成模块将透明视频帧与网页中对应的视频显示区域进行融合处理，以使网页的视频显示区域中显示当前视频帧。

本申请一些实施例中，控制器执行将透明视频帧与网页中对应的视频显示区域进行融合处理，以使网页的视频显示区域中显示当前视频帧的步骤时，被进一步配置为：

若网页中的顶层显示层为主显示层，将透明视频帧与网页中对应的视频显示区域进行融合处理，以使网页的视频显示区域中显示当前视频帧。

本申请一些实施例中，控制器执行若网页中的顶层显示层为主显示层，将透明视频帧和主显示层进行融合，在网页的视频显示区域中显示当前视频帧的步骤时，被进一步配置为：

在主显示层存在视频画布层的标识信息时，在主显示层上绘制视频画布层之下的网页内容；

根据主显示层的缩放比例和当前视频帧的视频元素信息，计算透明视频帧中透明区域位于主显示层的绝对位置；

按照绝对位置将透明区域覆盖于主显示层对应的视频显示区域上，得到第一融合层，并在第一融合层中绘制位于视频画布层之上的网页内容，以使网页的视频显示区域中显示当前视频帧。

本申请一些实施例中，控制器执行将透明视频帧和网页进行融合，在网页的视频显示区域中显示当前视频帧的步骤时，还被进一步配置为：

若网页中的顶层显示层为子显示层，将透明视频帧和子显示层对应的视频显示区域进行融合，得到第二融合层；

在主显示层上绘制位于子显示层以下的内容，并将透明视频帧和主显示层对应的视频显示区域进行融合，得到第三融合层；

将第二融合层的内容绘制于第三融合层上，在网页的视频显示区域中显示当前视频帧。

本申请一些实施例中，控制器执行将透明视频帧和子显示层进行融合，得到第二融合层的步骤，被进一步配置为：

若网页中的顶层显示层为子显示层，在子显示层上绘制视频画布层之下的网页内容；

根据子显示层的缩放比例和当前视频帧的视频元素信息，计算透明视频帧中透明区域位于子显示层的绝对位置；

按照绝对位置将透明区域帧覆盖于子显示层对应的视频显示区域上，得到第二融合层，并在第二融合层中绘制位于视频画布层之上的网页内容；

若子显示层的下一层为非主显示层，则将子显示层的下一层作为新的子显示层，将子显示层作为新的视频画布层并返回执行在子显示层上绘制视频画布层之下的网页内容的步骤，直至子显示层的下一层为主显示层。

本申请一些实施例中，控制器还被进一步配置为：

获取当前视频帧的视频播放状态；

若视频播放状态为播放或者暂停，则执行根据浏览器中网页的缩放比例和当前视频帧的视频元素信息，确定当前视频帧在网页中的显示区域信息的步骤。

本申请一些实施例中，控制器还被进一步配置为：

将视频显示区域的位置信息和尺寸信息发送至多媒体模块中以更新后端视频显示区域的参数信息。

第二方面，本申请提供了一种浏览器视频显示方法，应用于显示设备，方法包括：

当获取到视频播放请求时，基于浏览器的合成模块创建视频画布层；

绘制浏览器的网页；

基于视频画布层获取当前视频帧，根据浏览器中网页的缩放比例和当前视频帧的视频元素信息，确定当前视频帧在网页中的显示区域信息；显示区域信息包括位置坐标信息和尺寸信息；

按照位置坐标信息和尺寸信息创建透明视频帧并传输至合成模块；

通过浏览器的合成模块将透明视频帧与网页对应的视频显示区域进行融合处理，以使网页的视频显示区域中显示当前视频帧。

本申请一些实施例中，将透明视频帧和网页对应的视频显示区域进行融合处理，以使网页的视频显示区域中显示当前视频帧，包括：

若网页中的顶层显示层为主显示层，将透明视频帧和主显示层对应的视频显示区域进行融合，以使网页的视频显示区域中显示当前视频帧。

本申请一些实施例中，若网页中的顶层显示层为主显示层，将透明视频帧和主显示层进行融合，在网页的视频显示区域中显示当前视频帧，包括：

在主显示层存在视频画布层的标识信息时，在主显示层上绘制视频画布层之下的网页内容；

根据主显示层的缩放比例和当前视频帧的视频元素信息，计算透明视频帧中透明区域位于主显示层的绝对位置；

按照绝对位置将透明区域覆盖于主显示层对应的视频显示区域上，得到第一融合层，并在第一融合层中绘制位于视频画布层之上的网页内容，以使网页的视频显示区域中显示当前视频帧。

第三方面，本申请还提供了一种计算机可读存储介质，该计算机可读存储介质可存储有程序，该程序执行时可实现包括本申请提供的浏览器视频显示方法各实施例中的部分或全部步骤。

本申请提供的一种浏览器视频显示方法以及显示设备，显示设备包括显示器和控制器。显示器被配置为显示用户界面。控制器被设置为当获取到视频播放请求时，基于浏览器的合成模块创建视频画布层；绘制浏览器的网页；基于视频画布层获取当前视频帧，根据浏览器中网页的缩放比例和当前视频帧的视频元素信息，确定当前视频帧在网页中的显示区域信息；显示区域信息包括位置坐标信息和尺寸信息；按照位置坐标信息和尺寸信息创建透明视频帧并传输至合成模块；通过合成模块将透明视频帧与网页中对应的视频显示区域进行融合处理，以使网页的视频显示区域中显示当前视频帧。能够在采用硬解码方式进行视频解码时，将浏览器遮挡视频图片的区域透明化，以使用户观看到视频，提升用户体验。

附图说明

为了更清楚地说明本申请的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1示出了根据一些实施例的显示设备与控制装置之间操作场景的示意图；

图2示出了根据一些实施例的控制装置100的硬件配置框图；

图3示出了根据一些实施例的显示设备200的硬件配置框图；

图4示出了根据一些实施例的显示设备200中软件配置图；

图5示出了根据一些实施例的显示设备执行浏览器视频显示方法的第一种流程图；

图6示出了根据一些实施例的显示设备执行浏览器视频显示方法的第二种流程图；

图7示出了根据一些实施例的显示设备执行浏览器视频显示方法的第三种流程图；

图8示出了根据一些实施例的显示设备执行浏览器视频显示方法的第四种流程图；

图9示出了根据一些实施例的网页渲染层示例图；

图10示出了根据一些实施例的显示设备执行浏览器视频显示方法后的界面显示图；

图11示出了根据一些实施例的传统浏览器视频显示的界面图；

图12示出了根据一些实施例的显示设备执行浏览器视频显示方法的时序流程图。

具体实施方式

为使本申请的目的和实施方式更加清楚，下面将结合本申请示例性实施例中的附图，对本申请示例性实施方式进行清楚、完整地描述，显然，描述的示例性实施例仅是本申请一部分实施例，而不是全部的实施例。

需要说明的是，本申请中对于术语的简要说明，仅是为了方便理解接下来描述的实施方式，而不是意图限定本申请的实施方式。除非另有说明，这些术语应当按照其普通和通常的含义理解。

本申请中说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”等是用于区别类似或同类的对象或实体，而不必然意味着限定特定的顺序或先后次序，除非另外注明。应该理解这样使用的用语在适当情况下可以互换。

术语“包括”和“具有”以及他们的任何变形，意图在于覆盖但不排他的包含，例如，包含了一系列组件的产品或设备不必限于清楚地列出的所有组件，而是可包括没有清楚地列出的或对于这些产品或设备固有的其它组件。术语“模块”是指任何已知或后来开发的硬件、软件、固件、人工智能、模糊逻辑或硬件或/和软件代码的组合，能够执行与该元件相关的功能。

在传统技术中，基于chromium浏览器播放视频时采用的是软解码方式。软解码是通过对视频的每一帧原始数据解码成一张图片，并在解码出一帧视频的图片时，将该视频帧的图片与网页合成一次后，输出至终端设备的显存中(例如，电视)，已通过浏览器进行显示。因此，解码的效率十分低下，并且资源消耗较大。基于此，硬解码方式逐渐替代软解码方式。然而，采用硬解码方式时，存在浏览器遮挡视频图片的显示画面，无法观看到视频页面的问题。

基于此，本申请实施方式提供的显示设备可以具有多种实施形式，例如，可以是电视、智能电视、电脑、激光投影设备、显示器(monitor)、电子白板(electronic bulletinboard)、电子桌面(electronic table)等。图1和图2为本申请的显示设备的一种具体实施方式。

图1示出了根据一些实施例的显示设备与控制装置之间操作场景的示意图。如图1所示，用户可通过终端设备300或控制装置100操作显示设备200。

在一些实施例中，控制装置100可以是遥控器，遥控器和显示设备的通信包括红外协议通信或蓝牙协议通信，及其他短距离通信方式，通过无线或有线方式来控制显示设备200。用户可以通过遥控器上按键、语音输入、控制面板输入等输入用户指令，来控制显示设备200。

在一些实施例中，也可以使用终端设备300(如移动终端、平板电脑、计算机、笔记本电脑等)以控制显示设备200。例如，使用在终端设备上运行的应用程序控制显示设备200。

在一些实施例中，显示设备可以不使用上述的终端设备或控制设备接收指令，而是通过触摸或者手势等接收用户的控制。

在一些实施例中，显示设备200还可以采用除了控制装置100和终端设备300之外的方式进行控制，例如，可以通过显示设备200设备内部配置的获取语音指令的模块直接接收用户的语音指令控制，也可以通过显示设备200设备外部设置的语音控制设备来接收用户的语音指令控制。

在一些实施例中，显示设备200还与服务器400进行数据通信。可允许显示设备200通过局域网(LAN)、无线局域网(WLAN)和其他网络进行通信连接。服务器400可以向显示设备200提供各种内容和互动。服务器400可以是一个集群，也可以是多个集群，可以包括一类或多类服务器。

图2示出了根据一些实施例的控制装置100的硬件配置框图。如图2所示，控制装置100包括控制器110、通信接口130、用户输入/输出接口140、存储器、供电电源。控制装置100可接收用户的输入操作指令，且将操作指令转换为显示设备200可识别和响应的指令，起到用户与显示设备200之间交互中介作用。

图3示出了根据一些实施例的显示设备200的硬件配置框图。如图3，显示设备200包括调谐解调器210、通信器220、检测器230、外部装置接口240、控制器250、显示器260、音频输出接口270、存储器、供电电源、用户接口中的至少一种。

在一些实施例中控制器包括处理器，视频处理器，音频处理器，图形处理器，RAM，ROM，用于输入/输出的第一接口至第n接口。

显示器260包括用于呈现画面的显示屏组件，以及驱动图像显示的驱动组件，用于接收源自控制器输出的图像信号，进行显示视频内容、图像内容以及菜单操控界面的组件以及用户操控UI界面。

显示器260可为液晶显示器、OLED显示器、以及投影显示器，还可以为一种投影装置和投影屏幕。

通信器220是用于根据各种通信协议类型与外部设备或服务器进行通信的组件。例如：通信器可以包括Wifi模块，蓝牙模块，有线以太网模块等其他网络通信协议芯片或近场通信协议芯片，以及红外接收器中的至少一种。显示设备200可以通过通信器220与外部控制设备100或服务器400建立控制信号和数据信号的发送和接收。

用户接口，可用于接收控制装置100(如：红外遥控器等)的控制信号。

检测器230用于采集外部环境或与外部交互的信号。例如，检测器230包括光接收器，用于采集环境光线强度的传感器；或者，检测器230包括图像采集器，如摄像头，可以用于采集外部环境场景、用户的属性或用户交互手势，再或者，检测器230包括声音采集器，如麦克风等，用于接收外部声音。

外部装置接口240可以包括但不限于如下：高清多媒体接口接口(HDMI)、模拟或数据高清分量输入接口(分量)、复合视频输入接口(CVBS)、USB输入接口(USB)、RGB端口等任一个或多个接口。也可以是上述多个接口形成的复合性的输入/输出接口。

调谐解调器210通过有线或无线接收方式接收广播电视信号，以及从多个无线或有线广播电视信号中解调出音视频信号，如以及EPG数据信号。

在一些实施例中，控制器250和调谐解调器210可以位于不同的分体设备中，即调谐解调器210也可在控制器250所在的主体设备的外置设备中，如外置机顶盒等。

控制器250，通过存储在存储器上中各种软件控制程序，来控制显示设备的工作和响应用户的操作。控制器250控制显示设备200的整体操作。例如：响应于接收到用于选择在显示器260上显示UI对象的用户命令，控制器250便可以执行与由用户命令选择的对象有关的操作。

在一些实施例中控制器包括中央处理器(Central Processing Unit，CPU)，视频处理器，音频处理器，图形处理器(Graphics Processing Unit，GPU)，RAM(Random AccessMemory，RAM)，ROM(Read-Only Memory，ROM)，用于输入/输出的第一接口至第n接口，通信总线(Bus)等中的至少一种。

用户可在显示器260上显示的图形用户界面(GUI)输入用户命令，则用户输入接口通过图形用户界面(GUI)接收用户输入命令。或者，用户可通过输入特定的声音或手势进行输入用户命令，则用户输入接口通过传感器识别出声音或手势，来接收用户输入命令。

“用户界面”，是应用程序或操作系统与用户之间进行交互和信息交换的介质接口，它实现信息的内部形式与用户可以接受形式之间的转换。用户界面常用的表现形式是图形用户界面(Graphic User Interface，GUI)，是指采用图形方式显示的与计算机操作相关的用户界面。它可以是在电子设备的显示屏中显示的一个图标、窗口、控件等界面元素，其中控件可以包括图标、按钮、菜单、选项卡、文本框、对话框、状态栏、导航栏、Widget等可视的界面元素。

图4示出了根据一些实施例的显示设备200中软件配置图。在一些实施例中，如图4所示，显示设备的系统可以包括内核(Kernel)、命令解析器(shell)、文件系统和应用程序。内核、shell和文件系统一起组成了基本的操作系统结构，它们让用户可以管理文件、运行程序并使用系统。上电后，内核启动，激活内核空间，抽象硬件、初始化硬件参数等，运行并维护虚拟内存、调度器、信号及进程间通信(IPC)。内核启动后，再加载Shell和用户应用程序。应用程序在启动后被编译成机器码，形成一个进程。

如图4所示，将显示设备的系统分为三层，从上至下分别为应用层、中间件层和硬件层。在一些实施例中，显示设备的系统还包括UI层(图中未示出)，UI层位于应用层的上方，UI层接收应用层的数据传输，以实现显示器260的画面呈现。

应用层主要包含电视上的常用应用，以及应用框架(Application Framework)，其中，常用应用主要是基于浏览器Browser开发的应用，例如：HTML5 APPs；以及原生应用(Native APPs)；

应用框架(Application Framework)是一个完整的程序模型，具备标准应用软件所需的一切基本功能，例如：文件存取、资料交换...，以及这些功能的使用接口(工具栏、状态列、菜单、对话框)。

原生应用(Native APPs)可以支持在线或离线，消息推送或本地资源访问。

中间件层包括各种电视协议、多媒体协议以及系统组件等中间件。中间件可以使用系统软件所提供的基础服务(功能)，衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的。

硬件层主要包括HAL接口、硬件以及驱动，其中，HAL接口为所有电视芯片对接的统一接口，具体逻辑由各个芯片来实现。驱动主要包含：音频驱动、显示驱动、蓝牙驱动、摄像头驱动、WIFI驱动、USB驱动、HDMI驱动、传感器驱动(如指纹传感器，温度传感器，压力传感器等)、以及电源驱动等。

在一些实施例中，显示设备200可以播放自身提供的数据流，还可通过投屏或镜像的方式接收终端设备300发送的数据流。显示设备200包括采用不同的模式播放数据流，例如，正常模式和音频模式。在正常模式下，显示设备200的显示器260呈亮屏状态，由显示器260播放数据流的视频数据，由音频输出接口270将音频数据输出至本机扬声器或外接音频输出装置进行播放。在音频模式下，显示设备200的显示器260呈黑屏状态，显示器260中不展示视频数据，仅由音频输出接口270将音频数据输出至本机扬声器或外接音频输出装置进行播放。

在显示设备200处于音频模式播放数据流的过程中，如果用户再次投屏播放其他数据流，现有的显示设备200依然会以音频模式播放该新播放的数据流。那么在新播放的数据流为视频时，仍处于音频模式的显示设备200的显示器260仍然为黑屏状态，无法通过显示器260播放新投屏数据流中的视频数据，导致用户无法观看到视频内容，用户体验感比较差。

为保证处于音频模式的显示设备200在播放其他数据流时能够及时点亮显示器260，以通过显示器260呈现视频画面，本申请一些实施例提供一种显示设备200，在音频模式下，如果接收到终端设备300发送的数据流时，可以对显示器260的状态进行控制，使得在需要显示视频画面时能够及时点亮显示器260。

图5示出了根据一些实施例的显示设备执行浏览器视频显示方法的第一种流程图。本申请一些实施例提供一种显示设备200，包括：显示器260，被配置为显示用户界面；控制器250被配置为执行下述步骤：

步骤502，当获取到视频播放请求时，基于浏览器的合成模块创建视频画布层。

步骤504，绘制浏览器的网页。

其中，视频播放请求可以是用户基于浏览器页面触发的视频播放请求。合成模块为浏览器中的合成模块(chromium compositing，简称cc模块)，也即chromium的合成器。其中，视频画布层也即VideoLayer层。

具体地，当获取到视频播放请求时，可以基于浏览器的合成模块创建视频画布层。当创建VideoLayer层后，浏览器的合成模块绘制当前浏览器进行显示的各层网页。

步骤506，基于视频画布层获取当前视频帧，根据浏览器中网页的缩放比例和当前视频帧的视频元素信息，确定当前视频帧在网页中的显示区域信息；显示区域信息包括位置坐标信息和尺寸信息。

其中，当前视频帧为当前需要进行播放的视频帧。网页的缩放比例和当前视频帧的视频元素信息均可以从浏览器自带参数中获取。

具体地，浏览器可以通过加载当前待显示页面的URL(Uniform ResourceLocator，统一资源定位符)，可以从网页平台下载对应的HTML(Hyper Text MarkupLanguage，超文本标记语言)页面，然后可以对该页面进行解析，判断当前待显示页面是否包含视频播放对象扩展的对象和方法。如果不包含，则可以确定当前待显示页面为纯HTML页面，不包含视频播放，那么，可以不对当前待显示页面进行任何处理，直接进行显示；如果包含，则可以进一步判断当前待显示页面是否为视频和网页元素的混合页面，如果当前待显示页面是视频和网页元素的混合页面，则可以进一步判断当前待显示页面是否为窗口播放。如果是窗口播放，则可以进一步解析获取当前待显示页面中视频显示区域信息中的位置坐标信息。

浏览器在进行渲染之前，会实时解析当前待显示页面中当前视频帧的视频元素信息。具体的，浏览器会根据视频元素信息的类别，将属于同一类别的视频元素信息单独的列为一层，即，渲染层次树中会包含当前待显示页面待绘制的不同层次和各层次的每个视频元素的布局信息。因此，通过渲染层次树，可以获取到浏览器当前待显示页面中的页面元素的布局信息。进而把当前待显示页面中的视频元素信息与视频显示区域信息中的位置坐标信息重叠部分作为当前视频帧在网页中的显示区域信息。

在一种可选择的实施例中，如图6所示，控制器还可以进一步配置为：

步骤505a，获取当前视频帧的视频播放状态。

步骤505b，若视频播放状态为播放或者暂停，则执行步骤506中根据浏览器中网页的缩放比例和当前视频帧的视频元素信息，确定当前视频帧在网页中的显示区域信息的步骤。

其中，视频播放状态可以包括播放、暂停、结束播放。

具体地，获取当前视频帧的视频播放状态，若视频播放状态为播放或者暂停则执行根据浏览器中网页的缩放比例和当前视频帧的视频元素信息，确定当前视频帧在网页中的显示区域信息的步骤。

在本实施例中，可以通过获取当前视频帧的视频播放状态后，在决定是否进行后续的视频区域透明化处理，若视频播放已经结束，则无需进行透明化，能够根据视频播放状态节约运行资源。

在一种可选择的实施例中，控制器还可以进一步配置为：

将视频显示区域的位置信息和尺寸信息发送至多媒体模块中以更新后端视频显示区域的参数信息。以便于对视频显示区域的位置信息和尺寸信息进行记录，实现透明化处理。

步骤508，按照位置坐标信息和尺寸信息创建透明视频帧并传输至合成模块。

具体地，可以基于位置坐标信息和尺寸信息创建透明视频帧，并将位置坐标信息和尺寸信息传输至合成模块。

步骤510，通过合成模块将透明视频帧与网页中对应的视频显示区域进行融合处理，以使网页的视频显示区域中显示当前视频帧。

具体地，合成模块根据位置坐标信息和尺寸信息，代入预设的透明区域绘制算法中，确定网页中每一渲染层中对应的透明化区域，并将透明视频帧覆盖至每一渲染层中，以实现将每一渲染层中对应的透明化区域透明化，以使网页的视频显示区域中显示当前视频帧。

在本申请实施例中，显示设备包括显示器和控制器。显示器被配置为显示用户界面。控制器被设置为当获取到视频播放请求时，基于浏览器的合成模块创建视频画布层；绘制浏览器的网页；基于视频画布层获取当前视频帧，根据浏览器中网页的缩放比例和当前视频帧的视频元素信息，确定当前视频帧在网页中的显示区域信息；显示区域信息包括位置坐标信息和尺寸信息；按照位置坐标信息和尺寸信息创建透明视频帧并传输至合成模块；通过合成模块将透明视频帧与网页中对应的视频显示区域进行融合处理，以使网页的视频显示区域中显示当前视频帧。能够在采用硬解码方式进行视频解码时，将浏览器遮挡视频图片的区域透明化，以使用户观看到视频，提升用户体验。

在一种可选择的实施例中，控制器执行步骤510时，被进一步配置为：

步骤5102，若网页中的顶层显示层为主显示层，将透明视频帧与网页中对应的视频显示区域进行融合处理，以使网页的视频显示区域中显示当前视频帧。

其中，网页中可以包括至少一个渲染层。网页的复杂度不同，网页的复杂度越高，渲染层的数量越多，因此，需要将每一个渲染层和透明视频层重合的区域进行透明化处理。

需要说明的是，主显示层一般位于网页的最底层，因此需要先对各个渲染层进行判断当前渲染层是否为主显示层。当透明化处理到主显示层时，则可以实现网页的视频显示区域中显示当前视频帧。

具体地，若网页中的顶层显示层为主显示层，将透明视频帧与网页中对应的视频显示区域进行融合处理，以使网页的视频显示区域中显示当前视频帧。

进一步地，如图7所示，控制器被进一步配置为：

步骤5102a，在主显示层存在视频画布层的标识信息时，在主显示层上绘制视频画布层之下的网页内容。

其中，当创建视频画布层时，则会生成对应的标识信息。

具体地，查找主显示层上视频画布层的标识信息，当存在视频画布层的标识信息时，在主显示层上绘制视频画布层之下的网页内容。

步骤5102b，根据主显示层的缩放比例和当前视频帧的视频元素信息，计算透明视频帧中透明区域位于主显示层的绝对位置。

具体地，基于浏览器参数中解析主显示层的缩放比例和当前视频帧的视频元素信息。进而把当前视频帧的视频元素信息与视频显示区域信息中的位置坐标信息重叠部分作为当前视频帧在透明视频帧中透明区域位于主显示层的绝对位置。

步骤5102c，按照绝对位置将透明区域覆盖于主显示层对应的视频显示区域上，得到第一融合层，并在第一融合层中绘制位于视频画布层之上的网页内容，以使网页的视频显示区域中显示当前视频帧。

具体地，按照计算的绝对位置将透明区域覆盖于主显示层对应的视频显示区域上，得到第一融合层，并在第一融合层中绘制位于视频画布层之上的网页内容，以使网页的视频显示区域中显示当前视频帧。

在本实施例中，通过在主显示层存在视频画布层的标识信息时，在主显示层上绘制视频画布层之下的网页内容，根据主显示层的缩放比例和当前视频帧的视频元素信息，计算透明视频帧中透明区域位于主显示层的绝对位置，按照绝对位置将透明区域覆盖于主显示层对应的视频显示区域上，得到第一融合层，并在第一融合层中绘制位于视频画布层之上的网页内容，以使网页的视频显示区域中显示当前视频帧，能够在顶层显示层为主显示层的情况下，确定主显示层的透明化区域进行透明化，以使网页的视频显示区域中显示当前视频帧。

步骤5104，若网页中的顶层显示层为子显示层，将透明视频帧和子显示层对应的视频显示区域进行融合，得到第二融合层。

具体地，若网页中的顶层显示层为子显示层，将透明视频帧和子显示层对应的视频显示区域进行融合，得到第二融合层。其中，得到第二融合层的方式与主显示层与透明视频帧进行融合的方式相同。

进一步地，如图8所示，控制器执行步骤5104时，被进一步配置为：

步骤5106a，若网页中的顶层显示层为子显示层，在子显示层上绘制视频画布层之下的网页内容。

步骤5106b，根据子显示层的缩放比例和当前视频帧的视频元素信息，计算透明视频帧中透明区域位于子显示层的绝对位置。

步骤5106c，按照绝对位置将透明区域帧覆盖于子显示层对应的视频显示区域上，得到第二融合层，并在第二融合层中绘制位于视频画布层之上的网页内容。

步骤5106d，若子显示层的下一层为非主显示层，则将子显示层的下一层作为新的子显示层，将子显示层作为新的视频画布层并返回执行在子显示层上绘制视频画布层之下的网页内容的步骤，直至子显示层的下一层为主显示层。

基于此，可以将子显示层层层进行透明化处理，并在子显示层均进行透明化处理后，执行主显示层的透明化处理过程，以使网页的各个渲染层均实现透明化处理。

步骤5106，在主显示层上绘制位于子显示层以下的内容，并将透明视频帧和主显示层对应的视频显示区域进行融合，得到第三融合层。

具体地，当子显示层均完成透明化处理后，在主显示层上绘制位于子显示层以下的内容，并将透明视频帧和主显示层对应的视频显示区域进行融合，得到第三融合层。

步骤5108，将第二融合层的内容绘制于第三融合层上，在网页的视频显示区域中显示当前视频帧。

具体地，当子显示层和主显示层均完成透明化后，需要将子显示层各个融合后的信息融合至主显示层，以完成网页的它整体透明化，即将第二融合层的内容绘制于第三融合层上，在网页的视频显示区域中显示当前视频帧。

示例地，如图9所示，若渲染层包括surface1、surface2以及主surface三层。在该场景下，视频内容可能绘制在surface1或者surface2上，然后需要再把surface1或者surface2的内容绘制到主surface上，因此该模式下透明视频帧所在的每一层surface都需要做透明处理才能让视频播放区域透明。

具体地，1.绘制位于surface1上的网页内容。

1.1在surface1上绘制位于视频画布层(video层)之下的网页内容。

1.2把绘制模式设置为覆盖模式。

1.3根据网页的缩放比例的信息缩放透明视频帧，最终确定透明视频帧在surface1上的绝对位置，通过绘图指令绘制透明的透明视频帧到surface1上。

1.4绘制surface1上位于video层之上的网页内容。

2.绘制surface2上的网页内容，surface1作为surface2中的一部分会被重新绘制到surface2上。

2.1在surface2上绘制位于surface1所在层以下的网页内容。

2.2根据网页的缩放比例等信息，计算出透明的透明视频帧在surface2上的绝对位置video_rect2。

2.3通过绘图指令把surface2中的video_rect2区域绘制成透明。

2.4根据网页的缩放比例等信息，计算出surface1在surface2上的绝对位置，绘制surface1的内容到surface2上。

2.5绘制surface2上的其他网页内容。

3.绘制主surface上的网页内容，surface2作为主surface中的一部分会被绘制到主surface上。

3.1在主surface上绘制位于surface2所在层以下网页内容。

3.2根据网页的缩放比例等信息计算出透明视频帧在主surface中对应的区域video_rect。

3.3通过绘图指令把主surface中的video_rect区域绘制成透明。

3.4根据网页的缩放比例等信息，计算出surface2在surface上的绝对位置，绘制surface2的内容到主Surface上。

3.5绘制主surface上的，位于surface2对应layer之上其他网页内容。

在本申请实施例中，针对主显示层和子显示层进行透明化处理，以实现对网页的各个渲染层均进行透明化处理，进而使得在网页的视频显示区域中显示当前视频帧，如图10所示，例如，显示区域中可以显示五角星。能够在网页复杂度较高的情况下，在硬件解码的方式下对浏览器网页进行透明化，解决传统技术如图11所示的浏览器网页遮挡显示区域的问题，例如，无法显示如图10中的五角星。

为了便于本领域技术人员得理解，现以一个落地实施例对浏览器视频显示方法进一步说明，参照图12所示，浏览器视频显示方法，包括：

S11，当获取到视频播放请求时，基于浏览器的合成模块创建视频画布层；

S12，绘制浏览器的网页；

S13，基于视频画布层获取当前视频帧；

S14，获取当前视频帧的视频播放状态，判断当前视频帧的视频播放状态是否为停止；

S15，若否，则根据浏览器中网页的缩放比例和当前视频帧的视频元素信息，确定当前视频帧在网页中的显示区域信息；显示区域信息包括位置坐标信息和尺寸信息，并将视频显示区域的位置信息和尺寸信息发送至多媒体模块中以更新后端视频显示区域的参数信息。

S16，按照位置坐标信息和尺寸信息创建透明视频帧并传输至合成模块；

S17，判断顶层显示层是否为主显示层；

S18，若网页中的顶层显示层为主显示层，在主显示层存在视频画布层的标识信息时，在主显示层上绘制视频画布层之下的网页内容；

S19，根据主显示层的缩放比例和当前视频帧的视频元素信息，计算透明视频帧中透明区域位于主显示层的绝对位置；

S20，按照绝对位置将透明区域覆盖于主显示层对应的视频显示区域上，得到第一融合层，并在第一融合层中绘制位于视频画布层之上的网页内容，以使网页的视频显示区域中显示当前视频帧。

S21，若网页中的顶层显示层为子显示层，在子显示层上绘制视频画布层之下的网页内容；

S22，根据子显示层的缩放比例和当前视频帧的视频元素信息，计算透明视频帧中透明区域位于子显示层的绝对位置；

S23，按照绝对位置将透明区域帧覆盖于子显示层对应的视频显示区域上，得到第二融合层，并在第二融合层中绘制位于视频画布层之上的网页内容；

S24，判断显示层的下一层是否为非主显示层；

S25，若子显示层的下一层为非主显示层，则将子显示层的下一层作为新的子显示层，将子显示层作为新的视频画布层并返回执行在子显示层上绘制视频画布层之下的网页内容的步骤，直至子显示层的下一层为主显示层；

S26，在主显示层上绘制位于子显示层以下的内容，并将透明视频帧和主显示层对应的视频显示区域进行融合，得到第三融合层；

S27，将第二融合层的内容绘制于第三融合层上，在网页的视频显示区域中显示当前视频帧。

上述实施例提供的浏览器视频显示方法的实现原理和有益效果，可以参见上文中对于显示设备各实施例的限定，在此不再赘述。

基于相同的发明构思，本申请一些实施例提供一种浏览器视频显示方法，应用于显示设备200，方法包括：

当获取到视频播放请求时，基于浏览器的合成模块创建视频画布层；

绘制浏览器的网页；

基于视频画布层获取当前视频帧，根据浏览器中网页的缩放比例和当前视频帧的视频元素信息，确定当前视频帧在网页中的显示区域信息；显示区域信息包括位置坐标信息和尺寸信息；

按照位置坐标信息和尺寸信息创建透明视频帧并传输至合成模块；

通过合成模块将透明视频帧与网页中对应的视频显示区域进行融合处理，以使网页的视频显示区域中显示当前视频帧。

在一个实施例中，将透明视频帧与网页中对应的视频显示区域进行融合处理，以使网页的视频显示区域中显示当前视频帧的步骤，包括：

若网页中的顶层显示层为主显示层，将透明视频帧与网页中对应的视频显示区域进行融合处理，以使网页的视频显示区域中显示当前视频帧。

在一个实施例中，若网页中的顶层显示层为主显示层，将透明视频帧和主显示层进行融合，在网页的视频显示区域中显示当前视频帧的步骤时，被进一步配置为：

在主显示层存在视频画布层的标识信息时，在主显示层上绘制视频画布层之下的网页内容；

根据主显示层的缩放比例和当前视频帧的视频元素信息，计算透明视频帧中透明区域位于主显示层的绝对位置；

按照绝对位置将透明区域覆盖于主显示层对应的视频显示区域上，得到第一融合层，并在第一融合层中绘制位于视频画布层之上的网页内容，以使网页的视频显示区域中显示当前视频帧。

在一个实施例中，将透明视频帧和网页进行融合，在网页的视频显示区域中显示当前视频帧的步骤时，还被进一步配置为：

若网页中的顶层显示层为子显示层，将透明视频帧和子显示层对应的视频显示区域进行融合，得到第二融合层；

在主显示层上绘制位于子显示层以下的内容，并将透明视频帧和主显示层对应的视频显示区域进行融合，得到第三融合层；

将第二融合层的内容绘制于第三融合层上，在网页的视频显示区域中显示当前视频帧。

在一个实施例中，将透明视频帧和子显示层进行融合，得到第二融合层的步骤，被进一步配置为：

若网页中的顶层显示层为子显示层，在子显示层上绘制视频画布层之下的网页内容；

根据子显示层的缩放比例和当前视频帧的视频元素信息，计算透明视频帧中透明区域位于子显示层的绝对位置；

按照绝对位置将透明区域帧覆盖于子显示层对应的视频显示区域上，得到第二融合层，并在第二融合层中绘制位于视频画布层之上的网页内容；

若子显示层的下一层为非主显示层，则将子显示层的下一层作为新的子显示层，将子显示层作为新的视频画布层并返回执行在子显示层上绘制视频画布层之下的网页内容的步骤，直至子显示层的下一层为主显示层。

在一个实施例中，浏览器视频显示方法，还包括：

获取当前视频帧的视频播放状态；

若视频播放状态为播放或者暂停，则执行根据浏览器中网页的缩放比例和当前视频帧的视频元素信息，确定当前视频帧在网页中的显示区域信息的步骤。

在一个实施例中，浏览器视频显示方法，还包括：

将视频显示区域的位置信息和尺寸信息发送至多媒体模块中以更新后端视频显示区域的参数信息。

上述实施例提供的浏览器视频显示方法的实现原理和有益效果，可以参见上文中对于显示设备各实施例的限定，在此不再赘述。

具体实现中，本发明还提供一种计算机可读存储介质，其中，该计算机可读存储介质可存储有程序，该程序执行时可包括本发明提供的浏览器视频显示方法的各实施例中的部分或全部步骤。所述的存储介质可为磁碟、光盘、只读存储记忆体(英文：read-onlymemory，简称：ROM)或随机存储记忆体(英文：random access memory，简称：RAM)等。

本领域的技术人员可以清楚地了解到本发明实施例中的技术可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本发明实施例中的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该软件产品可以存储在计算机可读存储介质中。

本说明书中各个实施例之间相同相似的部分互相参见即可。尤其，对于浏览器视频显示方法实施例而言，由于其基本相似于显示设备200和终端设备300实施例，所以描述的比较简单，相关之处参见显示设备200和终端设备300实施例中的说明即可。

最后应说明的是：以上各实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述各实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。

为了方便解释，已经结合具体的实施方式进行了上述说明。但是，上述示例性的讨论不是意图穷尽或者将实施方式限定到上述公开的具体形式。根据上述的教导，可以得到多种修改和变形。上述实施方式的选择和描述是为了更好的解释本公开内容，从而使得本领域技术人员更好的使用所述实施方式。

Claims (10)

1.一种显示设备，其特征在于，包括：

显示器，被配置为显示用户界面；

控制器，被配置为：

当获取到视频播放请求时，基于浏览器的合成模块创建视频画布层；

绘制所述浏览器的网页；

基于所述视频画布层获取当前视频帧，根据所述浏览器中网页的缩放比例和所述当前视频帧的视频元素信息，确定所述当前视频帧在所述网页中的显示区域信息；所述显示区域信息包括位置坐标信息和尺寸信息；

按照所述位置坐标信息和尺寸信息创建透明视频帧并传输至所述合成模块；

通过所述合成模块将所述透明视频帧与所述网页中对应的视频显示区域进行融合处理，以使所述网页的视频显示区域中显示当前视频帧。

2.根据权利要求1所述的显示设备，其特征在于，所述控制器执行所述将所述透明视频帧与所述网页中对应的视频显示区域进行融合处理，以使所述网页的视频显示区域中显示当前视频帧的步骤时，被进一步配置为：

若所述网页中的顶层显示层为主显示层，将所述透明视频帧与所述网页中对应的视频显示区域进行融合处理，以使所述网页的视频显示区域中显示当前视频帧。

3.根据权利要求2所述的显示设备，其特征在于，所述控制器执行所述若所述网页中的顶层显示层为主显示层，将所述透明视频帧和所述主显示层进行融合，在所述网页的视频显示区域中显示所述当前视频帧的步骤时，被进一步配置为：

在所述主显示层存在所述视频画布层的标识信息时，在所述主显示层上绘制所述视频画布层之下的网页内容；

根据所述主显示层的缩放比例和所述当前视频帧的视频元素信息，计算所述透明视频帧中透明区域位于所述主显示层的绝对位置；

按照所述绝对位置将所述透明区域覆盖于所述主显示层对应的视频显示区域上，得到第一融合层，并在所述第一融合层中绘制位于所述视频画布层之上的网页内容，以使所述网页的视频显示区域中显示所述当前视频帧。

4.根据权利要求2所述的显示设备，其特征在于，所述控制器执行所述将所述透明视频帧和所述网页进行融合，在所述网页的视频显示区域中显示当前视频帧的步骤时，还被进一步配置为：

若所述网页中的顶层显示层为子显示层，将所述透明视频帧和所述子显示层对应的视频显示区域进行融合，得到第二融合层；

在所述主显示层上绘制位于所述子显示层以下的内容，并将所述透明视频帧和所述主显示层对应的视频显示区域进行融合，得到第三融合层；

将所述第二融合层的内容绘制于所述第三融合层上，在所述网页的视频显示区域中显示所述当前视频帧。

5.根据权利要求4所述的显示设备，其特征在于，所述控制器执行所述将所述透明视频帧和所述子显示层进行融合，得到第二融合层的步骤，被进一步配置为：

若所述网页中的顶层显示层为子显示层，在所述子显示层上绘制所述视频画布层之下的网页内容；

根据所述子显示层的缩放比例和所述当前视频帧的视频元素信息，计算所述透明视频帧中透明区域位于所述子显示层的绝对位置；

按照所述绝对位置将所述透明区域帧覆盖于所述子显示层对应的视频显示区域上，得到第二融合层，并在所述第二融合层中绘制位于所述视频画布层之上的网页内容；

若所述子显示层的下一层为非所述主显示层，则将所述子显示层的下一层作为新的子显示层，将所述子显示层作为新的视频画布层并返回执行在所述子显示层上绘制所述视频画布层之下的网页内容的步骤，直至所述子显示层的下一层为所述主显示层。

6.根据权利要求1-5任一项所述的显示设备，其特征在于，所述控制器还被进一步配置为：

获取所述当前视频帧的视频播放状态；

若所述视频播放状态为播放或者暂停，则执行所述根据所述浏览器中网页的缩放比例和所述当前视频帧的视频元素信息，确定所述当前视频帧在所述网页中的显示区域信息的步骤。

7.根据权利要求3-5任一项所述的显示设备，其特征在于，所述控制器还被进一步配置为：

将所述视频显示区域的位置信息和所述尺寸信息发送至多媒体模块中以更新后端视频显示区域的参数信息。

8.一种浏览器视频显示方法，其特征在于，应用于显示设备，所述方法包括：

当获取到视频播放请求时，基于浏览器的合成模块创建视频画布层；

绘制所述浏览器的网页；

基于所述视频画布层获取当前视频帧，根据所述浏览器中网页的缩放比例和所述当前视频帧的视频元素信息，确定所述当前视频帧在所述网页中的显示区域信息；所述显示区域信息包括位置坐标信息和尺寸信息；

按照所述位置坐标信息和尺寸信息创建透明视频帧并传输至所述合成模块；

通过所述浏览器的合成模块将所述透明视频帧与所述网页对应的视频显示区域进行融合处理，以使所述网页的视频显示区域中显示当前视频帧。

9.根据权利要求8所述的方法，其特征在于，所述将所述透明视频帧和所述网页对应的视频显示区域进行融合处理，以使所述网页的视频显示区域中显示当前视频帧，包括：

若所述网页中的顶层显示层为主显示层，将所述透明视频帧和所述主显示层对应的视频显示区域进行融合，以使所述网页的视频显示区域中显示所述当前视频帧。

10.根据权利要求9所述的方法，其特征在于，所述若所述网页中的顶层显示层为主显示层，将所述透明视频帧和所述主显示层进行融合，在所述网页的视频显示区域中显示所述当前视频帧，包括：

在所述主显示层存在所述视频画布层的标识信息时，在所述主显示层上绘制所述视频画布层之下的网页内容；

根据所述主显示层的缩放比例和所述当前视频帧的视频元素信息，计算所述透明视频帧中透明区域位于所述主显示层的绝对位置；

按照所述绝对位置将所述透明区域覆盖于所述主显示层对应的视频显示区域上，得到第一融合层，并在所述第一融合层中绘制位于所述视频画布层之上的网页内容，以使所述网页的视频显示区域中显示所述当前视频帧。