CN116708900A - 视频播放方法及电子设备 - Google Patents

Abstract

本申请提供了一种视频播放方法及电子设备。该方法包括：在电子设备的屏幕上全屏显示第一控件承载的第一页面，第一页面中包括第一视频；第一视频进入播放状态后，检测到第一视频位于屏幕上的用户不可见区域，暂停第一视频的播放；在屏幕上显示悬浮窗，在悬浮窗中播放第二控件承载的第二视频，其中，第一视频和第二视频对应同一视频的两条视频流。这样，通过两个控件分别承载主页面的视频和悬浮窗页面的视频，在主页面中的视频处于屏幕上用户不可见区域时，以悬浮窗方式播放该视频，使不同系统的电子设备都能够按照相同方案播放备忘录应用的视频笔记中的视频，降低了开发成本。

Description

视频播放方法及电子设备

技术领域

本申请涉及终端设备领域，尤其涉及一种视频播放方法及电子设备。

背景技术

当前，电子设备中普遍安装有备忘录应用。通过备忘录应用，用户可以将想要记录的信息输入到电子设备中，形成一条备忘录存储起来。这样就避免了携带纸笔等文具的麻烦，给用户带来了便利。

发明内容

为了解决上述技术问题，本申请提供一种视频播放方法及电子设备，通过两个控件分别承载主页面的视频和悬浮窗页面的视频，在主页面中的视频处于屏幕上用户不可见区域时，以悬浮窗方式播放该视频，使得不同系统的电子设备都能够按照相同方案播放备忘录应用的视频笔记中的视频，降低了开发成本。

第一方面，本申请提供一种视频播放方法。该方法应用于电子设备，该方法包括：在电子设备的屏幕上全屏显示第一控件承载的第一页面，第一页面中包括第一视频；第一视频进入播放状态后，检测到第一视频位于屏幕上的用户不可见区域，暂停第一视频的播放；在屏幕上显示悬浮窗，在悬浮窗中播放第二控件承载的第二视频，其中，第一视频和第二视频对应同一视频的两条视频流。这样，通过两个控件分别承载主页面的视频和悬浮窗页面的视频，在主页面中的视频处于屏幕上用户不可见区域时，以悬浮窗方式播放该视频，使得不同系统的电子设备都能够按照相同方案播放备忘录应用的视频笔记中的视频，降低了开发成本。

根据第一方面，在屏幕上显示悬浮窗，并在悬浮窗中播放第二控件承载的第二视频之后，还包括：检测到第一视频位于屏幕上的用户可见区域，暂停第二视频的播放，隐藏悬浮窗；播放第一视频。这样，当第一视频返回到用户可见区域后，停止第二视频的播放，在主页面上播放第一视频，方便用户同时观看第一视频及主页面上的其他内容，避免悬浮窗的遮挡。

根据第一方面，检测到第一视频位于屏幕上的用户不可见区域，暂停第一视频的播放之前，还包括：当第一视频进入播放状态，生成第二页面，第二页面的内容为第二视频；创建第二控件，将第二页面加载到第二控件中，得到悬浮窗视图。

根据第一方面，当第一视频进入播放状态，生成第二页面，第二页面的内容为第二视频，包括：当第一视频进入播放状态，获取第一视频的资源地址；从资源地址获取第二视频；通过配置好的视频播放模板，生成内容为第二视频的第二页面。

根据第一方面，第一视频进入播放状态后，检测到第一视频位于屏幕上的用户不可见区域，暂停第一视频的播放之后，还包括：获取第一视频暂停播放时第一视频对应的视频流中的第一时间点；在屏幕上显示悬浮窗，在悬浮窗中播放第二控件承载的第二视频，包括：在屏幕上显示悬浮窗，在悬浮窗中从第二视频对应的视频流中的第一时间点开始播放第二视频。

根据第一方面，检测到第一视频返回到屏幕上的用户可见区域，暂停第二视频的播放，隐藏悬浮窗之后，还包括：获取第二视频暂停播放时第二视频对应的视频流中的第二时间点；播放第一视频，包括：从第一视频对应的视频流中的第二时间点开始播放第一视频。

根据第一方面，还包括：获取第一视频的画面的宽度信息和高度信息；通过配置好的视频播放模板，生成内容为第二视频的第二页面，包括：通过配置好的视频播放模板，根据第一视频的画面的宽度信息和高度信息，生成画面宽高比与第一视频的画面的宽高比相同、内容为第二视频的第二页面。

根据第一方面，第一控件和第二控件均为webview。

