叠加播放方法、装置、电子设备及存储介质

技术领域

本申请涉及视频播放技术领域，尤其涉及一种叠加播放方法、装置、电子设备及存储介质。

背景技术

随着泛娱乐媒体行业和视听技术的发展，出现了各种各样的视频，例如长视频、短视频、直播视频等，而视频的播放方式与展示方式也较之前出现了较大的变化并衍生出更多的需求，例如视频画面添加广告、动态角标、视频等素材，实现视频与素材的叠加播放。

相关技术中，使用HTML中的video标签进行视频的播放，通过定时器按照固定频率截取当前播放的视频画面，例如每秒截取30次，然后绘制在画布中，并且按照叠加播放时机，在画布中相应位置绘制素材，如此可实现视频与素材的叠加播放。

由于通过定时器按照固定频率截取当前播放的视频画面，导致帧率固定，并且如果规定时间内没有完成相应次数的视频画面截取，例如每秒截取30次视频画面，实际上有可能因为资源紧张，仅仅截取了25次视频画面，会导致丢帧，叠加播放出现卡顿。

发明内容

为了解决上述通过定时器按照固定频率截取当前播放的视频画面，导致帧率固定，并且如果规定时间内没有完成相应次数的视频画面截取，会导致丢帧，叠加播放出现卡顿的技术问题，本申请提供了一种叠加播放方法、装置、电子设备及存储介质。具体技术方案如下：

第一方面，本申请提供了一种叠加播放方法，所述方法包括：

获取主视频，并确定所述主视频对应的目标图像，在浏览器的播放区域显示所述目标图像；

获取待叠加素材，并确定所述待叠加素材在画布中的位置，其中，所述画布为位于所述播放区域之上的透明画布；

响应于叠加播放指令，播放所述主视频，在所述播放区域显示所述主视频的视频画面，在所述画布的所述位置显示所述待叠加素材。

在一个可选的实施方式中，所述在浏览器的播放区域显示所述目标图像，包括：

通过webGL技术，对所述目标图像进行渲染，并在浏览器的播放区域显示渲染后的所述目标图像；

所述在所述播放区域显示所述主视频的视频画面，在所述画布的所述位置显示所述待叠加素材，包括：

通过webGL技术，对所述主视频的视频画面以及所述待叠加素材进行同步渲染；

在所述播放区域显示渲染后的所述主视频的视频画面，在所述画布的所述位置显示渲染后的所述待叠加素材。

在一个可选的实施方式中，所述获取待叠加素材之后，所述方法还包括：

确定所述待叠加素材在所述主视频的叠加区间，其中，所述叠加区间内的所述主视频的视频画面与所述待叠加素材叠加播放；

所述通过webGL技术，对所述主视频的视频画面以及所述待叠加素材进行同步渲染，包括：

获取所述主视频的视频画面，并判断所述主视频的视频画面是否处于所述叠加区间；

在所述主视频的视频画面处于所述叠加区间的情况下，通过webGL技术，对所述主视频的视频画面以及所述待叠加素材进行同步渲染。

在一个可选的实施方式中，所述方法还包括：

在所述主视频的视频画面未处于所述叠加区间的情况下，通过webGL技术，对所述主视频的视频画面进行渲染；

在所述播放区域显示渲染后的所述主视频的视频画面。

在一个可选的实施方式中，所述通过webGL技术，对所述主视频的视频画面以及所述待叠加素材进行同步渲染，包括：

获取显示屏的更新频率，将所述显示屏的更新频率确定为视频画面的渲染频率；

通过webGL技术，按照所述渲染频率对所述主视频的视频画面以及所述待叠加素材进行同步渲染。

在一个可选的实施方式中，所述确定所述待叠加素材在画布中的位置，包括：

确定所述待叠加素材的素材类型，并判断所述素材类型是否为预设素材类型；

在所述素材类型为所述预设素材类型的情况下，根据所述素材类型确定所述待叠加素材在画布中的位置。

在一个可选的实施方式中，所述确定所述待叠加素材在画布中的位置，包括：

确定所述主视频对应的视频类型，并判断所述视频类型是否为预设视频类型；

在所述视频类型为所述预设视频类型的情况下，根据所述视频类型确定所述待叠加素材在画布中的位置。

在一个可选的实施方式中，所述确定所述待叠加素材在所述主视频的叠加区间，包括：

获取所述主视频对应的字幕，从所述字幕中选取与所述待叠加素材相关的目标字幕；

