CN103986962A

CN103986962A - 显示悬浮式播放窗口的方法和系统

Info

Publication number: CN103986962A
Application number: CN201410241420.9A
Authority: CN
Inventors: 李歆; 孙昆明; 郭慧敏; 唐桂尧; 姚键; 潘柏宇; 卢述奇
Original assignee: 1Verge Internet Technology Beijing Co Ltd
Current assignee: Youku Network Technology Beijing Co Ltd
Priority date: 2014-06-03
Filing date: 2014-06-03
Publication date: 2014-08-13
Anticipated expiration: 2034-06-03
Also published as: CN103986962B; WO2015184745A1

Abstract

本申请公开了一种显示悬浮式播放窗口的方法和系统，包括：在浏览窗口内显示的页面中，针对该页面上的播放器窗口的底端边缘处生成位置标线；监测所述位置标线在所述浏览窗口中的位置，当监测到所述位置标线位于该浏览窗口的顶端边界时，生成启动提示信息；根据该启动提示信息生成播放缩略窗口并将该播放缩略窗口以悬浮方式显示于当前所述浏览窗口内的页面中；获取所述播放器窗口中所播放视频的视频流数据以及当前视频的时间进度数据，在生成的所述播放缩略窗口中进行同步播放。本申请解决了由于页面中的视频播放窗口固定嵌入页面中，跟随页面一同滚动至浏览器窗口的显示范围以外便无法观看的问题。

Description

显示悬浮式播放窗口的方法和系统

技术领域

本申请涉及页面播放显示领域，更具体地，涉及一种显示悬浮式播放窗口的方法和系统。

背景技术

随着互联网技术的快速发展，人们获取信息的方式已经发生改变：从传统的书籍、报纸、电视、广播等方式，继而变成通过互联网获取。尤其是互联网将影视节目、新闻、广告、聊天视频、游戏视频和监控视频等等丰富的综合性网络视频资源进行共享，从而网络视频已经成为人们学习、社交以及休闲娱乐而不可替代的重要方式。

对于拥有大量视频资源的视频网站而言，用户可以通过终端上的浏览器进行访问视频网站的点播页面，观看用户想要观看的各类视频。

目前，视频网站中的播放页面通常由网页播放器区域、互动交流区域（包括：评论区域、相关视频推荐区域等）组成，播放器窗口以“嵌入”的方式设置于页面中，也就是说，当用户滚动页面时，播放器窗口将跟随页面一同滚动。对于浏览器而言，其显示窗口的尺寸大小往往小于页面的整体面积，用户只能通过滚动页面以浏览页面中的全部内容。例如：用户想要针对当前观看的视频进行评论操作时，必然会进行滚动操作将页面中的评论区域调整到浏览器窗口中，这样，用户便可以通过浏览器显示窗口观看到评论区域，但是，播放器窗口将跟随页面滚动至当前浏览器显示窗口的显示范围之外，用户在浏览评论内容或进行评论时，不能看到当前播放器窗口中所播放的内容，可能导致视频内容的流失，严重影响用户的浏览体验。

发明内容

有鉴于此，本申请所要解决的技术问题是提供了一种显示悬浮式播放窗口的方法和系统，以解决由于页面中的视频播放窗口固定嵌入页面中，跟随页面一同滚动至浏览器窗口的显示范围以外便无法观看的问题。

为了解决上述技术问题，本申请公开了一种显示悬浮式播放窗口的方法，包括：

在浏览窗口内显示的页面中，针对该页面上的播放器窗口的底端边缘处生成位置标线；

监测所述位置标线在所述浏览窗口中的位置，当监测到所述位置标线位于该浏览窗口的顶端边界时，生成启动提示信息；

根据该启动提示信息生成播放缩略窗口并将该播放缩略窗口以悬浮方式显示于当前所述浏览窗口内的页面中；

获取所述播放器窗口中所播放视频的视频流数据以及当前视频的时间进度数据，在生成的所述播放缩略窗口中进行同步播放。

其中，优选地，还包括：