根据第一方面，第一页面为第五版超文本标记语言HTML5页面。

根据第一方面，第二页面为第五版超文本标记语言HTML5页面。

根据第一方面，第一视频的播放界面上包括笔记信息。

根据第一方面，笔记信息与第一视频的视图位于同一图层。

根据第一方面，第一视频位于屏幕上的用户不可见区域是指：第一视频的视图的下边框高于屏幕上的用户可见区域的上边框，或者，第一视频的视图的上边框低于屏幕上的用户可见区域的下边框。

根据第一方面，第一页面为备忘录应用中的视频笔记页面。

第二方面，本申请提供一种电子设备，包括：存储器和处理器，存储器与处理器耦合；存储器存储有程序指令，当程序指令由所述处理器执行时，使得电子设备执行第一方面任意一项的视频播放方法。

第三方面，本申请提供一种计算机可读存储介质，包括计算机程序，当计算机程序在电子设备上运行时，使得电子设备执行前述的第一方面任意一项的视频播放方法。

附图说明

图1为示例性示出的电子设备100的结构示意图；

图2为示例性示出的本申请实施例的电子设备100的软件结构框图；

图3(a)为示例性示出的手机中备忘录应用的视频笔记全屏显示时的一种页面图；

图3(b)为示例性示出的手机中备忘录应用的视频笔记全屏显示时的一种页面图；

图3(c)为示例性示出的视频笔记中视频区域位于用户不可见区域时显示悬浮窗时的一种页面图；

图4为示例性示出的视频播放方法的流程示意图；

图5为示例性示出的创建悬浮窗视图的过程示意图；

图6(a)为示例性示出的手机屏幕上全屏显示备忘录应用中视频笔记的第一页面的示意图；

图6(b)为示例性示出的手机屏幕上全屏显示备忘录应用中视频笔记的第一页面时用户向下滑动第一页面的滚动条的示意图；

图6(c)为示例性示出的在备忘录应用中视频笔记的第一页面上层显示悬浮窗的示意图；

图7为示例性示出的悬浮窗中的第二视频与第一页面中第一视频的时间同步过程的示例图；

图8为示例性示出的悬浮窗中的第一视频与悬浮窗中第二视频的时间同步过程的示例图；

图9为示例性示出的视频笔记云系统的结构示意图。

具体实施方式

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

本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。

本申请实施例的说明书和权利要求书中的术语“第一”和“第二”等是用于区别不同的对象，而不是用于描述对象的特定顺序。例如，第一目标对象和第二目标对象等是用于区别不同的目标对象，而不是用于描述目标对象的特定顺序。

在本申请实施例中，“示例性的”或者“例如”等词用于表示作例子、例证或说明。本申请实施例中被描述为“示例性的”或者“例如”的任何实施例或设计方案不应被解释为比其它实施例或设计方案更优选或更具优势。确切而言，使用“示例性的”或者“例如”等词旨在以具体方式呈现相关概念。

在本申请实施例的描述中，除非另有说明，“多个”的含义是指两个或两个以上。例如，多个处理单元是指两个或两个以上的处理单元；多个系统是指两个或两个以上的系统。

相关技术中，备忘录可以用于记录文本、图片、音频等信息。本申请实施例中，备忘录可以用于记录视频笔记。

其中，视频笔记的内容可以包括用户所观看的视频以及用户在观看视频过程中所记录的笔记信息。例如，笔记信息可以是划线标记、文字标注等等。

本申请实施例提供一种视频播放方法，能够支持播放备忘录中记录的视频笔记，并使不同系统的电子设备都能够按照相同方案播放备忘录应用的视频笔记中的视频，降低开发成本。

本申请实施例中的视频播放方法可以应用于电子设备，该电子设备例如可以是手机、平板、个人计算机PC机等。

本实施例中的电子设备的结构可以如图1所示。

图1为示例性示出的电子设备100的结构示意图。应该理解的是，图1所示电子设备100仅是电子设备的一个范例，并且电子设备100可以具有比图中所示的更多的或者更少的部件，可以组合两个或多个的部件，或者可以具有不同的部件配置。图1中所示出的各种部件可以在包括一个或多个信号处理和/或专用集成电路在内的硬件、软件、或硬件和软件的组合中实现。

请参见图1，电子设备100可以包括：处理器110，内部存储器121，通用串行总线(universal serial bus，USB)接口130，充电管理模块140，电源管理模块141，电池142，天线1，天线2，移动通信模块150，无线通信模块160，音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，传感器模块180，指示器192，摄像头193等。