确定所述目标字幕对应的所述主视频中的视频区间，将所述视频区间确定为所述待叠加素材在所述主视频的叠加区间。

在一个可选的实施方式中，所述确定所述待叠加素材在所述主视频的叠加区间，包括：

确定所述待叠加素材的素材类型，并判断所述素材类型是否为预设素材类型；

在所述素材类型为所述预设素材类型的情况下，确定所述主视频的完整视频区间；

将所述完整视频区间确定为所述待叠加素材在所述主视频的叠加区间。

第二方面，本申请提供了一种叠加播放装置，所述装置包括：

视频获取模块，用于获取主视频，并确定所述主视频对应的目标图像，在浏览器的播放区域显示所述目标图像；

素材获取模块，用于获取待叠加素材，并确定所述待叠加素材在画布中的位置，其中，所述画布为位于所述播放区域之上的透明画布；

叠加播放模块，用于响应于叠加播放指令，播放所述主视频，在所述播放区域显示所述主视频的视频画面，在所述画布的所述位置显示所述待叠加素材。

第三方面，还提供了一种电子设备，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；

存储器，用于存放计算机程序；

处理器，用于执行存储器上所存放的程序时，实现上述第一方面中任一所述的叠加播放方法。

第四方面，还提供了一种存储介质，所述存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述第一方面中任一所述的叠加播放方法。

第五方面，还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述任一所述的叠加播放方法。

本申请实施例提供的上述技术方案与现有技术相比具有如下优点：本申请实施例提供的该方法，获取主视频，并确定主视频对应的目标图像，在浏览器的播放区域显示目标图像，获取待叠加素材，并确定待叠加素材在画布中的位置，其中，画布为位于播放区域之上的透明画布，响应于叠加播放指令，播放主视频，在播放区域显示主视频的视频画面，在画布的位置显示素材。通过获取主视频，在浏览器的播放区域显示主视频对应的目标图像，获取待叠加素材，并确定待叠加素材在画布中的位置，画布为位于播放区域之上的透明画布，响应于叠加播放指令，播放主视频，在播放区域显示主视频的视频画面，在画布的相应位置显示待叠加素材，如此通过分层的方式代替画布截帧的方式，实现主视频与待叠加素材的叠加播放，避免帧率固定，并且不会丢帧，叠加播放避免出现卡顿。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。

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

一个或多个实施例通过与之对应的附图中的图片进行示例性说明，这些示例性说明并不构成对实施例的限定，附图中具有相同参考数字标号的元件表示为类似的元件，除非有特别申明，附图中的图不构成比例限制。

图1为本申请实施例提供的一种叠加播放方法的实施流程示意图；

图2为本申请实施例提供的另一种叠加播放方法的实施流程示意图；

图3为本申请实施例提供的一种位置确定方法的实施流程示意图；

图4为本申请实施例提供的另一种位置确定方法的实施流程示意图；

图5为本申请实施例提供的一种叠加区间确定方法的实施流程示意图；

图6为本申请实施例提供的另一种叠加区间确定方法的实施流程示意图；

图7为本申请实施例提供的一种叠加播放装置的结构示意图；

图8为本申请实施例提供的一种电子设备的结构示意图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请的一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。

下文的公开提供了许多不同的实施例或例子用来实现本申请的不同结构。为了简化本申请的公开，下文中对特定例子的部件和设置进行描述。当然，它们仅仅为示例，并且目的不在于限制本申请。此外，本申请可以在不同例子中重复参考数字和/或字母。这种重复是为了简化和清楚的目的，其本身不指示所讨论各种实施例和/或设置之间的关系。

目前，使用HTML中的video标签进行视频的播放，通过定时器按照固定频率截取当前播放的视频画面，例如每秒截取30次，然后绘制在画布中，并且按照叠加播放时机，在画布中相应位置绘制元素，如此可实现视频与素材的叠加播放。

这种画布截帧的方式，由于通过定时器按照固定频率截取当前播放的视频画面，导致帧率固定，并且如果规定时间内没有完成相应次数的视频画面截取，会导致丢帧，叠加播放出现卡顿，并且画布无法充分利用GPU能力。

为此，在本申请实施例中，浏览器中通过分层的方式代替画布截帧的方式，实现主视频与待叠加素材的叠加播放，避免帧率固定，并且不会丢帧，叠加播放避免出现卡顿。其中，浏览器主要是分为主视频层、视频贴片层、控制层。