在监测到所述播放器窗口的所述位置标线出现在所述浏览窗口内的页面中时生成关闭提示信息，并根据该关闭提示信息将悬浮显示的所述缩略窗口关闭。

其中，优选地，根据接收到的拖动指示信息将所述播放缩略窗口在所述浏览窗口内进行移动，记录该播放缩略窗口移动后的位置，生成位置数据并进行存储，在所述播放缩略窗口再次显示时，读取存储的所述位置数据并以悬浮方式显示于所述浏览窗口内的页面中。

其中，优选地，所述播放缩略窗口以330*195像素为初始尺寸显示于所述浏览窗口内的页面中。

其中，优选地，根据接收到的尺寸调整指示信息对所述播放缩略窗口的显示尺寸进行调整，记录该播放缩略窗口调整后的尺寸，生成尺寸数据并进行存储，在所述播放缩略窗口再次显示时，读取存储的所述尺寸数据并以悬浮方式显示于所述浏览窗口内的页面中。

为了解决上述技术问题，本申请还公开了一种显示悬浮式播放窗口的系统，与浏览器相耦接，其特征在于，该系统包括：标记单元、监测单元、显示单元以及播放单元，其中，

所述标记单元，用于在浏览窗口内显示的页面中，针对该页面上的播放器窗口的底端边缘处生成位置标线；

所述监测单元，用于监测所述位置标线在所述浏览窗口中的位置，当监测到所述位置标线位于该浏览窗口的顶端边界时，生成启动提示信息；

所述显示单元，用于根据该启动提示信息生成播放缩略窗口并将该播放缩略窗口以悬浮方式显示于当前所述浏览窗口内的页面中；

所述播放单元，用于获取所述播放器窗口中所播放视频的视频流数据以及当前视频的时间进度数据，在生成的所述播放缩略窗口中进行同步播放。

其中，优选地，所述监测单元，还用于：在监测到所述播放器窗口的所述位置标线出现在所述浏览窗口内的页面中时生成关闭提示信息；

所述显示单元，还用于：根据所述关闭提示信息将悬浮显示的所述缩略窗口关闭。

其中，优选地，所述显示单元，进一步用于根据接收到的拖动指示信息将所述播放缩略窗口在所述浏览窗口内进行移动，记录该播放缩略窗口移动后的位置，生成位置数据并进行存储，在所述播放缩略窗口再次显示时，读取存储的所述位置数据并以悬浮方式显示于所述浏览窗口内的页面中。

其中，优选地，所述显示单元，进一步还用于：根据接收到的尺寸调整指示信息对所述播放缩略窗口的显示尺寸进行调整，记录该播放缩略窗口调整后的尺寸，生成尺寸数据并进行存储，在所述播放缩略窗口再次显示时，读取存储的所述尺寸数据并以悬浮方式显示于所述浏览窗口内的页面中。

与现有技术相比，本申请所述的一种显示悬浮式播放窗口的方法和系统，达到了如下效果：

1）本申请通过在页面上的播放器窗口的底端边缘处生成位置标线，并对位置标线进行实时监测，若位置标线的位于浏览窗口的顶端边界，则表示播放器窗口已经滚动到了浏览窗口的显示范围之外，便立即在当前的浏览窗口中显示悬浮式播放窗口，从而可以使用户继续观看当前播放的视频，有效解决了由于页面中的视频播放窗口固定嵌入页面中，跟随页面一同滚动至浏览器窗口的显示范围以外便无法观看的问题。

2）本申请中的悬浮式播放窗口的可以在页面中随意拖动，其显示尺寸也可以根据用户喜好进行调整，并且该悬浮式播放窗口上设置有与播放相关的控制键，用户可以随时控制视频的播放，因而可以给予用户良好的浏览体验。

3）本申请中的悬浮式播放窗口可以应用与不同的浏览器以及不同的终端中，实用性强。

当然，实施本申请的任一产品必不一定需要同时达到以上所述的所有技术效果。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是本申请实施例一所述的显示悬浮式播放窗口的方法的流程框图。

图2是本申请实施例二所述的显示悬浮式播放窗口的方法的流程框图。