处理器110可以包括一个或多个处理单元，例如：处理器110可以包括应用处理器(application processor，AP)，调制解调处理器，图形处理器(graphics processingunit，GPU)，图像信号处理器(image signal processor，ISP)，控制器，存储器，视频编解码器，数字信号处理器(digital signal processor，DSP)，基带处理器，和/或神经网络处理器(neural-network processing unit，NPU)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。

其中，控制器可以是电子设备100的神经中枢和指挥中心。控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。

处理器110中还可以设置存储器，用于存储指令和数据。在一些实施例中，处理器110中的存储器为高速缓冲存储器。

电子设备100可以通过音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，以及应用处理器等实现音频功能。例如音乐播放，录音等。

麦克风170C，也称“话筒”，“传声器”，用于将声音信号转换为电信号。当拨打电话或发送语音信息时，用户可以通过人嘴靠近麦克风170C发声，将声音信号输入到麦克风170C。电子设备100可以设置至少一个麦克风170C。在另一些实施例中，电子设备100可以设置两个麦克风170C，除了采集声音信号，还可以实现降噪功能。在另一些实施例中，电子设备100还可以设置三个，四个或更多麦克风170C，实现采集声音信号，降噪，还可以识别声音来源，实现定向录音功能等。

电子设备100通过GPU，显示屏194，以及应用处理器等实现显示功能。GPU为图像处理的微处理器，连接显示屏194和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器110可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。

显示屏194用于显示图像，视频等。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display，LCD)，有机发光二极管(organic light-emittingdiode，OLED)等。在一些实施例中，电子设备100可以包括1个或N个显示屏194，N为大于1的正整数。

其中，电子设备100的软件系统可以采用分层架构、事件驱动架构、微核架构、微服务架构，或云架构。本申请实施例以分层架构的安卓(Android)系统为例，示例性说明电子设备100的软件结构。

图2为示例性示出的本申请实施例的电子设备100的软件结构框图。

电子设备100的分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，Android系统可以包括应用程序层、应用程序框架层、系统库以及内核层等。

应用程序层可以包括一系列应用程序包。

如图2所示，应用程序包可以包括相机，日历，地图，WLAN，蓝牙，音乐，短消息，图库，通话，导航，备忘录，视频等应用程序。

其中，本实施例中的备忘录支持记录视频笔记的功能。

应用程序框架层为应用程序层的应用程序提供应用编程接口(applicationprogramming interface，API)和编程框架。应用程序框架层包括一些预先定义的函数。

如图2所示，应用程序框架层可以包括窗口管理器，内容提供器，资源管理器，视图系统等。

窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小，判断是否有状态栏，锁定屏幕，截取屏幕等。

内容提供器用来存放和获取数据，并使这些数据可以被应用程序访问。所述数据可以包括视频，图像，音频，拨打和接听的电话，浏览历史和书签，电话簿等。

视图系统包括可视控件，例如显示文字的控件，显示图片的控件等。视图系统可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如，包括短信通知图标的显示界面，可以包括显示文字的视图以及显示图片的视图。

资源管理器为应用程序提供各种资源，比如本地化字符串，图标，图片，布局文件，视频文件等等。

安卓运行时(Android Runtime)包括核心库和虚拟机。Android runtime负责安卓系统的调度和管理。

核心库包含两部分：一部分是java语言需要调用的功能函数，另一部分是安卓的核心库。

应用程序层和应用程序框架层运行在虚拟机中。虚拟机将应用程序层和应用程序框架层的java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理，堆栈管理，线程管理，安全和异常的管理，以及垃圾回收等功能。

系统库可以包括多个功能模块。例如：表面管理器(surface manager)，媒体库(Media Libraries)，三维图形处理库(例如：OpenGL ES)，2D图形引擎(例如：SGL)等。

表面管理器用于对显示子系统进行管理，并且为多个应用程序提供了2D和3D图层的融合。

媒体库支持多种常用的音频，视频格式回放和录制，以及静态图像文件等。媒体库可以支持多种音视频编码格式，例如:MPEG4，H.264，MP3，AAC，AMR，JPG，PNG等。

三维图形处理库用于实现三维图形绘图，图像渲染，合成，和图层处理等。

2D图形引擎(二维图形引擎)是2D绘图的绘图引擎。

内核层是硬件和软件之间的层。

如图2所示，内核层可以包括显示驱动、音频驱动、蓝牙驱动、Wi-Fi驱动、传感器驱动等模块。