其中，主视频层通过webGL技术针对主视频进行渲染，其图形来自于CPU中对于视频画面的像素转换，最终展示到浏览器中；视频贴片层渲染原理与主视频层一致，添加了定位、缩放等处理，可以将其在指定位置以指定方式进行渲染。

控制层与视频贴片层均位于画布上，控制层为画布实现的交互逻辑，可以通过操作区针对大小、位置等进行编辑，其信息将实时同步到视频贴片层，从而更改尺寸以及位置信息。webGL技术可以充分利用GPU的图像处理能力，画面帧率更加稳定。

基于上述发明构思，如图1所示，为本申请实施例提供的一种叠加播放方法的实施流程示意图，该方法应用于电子设备(例如电脑)，具体可以包括以下步骤：

S101，获取主视频，并确定主视频对应的目标图像，在浏览器的播放区域显示目标图像。

在本申请实施例中，可以获取主视频，其中，主视频例如可以是长视频、短视频、直播视频等各式各样的视频，还可以是多个视频片段的集合，本申请实施例对此不作限定。

其中，可以由用户选择或者指定，从而可以将用户选择或者指定的视频确定为主视频，从而获取主视频，当然也可以是从多个视频中随机选择一个视频，将该视频确定为主视频，从而获取主视频。

对于主视频，可以确定主视频对应的目标图像，其中，对于目标图像，例如可以是主视频的第一帧图像，或者主视频的视频封面图像，可以在浏览器的播放区域显示目标图像。

S102，获取待叠加素材，并确定待叠加素材在画布中的位置，其中，画布为位于播放区域之上的透明画布。

在本申请实施例中，可以获取待叠加素材，对于待叠加素材，例如可以是广告、动态角标、视频、图片等各式各样的素材，本申请实施例对此不作限定。

其中，可以由用户指定或者选择，从而将用户指定或者选择的素材确定为待叠加素材，从而获取待叠加素材，当然也可以是从多个素材中随机确定一个素材，将该素材确定为待叠加素材，从而获取待叠加素材。

对于待叠加素材，可以确定待叠加素材在画布中的位置，其中，画布为位于浏览器的播放区域之上的透明画布，其大小、位置可调整，通常情况下画布的大小与播放区域的大小一致。

需要说明的是，用户可以将待叠加素材放置在画布中，可以将用户的放置位置确定为待叠加素材在画布中的位置。此外，用户还可以在画布调整待叠加素材的大小、位置等。

S103，响应于叠加播放指令，播放主视频，在播放区域显示主视频的视频画面，在画布的位置显示待叠加素材。

在本申请实施例中，用户可以触发叠加播放指令，从而可以响应于叠加播放指令，播放主视频，在播放区域显示主视频的视频画面，与此同时，在画布的相应位置显示待叠加素材，如此实现主视频与待叠加素材的叠加播放。

其中，用户可以通过某个按钮触发叠加播放指令，从而可以响应于叠加播放指令，使用HTML中的video标签进行主视频的播放，在播放区域显示主视频的视频画面，与此同时，在画布的相应位置显示待叠加素材，如此实现主视频与待叠加素材的叠加播放。

通过上述对本申请实施例提供的技术方案的描述，获取主视频，并确定主视频对应的目标图像，在浏览器的播放区域显示目标图像，获取待叠加素材，并确定待叠加素材在画布中的位置，其中，画布为位于播放区域之上的透明画布，响应于叠加播放指令，播放主视频，在播放区域显示主视频的视频画面，在画布的位置显示素材。

通过获取主视频，在浏览器的播放区域显示主视频对应的目标图像，获取待叠加素材，并确定待叠加素材在画布中的位置，画布为位于播放区域之上的透明画布，响应于叠加播放指令，播放主视频，在播放区域显示主视频的视频画面，在画布的相应位置显示待叠加素材，如此通过分层的方式代替画布截帧的方式，实现主视频与待叠加素材的叠加播放，避免帧率固定，并且不会丢帧，叠加播放避免出现卡顿。

如图2所示，为本申请实施例提供的另一种叠加播放方法的实施流程示意图，该方法应用于电子设备(例如电脑)，具体可以包括以下步骤：

S201，获取主视频，并确定主视频对应的目标图像。

在本申请实施例中，获取主视频，并且确定主视频对应的目标图像。其中，对于目标视频，例如可以是主视频的第一帧图像，或者主视频的视频封面图像。