图3是本申请实施例三中视频播放页面上的播放器窗口的示意图。

图4是本申请实施例三中悬浮式播放窗口的示意图。

图5是本申请实施例四所述的显示悬浮式播放窗口的系统的结构框图。

具体实施方式

如在说明书及权利要求当中使用了某些词汇来指称特定组件。本领域技术人员应可理解，硬件制造商可能会用不同名词来称呼同一个组件。本说明书及权利要求并不以名称的差异来作为区分组件的方式，而是以组件在功能上的差异来作为区分的准则。如在通篇说明书及权利要求当中所提及的“包含”为一开放式用语，故应解释成“包含但不限定于”。“大致”是指在可接收的误差范围内，本领域技术人员能够在一定误差范围内解决所述技术问题，基本达到所述技术效果。此外，“耦接”一词在此包含任何直接及间接的电性耦接手段。因此，若文中描述一第一装置耦接于一第二装置，则代表所述第一装置可直接电性耦接于所述第二装置，或通过其他装置或耦接手段间接地电性耦接至所述第二装置。说明书后续描述为实施本申请的较佳实施方式，然所述描述乃以说明本申请的一般原则为目的，并非用以限定本申请的范围。本申请的保护范围当视所附权利要求所界定者为准。

实施例一

如图1所示，为本申请实施例一所述的一种显示悬浮式播放窗口的方法，该方法包括：

步骤101，在浏览窗口内显示的页面中，针对该页面上的播放器窗口的底端边缘处生成位置标线。

浏览窗口可以是终端中用于显示网站页面的载体，其可以是终端中运行的浏览器、APP（Application，应用程序）等，其中，终端包括但不限于：计算机终端和/或移动终端（包括：平板电脑，手机等移动设备）。这里需要指出的是，对于计算机终端，浏览窗口通常就是浏览器的显示窗口；对于移动终端，浏览窗口除了可以是运行在移动终端的浏览器显示窗口，也可以是运行在移动终端的APP窗口（此时的APP窗口的显示范围就是移动终端屏幕的显示范围，即在此情况下，浏览窗口就是移动终端的屏幕）。

在视频播放页面中，并非整个页面对视频进行播放，而是视频在设置于该页面内的播放器窗口中进行播放，在步骤101中可以在播放器窗口的底端边缘设置位置标线，该位置标线与播放器窗口的底端边缘重合，由于播放器窗口的尺寸在页面中通常不会发生变化，即播放器窗口的尺寸不变，而且，播放器窗口嵌入设置在视频播放页面中，所以生成的位置标线具有很强的标定性。本实施例中，位置标线可记录于HTML（HyperText Mark-up Language，超文本标记语言）文件、浏览器信息文件或者具有视频播放功能的应用程序源文件中，生成的位置标线并不会直接显示于视频播放页面中，位置标线设置的方式如：页面高度坐标方式、页面标签等方式，对于上述设置该位置标线的方式并不构成对本申请的限定。

步骤102，监测所述位置标线在所述浏览窗口中的位置，当监测到所述位置标线位于该浏览窗口的顶端边界时，生成启动提示信息。

浏览窗口的尺寸通常小于视频播放页面的尺寸，即在通过浏览窗口对视频播放页面进行浏览时，显示在浏览窗口中的页面只是整个视频播放页面的一部分，在视频播放页面中，除了播放器窗口外，还有其他内容（如：评论内容），用户针对视频播放页面进行滚动便可以浏览到该页面中的其他内容，但是，播放器窗口也将跟随视频播放页面一同滚动，在滚动幅度较大时，播放器窗口便消失于当前浏览窗口的显示范围，进而导致用户不能继续观看，故在步骤102中需要实时监测播放器窗口的位置标线，当位置标线与浏览窗口的顶端边界重合时，那么，此时位置标线以上的页面（也包括播放器窗口）都滚动至当前的浏览窗口之外。这种状态便符合本申请中悬浮式播放窗口的启动条件。所以，在步骤102中将生成用于启动悬浮式播放窗口的启动提示信息。