可以理解的是，图2示出的软件结构中的层以及各层中包含的部件，并不构成对电子设备100的具体限定。在本申请另一些实施例中，电子设备100可以包括比图示更多或更少的层，以及每个层中可以包括更多或更少的部件，本申请不做限定。

需要说明的是，以上图1所列举的电子设备为基于安卓系统的电子设备。在本申请实施例中，电子设备也可以是基于Windows系统的。

下面通过实施例，对本申请进行详细说明。

本实施例中以手机中备忘录应用的视频笔记的显示为例，对视频播放方法进行说明。

图3(a)为示例性示出的手机中备忘录应用的视频笔记全屏显示时的一种页面图。请参见图3(a)，第一页面为备忘录应用的视频笔记全屏显示时的页面，第一页面的内容包括第一视频和其他内容。

其中，其他内容可以包括文本、图片、音频中的任意一种或多种。

需要说明的是，当第一页面的全部内容超出手机屏幕的用户可见区域时，在第一页面的右侧可以显示滚动条，如图3(b)所示。图3(b)为示例性示出的手机中备忘录应用的视频笔记全屏显示时的一种页面图。

图3(c)为示例性示出的视频笔记中视频区域位于用户不可见区域时显示悬浮窗时的一种页面图。后续将结合图6(c)说明出现图3(c)所示页面的过程。

图4为示例性示出的视频播放方法的流程示意图。请参见图4，本申请实施例中，视频播放方法的流程可以包括如下步骤：

S401、在电子设备的屏幕上全屏显示第一控件承载的第一页面，第一页面中包括第一视频。

S402、第一视频进入播放状态后，检测到第一视频位于屏幕上的用户不可见区域，暂停第一视频的播放。

S403、在屏幕上显示悬浮窗，在悬浮窗中播放第二控件承载的第二视频，其中，第一视频和第二视频对应同一视频的两条视频流。

其中，可以通过调用窗口管理器(如图2所示)，将创建好的悬浮窗视图加载到电子设备的前台，从而显示悬浮窗。

本实施例中，第一控件和第二控件均为webview。

本实施例中，第一页面可以为第五版超文本标记语言HTML5页面。

本实施例中，第一视频的播放界面上可以包括笔记信息，例如划线标记、文字标注等。

在一个示例中，第一视频位于屏幕上的用户不可见区域是指：第一视频的视图的下边框高于屏幕上的用户可见区域的上边框，或者，第一视频的视图的上边框低于屏幕上的用户可见区域的下边框。

其中，用户可见区域是指电子设备屏幕上显示的信息能够被用户看见的区域。

在一个示例中，第一页面可以为备忘录应用中的视频笔记页面。

在一个示例性的实现过程中，步骤S402之前，还可以包括：

当第一视频进入播放状态，生成第二页面，第二页面的内容为第二视频；

创建第二控件，将第二页面加载到第二控件中，得到悬浮窗视图。

这样，就创建了悬浮窗视图。但此时悬浮窗并未显示。

本实施例中，第一视频和第二视频对应同一个视频的两条视频流，即第一视频和第二视频是同源的。例如，第一视频对应视频流1，第二视频对应视频流2，视频流1和视频流2是两条视频流，但视频流1和视频流2都是从同一个资源地址获取的同一视频的视频流。

在一个示例中，创建悬浮窗视图的过程可以如图5所示。图5为示例性示出的创建悬浮窗视图的过程示意图。图5中的第一视频模块、播放控制模块、第二视频模块均位于图2所示的备忘录模块中。

请参见图5，本申请实施例中，创建悬浮窗视图的过程可以包括如下步骤：

当手机屏幕上全屏显示备忘录应用中视频笔记的第一页面，响应于用户点击第一页面中的第一视频的播放按钮，第一视频由暂停状态切换到播放状态。

其中，第一页面为HTML5(Hyper Text Markup Language5，第5版超文本标记语言)页面。

图6(a)为示例性示出的手机屏幕上全屏显示备忘录应用中视频笔记的第一页面的示意图。

S501、第一视频模块监听到第一视频进入播放状态，向播放控制模块发送第一通知，第一通知中包括第一视频的视频标识(即视频ID)、URL(:Uniform Resource Locator，统一资源定位符)和第一视频的画面尺寸信息。