S202，通过webGL技术，对目标图像进行渲染，并在浏览器的播放区域显示渲染后的目标图像。

在本申请实施例中，对于主视频对应的目标图像，可以通过webGL技术，对该目标图像进行渲染，并且可以在浏览器的播放区域显示渲染后的目标图像，意味着通过webGL技术，对该目标图像进行渲染，并将渲染结果显示在浏览器的播放区域。

S203，获取待叠加素材，并确定待叠加素材在画布中的位置，其中，画布为位于播放区域之上的透明画布。

在本申请实施例中，获取待叠加素材，并确定待叠加素材在画布中的位置，其中，画布为位于浏览器的播放区域之上的透明画布，其大小、位置可调整。

需要说明的是，用户可以将待叠加素材放置在画布中，可以将用户的放置位置确定为待叠加素材在画布中的位置。此外，用户还可以在画布调整待叠加素材的大小、位置等。

此外，对于素材，例如动态角标，广告Loge等，一般放置在视频画面的右上角，例如对于广告文案，一般放置在视频画面的相应文案的上方，如此各式各样的素材，其通常存在各自对应的视频画面位置。

基于此，在本申请实施例中，对于待叠加素材在画布中的位置的确定，可以参考图3所示方法。如图3所示，为本申请实施例提供的一种位置确定方法的实施流程示意图，该方法具体可以包括以下步骤：

S301，确定待叠加素材的素材类型，并判断素材类型是否为预设素材类型。

在本申请实施例中，对于待叠加素材，可以确定该待叠加素材的素材类型，并且判断该待叠加素材的素材类型是否为预设素材类型。其中，预设素材类型的个数可以是多个。

需要说明的是，对于预设素材类型，通常指的是某些在视频画面有固定位置的素材的素材类型。例如，广告Loge，一般放置在视频画面的右上角，其位置固定，则广告Loge的素材类型可以是预设素材类型。

S302，在素材类型为预设素材类型的情况下，根据素材类型确定待叠加素材在画布中的位置。

在本申请实施例中，对于该待叠加素材的素材类型，在该待叠加素材的素材类型为预设素材类型的情况下，根据该待叠加素材的素材类型，确定待叠加素材在画布中的位置。

需要说明的是，对于预设素材类型，其对应的素材在视频画面的位置一般比较固定，从而可以根据大众的经验，来确定待叠加素材在画布中的位置，从而避免用户确定待叠加素材在画布中的位置的繁琐步骤。

例如，预设素材类型为Loge类型，Loge类型对应的Loge，其一般在视频画面的右上角，其位置固定，则根据此经验，在素材类型为Loge类型的情况下，根据素材类型，确定待叠加素材在画布中的位置为右上角。

另外，对于视频，例如短视频，由于视频时长有限，因此对于素材尽可能放在视频画面的显眼位置，而对于长视频，视频时长足够长，对于素材在视频画面中的位置，有多种选择，因此对于不同类型的视频，素材在其视频画面中的位置存在差异。

基于此，在本申请实施例中，对于待叠加素材在画布中的位置的确定，可以参考图4所示方法。如图4所示，为本申请实施例提供的一种位置确定方法的实施流程示意图，该方法具体可以包括以下步骤：

S401，确定主视频对应的视频类型，并判断视频类型是否为预设视频类型。

在本申请实施例中，对于主视频，可以确定主视频对应的视频类型，并且判断主视频的视频类型是否为预设视频类型。其中，对于预设视频类型，例如可以是短视频。

S402，在视频类型为预设视频类型的情况下，根据视频类型确定待叠加素材在画布中的位置。

在本申请实施例中，对于主视频对应的视频类型，在其视频类型为预设视频类型的情况下，可以根据主视频的视频类型，确定待叠加素材在画布中的位置。

例如，对于主视频对应的视频类型，在其视频类型为短视频的情况下，可以根据主视频的视频类型，确定待叠加素材在画布中的位置为画布中央，从而避免用户确定待叠加素材在画布中的位置的繁琐步骤。

S204，确定待叠加素材在主视频的叠加区间，其中，叠加区间内的主视频的视频画面与待叠加素材叠加播放。

在本申请实施例中，获取待叠加素材之后，除上述确定待叠加素材在画布中的位置之外，还可以确定待叠加素材在主视频的叠加区间，这里的主视频的叠加区间，指的是主视频中某个视频片段，意味着该叠加区间内的主视频的视频画面与待叠加素材叠加播放。