本实施例中，可以由运行于终端中的监视线程生成该启动提示信息。

步骤103，根据该启动提示信息生成播放缩略窗口并将该播放缩略窗口以悬浮方式显示于当前所述浏览窗口内的页面中。

生成的播放缩略窗口的尺寸大小至少为330*195px（Pixel，像素），该播放缩略窗口位于浏览窗口的最表层，即该播放缩略窗口悬浮在视频播放页面的其他内容中。在本实施例中，该播放缩略窗口还可以根据用户的操作指示（如：点击、拖拽等）进行移动。

步骤104，获取所述播放器窗口中所播放视频的视频流数据以及当前视频的时间进度数据，在生成的所述播放缩略窗口中进行同步播放显示。

播放器窗口所在的终端从相应的视频服务器中获取视频流数据进行播放，所以为了播放内容的统一，在播放缩略窗口生成后，也会获取同一视频流数据并在该播放缩略窗口中播放。用户在播放器窗口中可能已经观看了一定时间，那么，在播放缩略窗口中所播放的视频在时间上也与播放器窗口中的播放进度保持一致，所述在步骤104中，获取当前视频的时间进度数据，便可以实现与播放器窗口进行同步播放显示。

实施例二

如图2所示，为本申请实施例二所述的一种显示悬浮式播放窗口的方法，该方法包括：

步骤201，在浏览器的浏览窗口内显示的页面中，针对该浏览器所显示的页面上的播放器窗口的底端边缘处生成位置标线。

本实施例中并不限定于计算机终端中的浏览器窗口，还可以是移动终端的视频应用程序。

步骤202，监测所述位置标线在所述浏览窗口中的位置，当监测到所述位置标线位于该浏览器显示窗口的顶端边界时，生成启动提示信息。

对于步骤202，其浏览窗口的顶端边界除了可以是显示页面的浏览器的顶端边界，也可以是移动终端的屏幕的边界。

步骤203，根据该启动提示信息生成播放缩略窗口并将该播放缩略窗口以悬浮方式显示于当前所述浏览窗口内的页面中。

在步骤203中，该播放缩略窗口可以根据用户的拖动动作进行移动，即根据接收到的拖动指示信息将所述播放缩略窗口在所述浏览窗口内进行移动，记录该播放缩略窗口移动后的位置，生成位置数据并进行存储，在所述播放缩略窗口再次显示时。

步骤204，获取所述播放器窗口中所播放视频的视频流数据以及当前视频的时间进度数据，在生成的所述播放缩略窗口中进行同步播放显示。

需要说明的是，在首次显示时，播放缩略窗口以330*195像素为初始尺寸显示于所述浏览窗口内的页面中。

用户可以对播放缩略窗口的尺寸进行调整，即根据接收到的尺寸调整指示信息对所述播放缩略窗口的显示尺寸进行调整，记录该播放缩略窗口调整后的尺寸，生成尺寸数据并进行存储。

步骤205，在监测到所述播放器窗口的所述位置标线出现在所述浏览窗口内的页面中时生成关闭提示信息，并根据该关闭提示信息将悬浮显示的所述播放缩略窗口关闭。

用户滚动页面使播放器窗口再次显示与浏览窗口中时，播放缩略窗口关闭，当然，在本实施例中，在所述播放缩略窗口再次显示时，读取存储的所述位置数据以及尺寸数据，再以悬浮方式显示于所述浏览窗口内的页面中。

实施例三

下面结合图3和4，对所述显示悬浮式播放窗口的方法的具体应用进行详细说明：

步骤一，用户通过在计算机终端的浏览器访问视频网站观看视频，在浏览器的显示窗口内显示当前视频的播放页面，浏览器针对该页面上的播放器窗口的底端边缘处生成位置标线L1。

如图1所示，当前页面中的播放器窗口的底端边缘位于图1中L1的位置处，如果页面滚动并超过该位置（L1）时，则该播放器窗口将完全消失于浏览器的浏览窗口范围。浏览器需要实时地监控该位置（L1），从而生成位置标线L1。