其中，第一视频的画面尺寸信息可以包括第一视频的画面的宽度和高度。通过将第一视频的画面尺寸信息，例如第一视频的画面的宽度和高度，通知给播放控制模块，使得播放控制模块在生成第二视频对应的H5页面时，可以将第二视频的画面的宽高比设置为与第一视频的画面的宽高比相同。这样，当通过悬浮窗播放第二视频时，用户看到的是按比例缩小后的第一视频的画面，给用户连续观看视频的体验。

第一视频的URL用于指示第一视频的资源地址。

第一视频的视频标识用于指示第一视频的在其他实施例中，第一通知中也可以不包括第一视频的画面尺寸信息。

S502、播放控制模块接收到第一通知，从第一视频的URL所指示的资源地址获取第二视频，通过配置好的视频播放模板，生成内容为第二视频的第二页面。

本实施例中，第二页面可以为第五版超文本标记语言HTML5页面。

本实施例中，播放控制模块通过接收第一通知获取到第一视频的资源地址。

在一个示例中，如果第一通知中包括第一视频的画面尺寸信息，例如第一视频的画面的宽度信息和高度信息，播放控制模块就获取了第一视频的画面的宽度信息和高度信息；

此时，通过配置好的视频播放模板，生成内容为第二视频的第二页面，包括：通过配置好的视频播放模板，根据第一视频的画面的宽度信息和高度信息，生成画面宽高比与第一视频的画面的宽高比相同、内容为第二视频的第二页面。

其中，视频播放模板为视频播放HTML模板。

S503、播放控制模块创建第二控件，将第二页面加载到第二控件中，得到悬浮窗视图。

至此，完成了悬浮窗视图的创建。

本步骤中，显示视频笔记的第一页面如图3(b)所示。

在一个示例性的实现过程中，步骤S402之后，视频播放方法还可以包括：

获取第一视频暂停播放时第一视频对应的视频流中的第一时间点；

在屏幕上显示悬浮窗，在悬浮窗中播放第二控件承载的第二视频，包括：在屏幕上显示悬浮窗，在悬浮窗中从第二视频对应的视频流中的第一时间点开始播放第二视频。

在一个示例中，可以用第一视频模块来监听第一视频的播放时间信息，并在第一视频暂停播放时，将此时的时间点(即第一时间点)通过播放控制器通知给第二视频模块，由第二视频模块根据第一时间点来设置第二视频开始播放的时间点。该过程可以如图7所示。

图7为示例性示出的悬浮窗中的第二视频与第一页面中第一视频的时间同步过程的示例图。请参见图7，悬浮窗中的第二视频与第一页面中第一视频的时间同步过程可以包括如下步骤：

S701、第一视频进入播放状态后，第一视频模块监听第一视频的播放时间信息。

S702、用户向下滑动第一页面的滚动条，第一视频的视图向屏幕上方移动，当第一视频的视图移出屏幕上的用户可见区域，第一视频模块检测到第一视频位于屏幕上的用户不可见区域，向播放控制模块发送移出通知，移出通知用于指示第一视频位于屏幕上的用户不可见区域。

图6(b)为示例性示出的手机屏幕上全屏显示备忘录应用中视频笔记的第一页面时用户向下滑动第一页面的滚动条的示意图。图6(b)中向下的实线箭头表示滑动方向。

S703、播放控制模块接收到移出通知，向第一视频模块发送第一暂停播放指令，第一暂停播放指令用于指示暂停第一视频的播放。

S704、第一视频模块根据第一暂停播放指令，暂停播放第一视频，并将此时监听到的第一时间点通过第一时间同步消息发送给播放控制器。

其中，第一时间点是第一视频暂停播放时第一视频对应的视频流中的时间点。例如，第一视频对应视频流1，第一视频暂停播放时，第一视频的播放时间为视频流1中的时间点1，时间点1即为第一时间点。

除了包括第一时间点，第一时间同步消息中还可以包括第一视频的URL和视频ID。

S705、播放控制器接收到第一时间同步消息，调用窗口管理器将承载第二视频的第二控件加载到悬浮窗窗口，并向第二视频模块发送第一播放指令，第一播放指令中包括第一时间同步消息中的第一时间点，第一播放指令用于指示播放第二视频。

S706、第二视频模块根据第一播放指令，显示悬浮窗窗口，并控制第二视频从视频流中的第一时间点开始播放。本步骤中的视频流指第二视频对应的视频流2。

这样，第二视频模块在播放第二视频时，就会根据第一播放指令中包括的时间点信息，从视频流2中的第一时间点开始播放第二视频。

其中，步骤S403中，悬浮窗位于第一页面的上层。