其中，对于待叠加素材在主视频的叠加区间，通常可以由待叠加素材与主视频中字幕的相关性来决定。例如，主视频中字幕提及到了待叠加素材，可以将该字幕涉及到的视频片段与待叠加素材叠加播放。

基于此，在本申请实施例中，对于待叠加素材在主视频的叠加区间，可以参考图5所示方法。如图5所示，为本申请实施例提供的一种叠加区间确定方法的实施流程示意图，该方法具体可以包括以下步骤：

S501，获取主视频对应的字幕，从字幕中选取与待叠加素材相关的目标字幕。

在本申请实施例中，对于主视频，可以提取该主视频的字幕，从而可以获取到主视频对应的字幕。对于主视频对应的字幕，从字幕中选取与待叠加素材相关的目标字幕。

例如，对于主视频A，提取该主视频A的字幕，从而可以获取到主视频A对应的字幕。对于主视频A对应的字幕，从字幕中选取与广告Loge相关的目标字幕，即选取提及到广告Loge的字幕。

S502，确定目标字幕对应的主视频中的视频区间，将视频区间确定为待叠加素材在主视频的叠加区间。

在本申请实施例中，对于目标字幕，可以确定目标字幕对应的主视频中的视频区间，即确定目标字幕对应的主视频中某个视频片段，该视频片段的字幕即该目标字幕，从而可以将该视频区间确定为待叠加素材在主视频的叠加区间。

此外，对于素材，例如动态角标，广告Loge等，一般放置在视频的整个播放过程中去展示，例如对于广告文案，一般仅放置在视频的某个视频片段去展示，如此各式各样的素材，其通常存在各自对应的视频展示区间。

基于此，在本申请实施例中，对于待叠加素材在主视频的叠加区间，可以参考图6所示方法。如图6所示，为本申请实施例提供的另一种叠加区间确定方法的实施流程示意图，该方法具体可以包括以下步骤：

S601，确定待叠加素材的素材类型，并判断素材类型是否为预设素材类型。

在本申请实施例中，对于待叠加素材，可以确定该待叠加素材的素材类型，并且判断该待叠加素材的素材类型是否为预设素材类型。其中，预设素材类型的个数可以是多个。

需要说明的是，对于预设素材类型，通常指的是某些在视频画面有固定位置的素材的素材类型。例如，广告Loge，一般放置在视频画面的右上角，其位置固定，则广告Loge的素材类型可以是预设素材类型。

S602，在素材类型为预设素材类型的情况下，确定主视频的完整视频区间。

S603，将完整视频区间确定为待叠加素材在主视频的叠加区间。

在本申请实施例中，对于该待叠加素材的素材类型，在该待叠加素材的素材类型为预设素材类型的情况下，确定主视频的完整视频区间，将主视频的完整视频区间确定为待叠加素材在主视频的叠加区间，意味着在主视频的整个播放过程中，均会展示待叠加素材，即在主视频的整个播放过程中，主视频的视频画面与待叠加素材叠加播放。

S205，响应于叠加播放指令，播放主视频，获取主视频的视频画面，并判断主视频的视频画面是否处于叠加区间。

在本申请实施例中，用户可以触发叠加播放指令，从而可以响应于叠加播放指令，播放主视频，获取主视频的视频画面，并判断主视频的视频画面是否处于叠加区间。

其中，用户可以通过某个按钮触发叠加播放指令，从而可以响应于叠加播放指令，使用HTML中的video标签进行主视频的播放，播放主视频，获取主视频的视频画面，并判断主视频的视频画面是否处于叠加区间。

S206，在主视频的视频画面处于叠加区间的情况下，通过webGL技术，对主视频的视频画面以及待叠加素材进行同步渲染。

S207，在播放区域显示渲染后的主视频的视频画面，在画布的位置显示渲染后的待叠加素材。

在本申请实施例中，在主视频的视频画面处于叠加区间的情况下，说明主视频的视频画面要与待叠加素材叠加播放，此时通过webGL技术，对主视频的视频画面以及待叠加素材进行同步渲染，由此可以在播放区域显示渲染后的主视频的视频画面，与此同时，在画布的位置显示渲染后的待叠加素材。

其中，对于主视频的视频画面以及待叠加素材的渲染，可以按照某个渲染频率进行渲染，这样画面帧率更高，播放更流畅。基于此，获取显示屏的更新频率，将显示屏的更新频率确定为视频画面的渲染频率，通过webGL技术，按照渲染频率对主视频的视频画面以及待叠加素材进行同步渲染。