需要说明的是，位置标线L1不会显示在当前的播放页面中，只是以页面高度坐标值的方式写入浏览器的HTML文件中。

步骤二，用户滚动当前的播放页面，浏览该页面下方的评论区域，播放器窗口跟随页面一同滚动，浏览器中的监测线程实时监测该位置标线L1，监测所述位置标线在当前浏览器的显示窗口中的位置，当监测到所述位置标线L1位于该浏览器显示窗口的顶端边界时，生成启动提示信息。

步骤三，浏览器根据该启动提示信息生成播放缩略窗口S1，并如图4所示，将该播放缩略窗口S1以悬浮方式显示于当前浏览器窗口所显示的页面上，再获取播放器窗口中所播放视频的视频流数据以及当前视频的播放进度，在生成的悬浮式的播放缩略窗口S1中进行同步播放显示。

播放缩略窗口S1中播放显示的内容与播放器窗口中的内容一致，并且播放进度也一致，所以播放缩略窗口S1保证了用户即使在观看评论区域时，也可以继续观看视频内容，从而不会因为用户进行评论等操作时错过视频内容。

播放缩略窗口S1在页面中的初始位置是随机选取的，但通常情况下显示在页面的中间位置，悬浮显示后，播放缩略窗口S1的位置可以根据用户的拖拽动作任意移动，在一种方式下，用户的鼠标指针移动至该播放缩略窗口S1的范围中时，该播放缩略窗口S1中不再显示视频内容，而是如图4所示，显示文字提示信息，以提示用户该播放缩略窗口S1可进行拖动，从而增加了用户的浏览体验。

在用户对播放缩略窗口S1拖动后，浏览器将记录播放缩略窗口S1新的位置，浏览器以页面中的位置坐标值的方式进行记录，同样可以写入至相应的HTML文件中。播放缩略窗口S1将在被记录的位置上显示，即使关闭浏览器，用户再使用浏览器观看视频时，该播放缩略窗口S1仍会在被记录的位置上显示。

此外，播放缩略窗口S1的尺寸在初始显示时为标定尺寸，即330*195px，用户可以对该播放缩略窗口S1进行尺寸调整，同样，调整后的尺寸也将被浏览器进行记录，即使再次生成该播放缩略窗口S1，也将根据调整后的尺寸进行显示。

步骤四，在监测到播放器窗口上的位置标线L1再次出现在浏览器显示窗口内时，生成关闭提示信息并根据该关闭提示信息将悬浮显示的所述缩略窗口关闭。

在本实施例中，播放缩略窗口S1上具有与播放器窗口上同样的控制键，用户可以直接在播放缩略窗口S1中对视频的播放进行控制操作。

实施例四

如图5所示，为本申请实施例四所述的一种显示悬浮式播放窗口的系统，与浏览器相耦接，该系统包括：标记单元501、监测单元502、显示单元503以及播放单元504，其中，

所述标记单元501，与浏览器和监测单元502相耦接，用于在浏览窗口内显示的页面中，针对该页面上的播放器窗口的底端边缘处生成位置标线。

所述监测单元502，与标记单元501和显示单元503相耦接，用于监测标记单元501生成的所述位置标线在所述浏览窗口中的位置，当监测到所述位置标线位于该浏览窗口的顶端边界时，生成启动提示信息发送至显示单元503。

所述显示单元503，与监测单元502和播放单元504相耦接，用于根据该启动提示信息生成播放缩略窗口并将该播放缩略窗口以悬浮方式显示于当前所述浏览窗口内的页面中。

所述播放单元504，用于获取所述播放器窗口中所播放视频的视频流数据以及当前视频的时间进度数据，在生成的所述播放缩略窗口中进行同步播放。

本实施例中，所述监测单元502，具体还用于在监测到所述播放器窗口的所述位置标线出现在所述浏览窗口内的页面中时生成关闭提示信息。那么，显示单元503，将根据所述关闭提示信息将悬浮显示的所述缩略窗口关闭。