图6(c)为示例性示出的在备忘录应用中视频笔记的第一页面上层显示悬浮窗的示意图。

需要说明的是，在第一页面中，还可以包括视频笔记的标题信息，标题信息可以位于第一页面的上方，例如图6(a)、图6(b)、图6(c)中第一页面中时间信息“×月×日12:22”的上方。

在一个示例中，步骤S403之后，视频播放方法还可以包括：

检测到第一视频位于屏幕上的用户可见区域，暂停第二视频的播放，隐藏悬浮窗；

播放第一视频，第一视频开始播放的时间点等于第二视频暂停播放的视频流中的第二时间点。

在一个示例中，检测到第一视频返回到屏幕上的用户可见区域，暂停第二视频的播放，隐藏悬浮窗之后，还可以包括：

获取第二视频暂停播放时第二视频对应的视频流中的第二时间点；

播放第一视频，包括：从第一视频对应的视频流中的第二时间点开始播放第一视频。

例如，用户滑动滚动条，使滚动条从图6(c)中的滚动条位置上滑到图6(b)中的滚动条位置，使得第一视频的视图返回到屏幕上的用户可见区域，悬浮窗隐藏，第一视频从暂停状态进入到播放状态。此时，第一视频需要与第二视频进行时间同步。

图8为示例性示出的悬浮窗中的第一视频与悬浮窗中第二视频的时间同步过程的示例图。请参见图8，第一视频与悬浮窗中第二视频的时间同步过程可以包括如下步骤：

S801、第二视频进入播放状态后，第二视频模块监听第二视频的播放时间信息。

S802、用户向上滑动第一页面的滚动条，第一视频的视图向屏幕下方移动，当第一视频的视图移入屏幕上的用户可见区域，第一视频模块检测到第一视频位于屏幕上的用户可见区域，向播放控制模块发送移入通知，移入通知用于指示第一视频位于屏幕上的用户可见区域。

S803、播放控制模块接收到移入通知，向第二视频模块发送第二暂停播放指令，第二暂停播放指令用于指示暂停第二视频的播放以及指示隐藏悬浮窗。

S804、第二视频模块根据第二暂停播放指令，暂停播放第二视频，然后将此时监听到的第二时间点通过第二时间同步消息发送给播放控制器。

其中，可以通过调用窗口管理器(如图2所示)，将创建好的悬浮窗加载到电子设备的前台，从而显示悬浮窗。

其中，第二时间点是第二视频暂停播放时第二视频对应的视频流中的时间点。例如，第二视频对应视频流2，第二视频暂停播放时，第二视频的播放时间为视频流2中的时间点2，时间点2即为第二时间点。

除了包括第二时间点，第二时间同步消息中还可以包括第二视频的URL和视频ID，这些信息可以使第一视频模块确定应该播放哪个视频。

S805、播放控制器接收到第二时间同步消息，调用窗口管理器将承载第二视频的第二控件从悬浮窗窗口移除，并向第一视频模块发送第二播放指令，第二播放指令中包括第二时间同步消息中的第二时间点，第二播放指令用于指示播放第一视频。

将第二控件从悬浮窗窗口中移除后，第二控件仍然存在，但无法显示，因此使得悬浮窗窗口隐藏起来。

后续，当用户再次滑动第一页面中的滚动条，使得第一页面中的第一视图位于屏幕上的用户不可见区域，电子设备可以通过执行图7所示的流程，再次调用窗口管理器加载第二控件到悬浮窗窗口中，显示悬浮窗。

S806、第一视频模块根据第二播放指令，控制第一视频从视频流中的第二时间点开始播放。本步骤中的视频流指第一视频对应的视频流1。

这样，第一视频模块在播放第一视频时，就会根据第二播放指令中包括的时间点信息，从视频流1中的第二时间点开始播放第一视频。

以上以手机为例，说明了备忘录应用的视频笔记中的视频在手机上的视频播放方法。需要说明的是，在PC机上，也可以采用同样的视频播放方法在PC机屏幕上播放备忘录应用的视频笔记中的视频。此处不再赘述。

需要说明的是，PC机与手机或平板采用的是不同的系统，PC机采用windows系统，手机或平板可以采用安卓系统或其他系统，将上述视频播放方法应用在PC机或手机上时，采用的代码是相同的，只是封装代码的编程语言不同。因此，将本申请方案应用在不同系统的电子设备上时，只需根据编程语言进行不同的封装，而不需要针对不同系统分别编写代码，从而降低了开发成本。