S208，在主视频的视频画面未处于叠加区间的情况下，通过webGL技术，对主视频的视频画面进行渲染。

S209，在播放区域显示渲染后的主视频的视频画面。

在本申请实施例中，在主视频的视频画面未处于叠加区间的情况下，说明此时主视频的视频画面不需要与待叠加素材叠加播放，此时可以通过webGL技术，对主视频的视频画面进行渲染，在播放区域显示渲染后的主视频的视频画面。

其中，对主视频的视频画面的渲染，可以按照某个渲染频率进行渲染，这样画面帧率更高，播放更流畅。基于此，获取显示屏的更新频率，将显示屏的更新频率确定为视频画面的渲染频率，通过webGL技术，按照渲染频率对主视频的视频画面进行渲染。

通过上述对本申请实施例提供的技术方案的描述，通过获取主视频，并确定主视频对应的目标图像，通过webGL技术，对目标图像进行渲染，并显示在浏览器的播放区域，获取待叠加素材，并确定待叠加素材在画布中的位置，画布为位于播放区域之上的透明画布，确定待叠加素材在主视频的叠加区间，响应于叠加播放指令，播放主视频，获取主视频的视频画面，并判断主视频的视频画面是否处于叠加区间，在主视频的视频画面处于叠加区间的情况下，通过webGL技术，对主视频的视频画面以及待叠加素材进行同步渲染，在播放区域显示渲染后的主视频的视频画面，在画布的位置显示渲染后的待叠加素材，在主视频的视频画面未处于叠加区间的情况下，通过webGL技术，对主视频的视频画面进行渲染，在播放区域显示渲染后的主视频的视频画面，如此通过分层的方式代替画布截帧的方式，实现主视频与待叠加素材的叠加播放，避免帧率固定，并且不会丢帧，叠加播放避免出现卡顿。并且使用webGL技术进行视频画面的渲染，可以充分利用GPU的图像处理能力，画面帧率更加稳定，而且根据显示屏的更新频率进行渲染，帧率更高，播放更流畅。

与上述方法实施例相对应，本申请实施例还提供了一种叠加播放装置，如图7所示，该装置可以包括：视频获取模块710、素材获取模块720、叠加播放模块730。

视频获取模块710，用于获取主视频，并确定所述主视频对应的目标图像，在浏览器的播放区域显示所述目标图像；

素材获取模块720，用于获取待叠加素材，并确定所述待叠加素材在画布中的位置，其中，所述画布为位于所述播放区域之上的透明画布；

叠加播放模块730，用于响应于叠加播放指令，播放所述主视频，在所述播放区域显示所述主视频的视频画面，在所述画布的所述位置显示所述待叠加素材。

本申请实施例还提供了一种电子设备，如图8所示，包括处理器81、通信接口82、存储器83和通信总线84，其中，处理器81，通信接口82，存储器83通过通信总线84完成相互间的通信，

存储器83，用于存放计算机程序；

处理器81，用于执行存储器83上所存放的程序时，实现如下步骤：

获取主视频，并确定所述主视频对应的目标图像，在浏览器的播放区域显示所述目标图像；获取待叠加素材，并确定所述待叠加素材在画布中的位置，其中，所述画布为位于所述播放区域之上的透明画布；响应于叠加播放指令，播放所述主视频，在所述播放区域显示所述主视频的视频画面，在所述画布的所述位置显示所述待叠加素材。

上述电子设备提到的通信总线可以是外设部件互连标准(Peripheral ComponentInterconnect，简称PCI)总线或扩展工业标准结构(Extended Industry StandardArchitecture，简称EISA)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

通信接口用于上述电子设备与其他设备之间的通信。

存储器可以包括随机存取存储器(Random Access Memory，简称RAM)，也可以包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储装置。

上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(Digital Signal Processing，简称DSP)、专用集成电路(Application SpecificIntegrated Circuit，简称ASIC)、现场可编程门阵列(Field－Programmable Gate Array，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

在本申请提供的又一实施例中，还提供了一种存储介质，该存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述实施例中任一所述的叠加播放方法。

在本申请提供的又一实施例中，还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述实施例中任一所述的叠加播放方法。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本申请实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在存储介质中，或者从一个存储介质向另一个存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘Solid State Disk(SSD))等。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本申请的较佳实施例而已，并非用于限定本申请的保护范围。凡在本申请的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本申请的保护范围内。