生成的播放缩略窗口的尺寸大小至少为330*195px（Pixel，像素），即播放缩略窗口以330*195像素为初始尺寸显示于所述浏览窗口内的页面中，播放缩略窗口位于浏览窗口的最表层，即该播放缩略窗口悬浮在视频播放页面的其他内容中。在本实施例中，该播放缩略窗口还可以根据用户的操作指示（如：点击、拖拽等）进行移动。

具体而言，用户对播放缩略窗口进行拖动时，显示单元503将根据接收到的拖动指示信息将所述播放缩略窗口在所述浏览窗口内进行移动，记录该播放缩略窗口移动后的位置，生成位置数据并进行存储，在所述播放缩略窗口再次显示时，读取存储的所述位置数据并以悬浮方式显示于所述浏览窗口内的页面中。

用户对播放缩略窗口的尺寸进行调整时，显示单元503将根据接收到的尺寸调整指示信息对所述播放缩略窗口的显示尺寸进行调整，记录该播放缩略窗口调整后的尺寸，生成尺寸数据并进行存储，在所述播放缩略窗口再次显示时，读取存储的所述尺寸数据并以悬浮方式显示于所述浏览窗口内的页面中。

由于方法部分已经对本申请实施例进行了详细描述，这里对实施例中涉及的系统与方法对应部分的展开描述省略，不再赘述。对于系统中具体内容的描述可参考方法实施例的内容，这里不再具体限定。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者系统中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质（包括但不限于磁盘存储器、CD-ROM、光学存储器等）上实施的计算机程序产品的形式。

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims

1.一种显示悬浮式播放窗口的方法，其特征在于，包括：

2.如权利要求1所述的显示悬浮式播放窗口的方法，其特征在于，还包括：

3.如权利要求1所述的显示悬浮式播放窗口的方法，其特征在于，根据接收到的拖动指示信息将所述播放缩略窗口在所述浏览窗口内进行移动，记录该播放缩略窗口移动后的位置，生成位置数据并进行存储，在所述播放缩略窗口再次显示时，读取存储的所述位置数据并以悬浮方式显示于所述浏览窗口内的页面中。

4.如权利要求1中所述的显示悬浮式播放窗口的方法，其特征在于，所述播放缩略窗口以330*195像素为初始尺寸显示于所述浏览窗口内的页面中。

5.如权利要求4所述的显示悬浮式播放窗口的方法，其特征在于，根据接收到的尺寸调整指示信息对所述播放缩略窗口的显示尺寸进行调整，记录该播放缩略窗口调整后的尺寸，生成尺寸数据并进行存储，在所述播放缩略窗口再次显示时，读取存储的所述尺寸数据并以悬浮方式显示于所述浏览窗口内的页面中。

6.一种显示悬浮式播放窗口的系统，与浏览器相耦接，其特征在于，该系统包括：标记单元、监测单元、显示单元以及播放单元，其中，

7.如权利要求6所述的显示悬浮式播放窗口的系统，其特征在于，

所述监测单元，还用于：在监测到所述播放器窗口的所述位置标线出现在所述浏览窗口内的页面中时生成关闭提示信息；

8.如权利要求6所述的显示悬浮式播放窗口的系统，其特征在于，所述显示单元，进一步用于根据接收到的拖动指示信息将所述播放缩略窗口在所述浏览窗口内进行移动，记录该播放缩略窗口移动后的位置，生成位置数据并进行存储，在所述播放缩略窗口再次显示时，读取存储的所述位置数据并以悬浮方式显示于所述浏览窗口内的页面中。

9.如权利要求6中所述的显示悬浮式播放窗口的系统，其特征在于，所述播放缩略窗口以330*195像素为初始尺寸显示于所述浏览窗口内的页面中。

10.如权利要求9所述的显示悬浮式播放窗口的系统，其特征在于，所述显示单元，进一步还用于：根据接收到的尺寸调整指示信息对所述播放缩略窗口的显示尺寸进行调整，记录该播放缩略窗口调整后的尺寸，生成尺寸数据并进行存储，在所述播放缩略窗口再次显示时，读取存储的所述尺寸数据并以悬浮方式显示于所述浏览窗口内的页面中。