图9为示例性示出的视频笔记云系统的结构示意图。请参见图9，视频笔记云系统可以包括手机100、云平台200和PC机300。手机100中通过备忘录应用记录视频笔记后，可以将视频笔记的内容上传到云平台200。PC机300可以从云平台200下载视频笔记的内容，然后通过PC机300本地的备忘录应用打开视频笔记，在打开视频笔记的过程中在PC机300本地加载视频笔记的内容。

其中，视频笔记的内容例如前述图6(b)所示，包括视频和其他内容。其中的视频可以包括原始视频和随原始视频显示的笔记信息，其他内容可以包括文本信息、图片、音频等等。

本申请实施例还提供一种电子设备，该电子设备包括存储器和处理器，存储器与处理器耦合，存储器存储有程序指令，当程序指令由所述处理器执行时，使得电子设备前述电子设备所执行的视频播放方法。

可以理解的是，电子设备为了实现上述功能，其包含了执行各个功能相应的硬件和/或软件模块。结合本文中所公开的实施例描述的各示例的算法步骤，本申请能够以硬件或硬件和计算机软件的结合形式来实现。某个功能究竟以硬件还是计算机软件驱动硬件的方式来执行，取决于技术方案的特定应用和设计约束条件。本领域技术人员可以结合实施例对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

本实施例还提供一种计算机存储介质，该计算机存储介质中存储有计算机指令，当该计算机指令在电子设备上运行时，使得电子设备执行上述相关方法步骤实现上述实施例中的视频播放方法。

本实施例还提供了一种计算机程序产品，当该计算机程序产品在计算机上运行时，使得计算机执行上述相关步骤，以实现上述实施例中的视频播放方法。

另外，本申请实施例还提供一种装置，这个装置具体可以是芯片，组件或模块，该装置可包括相连的处理器和存储器；其中，存储器用于存储计算机执行指令，当装置运行时，处理器可执行存储器存储的计算机执行指令，以使芯片执行上述各方法实施例中的视频播放方法。

其中，本实施例提供的电子设备、计算机存储介质、计算机程序产品或芯片均用于执行上文所提供的对应的方法，因此，其所能达到的有益效果可参考上文所提供的对应的方法中的有益效果，此处不再赘述。

通过以上实施方式的描述，所属领域的技术人员可以了解到，为描述的方便和简洁，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个装置，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是一个物理单元或多个物理单元，即可以位于一个地方，或者也可以分布到多个不同地方。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

本申请各个实施例的任意内容，以及同一实施例的任意内容，均可以自由组合。对上述内容的任意组合均在本申请的范围之内。

集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个可读取存储介质中。基于这样的理解，本申请实施例的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该软件产品存储在一个存储介质中，包括若干指令用以使得一个设备(可以是单片机，芯片等)或处理器(processor)执行本申请各个实施例方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(read only memory，ROM)、随机存取存储器(random access memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

上面结合附图对本申请的实施例进行了描述，但是本申请并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本申请的启示下，在不脱离本申请宗旨和权利要求所保护的范围情况下，还可做出很多形式，均属于本申请的保护之内。

结合本申请实施例公开内容所描述的方法或者算法的步骤可以硬件的方式来实现，也可以是由处理器执行软件指令的方式来实现。软件指令可以由相应的软件模块组成，软件模块可以被存放于随机存取存储器(Random Access Memory，RAM)、闪存、只读存储器(Read Only Memory，ROM)、可擦除可编程只读存储器(Erasable Programmable ROM，EPROM)、电可擦可编程只读存储器(Electrically EPROM，EEPROM)、寄存器、硬盘、移动硬盘、只读光盘(CD-ROM)或者本领域熟知的任何其它形式的存储介质中。一种示例性的存储介质耦合至处理器，从而使处理器能够从该存储介质读取信息，且可向该存储介质写入信息。当然，存储介质也可以是处理器的组成部分。处理器和存储介质可以位于ASIC中。

本领域技术人员应该可以意识到，在上述一个或多个示例中，本申请实施例所描述的功能可以用硬件、软件、固件或它们的任意组合来实现。当使用软件实现时，可以将这些功能存储在计算机可读介质中或者作为计算机可读介质上的一个或多个指令或代码进行传输。计算机可读介质包括计算机存储介质和通信介质，其中通信介质包括便于从一个地方向另一个地方传送计算机程序的任何介质。存储介质可以是通用或专用计算机能够存取的任何可用介质。

上面结合附图对本申请的实施例进行了描述，但是本申请并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本申请的启示下，在不脱离本申请宗旨和权利要求所保护的范围情况下，还可做出很多形式，均属于本申请的保护之内。

Claims (16)

1.一种视频播放方法，其特征在于，应用于电子设备，所述方法包括：

在所述电子设备的屏幕上全屏显示第一控件承载的第一页面，所述第一页面中包括第一视频；

所述第一视频进入播放状态后，检测到所述第一视频位于所述屏幕上的用户不可见区域，暂停所述第一视频的播放；

在所述屏幕上显示悬浮窗，在所述悬浮窗中播放第二控件承载的第二视频，其中，所述第一视频和所述第二视频对应同一视频的两条视频流。

2.根据权利要求1所述的方法，其特征在于，在所述屏幕上显示悬浮窗，并在所述悬浮窗中播放第二控件承载的第二视频之后，还包括：

检测到所述第一视频位于所述屏幕上的用户可见区域，暂停所述第二视频的播放，隐藏所述悬浮窗；

播放所述第一视频。

3.根据权利要求1所述的方法，其特征在于，检测到所述第一视频位于所述屏幕上的用户不可见区域，暂停所述第一视频的播放之前，还包括：

当所述第一视频进入播放状态，生成第二页面，所述第二页面的内容为所述第二视频；

创建第二控件，将所述第二页面加载到所述第二控件中，得到悬浮窗视图。

4.根据权利要求3所述的方法，其特征在于，当所述第一视频进入播放状态，生成第二页面，所述第二页面的内容为所述第二视频，包括：

当所述第一视频进入播放状态，获取所述第一视频的资源地址；

从所述资源地址获取所述第二视频；

通过配置好的视频播放模板，生成内容为所述第二视频的第二页面。

5.根据权利要求1所述的方法，其特征在于，所述第一视频进入播放状态后，检测到所述第一视频位于所述屏幕上的用户不可见区域，暂停所述第一视频的播放之后，还包括：

获取所述第一视频暂停播放时所述第一视频对应的视频流中的第一时间点；

在所述屏幕上显示悬浮窗，在所述悬浮窗中播放第二控件承载的第二视频，包括：在所述屏幕上显示悬浮窗，在所述悬浮窗中从所述第二视频对应的视频流中的所述第一时间点开始播放所述第二视频。

6.根据权利要求2所述的方法，其特征在于，检测到所述第一视频返回到所述屏幕上的用户可见区域，暂停所述第二视频的播放，隐藏所述悬浮窗之后，还包括：

获取所述第二视频暂停播放时所述第二视频对应的视频流中的第二时间点；

播放所述第一视频，包括：从所述第一视频对应的视频流中的所述第二时间点开始播放所述第一视频。

7.根据权利要求1所述的方法，其特征在于，还包括：

获取所述第一视频的画面的宽度信息和高度信息；

通过配置好的视频播放模板，生成内容为所述第二视频的第二页面，包括：通过配置好的视频播放模板，根据所述第一视频的画面的宽度信息和高度信息，生成画面宽高比与所述第一视频的画面的宽高比相同、内容为所述第二视频的第二页面。

8.根据权利要求1所述的方法，其特征在于，所述第一控件和所述第二控件均为webview。

9.根据权利要求1所述的方法，其特征在于，所述第一页面为第五版超文本标记语言HTML5页面。

10.根据权利要求3所述的方法，其特征在于，所述第二页面为第五版超文本标记语言HTML5页面。

11.根据权利要求1所述的方法，其特征在于，所述第一视频的播放界面上包括笔记信息。

12.根据权利要求1所述的方法，其特征在于，所述笔记信息与所述第一视频的视图位于同一图层。

13.根据权利要求1所述的方法，其特征在于，所述第一视频位于所述屏幕上的用户不可见区域是指：所述第一视频的视图的下边框高于所述屏幕上的用户可见区域的上边框，或者，所述第一视频的视图的上边框低于所述屏幕上的用户可见区域的下边框。

14.根据权利要求1所述的方法，其特征在于，所述第一页面为备忘录应用中的视频笔记页面。

15.一种电子设备，其特征在于，包括：

存储器和处理器，所述存储器与所述处理器耦合；

所述存储器存储有程序指令，当所述程序指令由所述处理器执行时，使得所述电子设备执行权利要求1-14中任意一项所述的视频播放方法。

16.一种计算机可读存储介质，包括计算机程序，其特征在于，当所述计算机程序在电子设备上运行时，使得所述电子设备执行如权利要求1-14中任意一项所述的视频播放方法。