CN104268250A

CN104268250A - 一种网页中视频元素的播放方法和装置

Info

Publication number: CN104268250A
Application number: CN201410523180.1A
Authority: CN
Inventors: 高庆光
Original assignee: Beijing Qihoo Technology Co Ltd; Qizhi Software Beijing Co Ltd
Current assignee: Beijing Qihoo Technology Co Ltd; Qizhi Software Beijing Co Ltd
Priority date: 2014-09-30
Filing date: 2014-09-30
Publication date: 2015-01-07

Abstract

本发明公开了一种网页中视频元素的播放方法和装置,涉及浏览器技术领域。所述方法包括：从网页服务器侧获取到带有视频元素的网页文档，并加载显示为当前网页，其中所述网页文档中带有针对所述视频元素的显示控制脚本；所述显示控制脚本判断出所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示；通过所述显示控制脚本将所述视频元素在当前浏览器显示视窗中的当前网页中进行独立显示。本发明取得了可以在网页文档中视频元素的初始位置移出显示视窗之后，使视频元素出现在显示视窗中展示，在用户浏览器网页中其他信息时可以同时观看视频元素中的播放内容的有益效果。

Description

一种网页中视频元素的播放方法和装置

技术领域

本发明涉及浏览器技术领域，具体涉及一种网页中视频元素的播放方法和装置。

背景技术

浏览器是指可以显示网页服务器或者文件系统的HTML(超文本标记语言,HyperText Mark-up Language))文件内容，并让用户与这些文件交互的一种软件。网页浏览器主要通过HTTP协议与网页服务器交互并获取网页，这些网页由URL(统一资源定位符,Uniform Resource Locator)指定，文件格式通常为HTML。一个网页中可以包括多个文档，每个文档都是分别从服务器获取的。HTTP内容类型和URL协议规范允许网页设计者在网页中嵌入图像、视频等。

而当前的网页服务器中存在一种带有视频内容的网页，其视频内容一般是在页面的某个位置进行播放，然后视频下方很长的一部分是其他内容，比如相关广告图片，相关推荐视频的链接，当前视频评论等内容，其页面整体高度远远大于浏览器显示视窗的高度。那么，当用户通过鼠标滚轮或者滚动条滑动页面去浏览其他位置的信息(比如视频评论)时，页面中播放的视频可能移出显示视窗，以至用户则无法观看到视频内容。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的网页中视频元素的播放装置和相应的网页中视频元素的播放方法。

依据本发明的一个方面，提供了网页中视频元素的播放方法,包括：

从网页服务器侧获取到带有视频元素的网页文档，并加载显示为当前网页，其中所述网页文档中带有针对所述视频元素的显示控制脚本；

所述显示控制脚本判断出所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示；

通过所述显示控制脚本将所述视频元素在当前浏览器显示视窗中的当前网页中进行独立显示。

依据本发明的另外一个方面,还公开了一种网页中视频元素的播放装置，包括：

脚本加载模块，适于从网页服务器侧获取到带有视频元素的网页文档，并加载显示为当前网页，其中所述网页文档中带有针对所述视频元素的显示控制脚本；

显示位置判断模块，适于所述显示控制脚本判断出所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示；

显示位置更改模块，适于通过所述显示控制脚本将所述视频元素在当前浏览器显示视窗中的当前网页中进行独立显示。

根据本发明的一种网页中视频元素的播放方法和装置，可以对网页服务器侧提供的网页文档加入显示控制脚本，该显示控制脚本判断出所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示后，通过所述显示控制脚本将所述视频元素在当前浏览器显示视窗中的当前网页中进行独立显示，由此解决了用户滑动页面时，当视频元素移出显示视窗之后，用户浏览网页中的信息时无法同时观看视频元素中的播放内容的问题，时取得了可以在网页文档中视频元素的初始位置移出显示视窗之后，使视频元素出现在显示视窗中展示，在用户浏览器网页中其他信息(比如视频评论、推荐视频等)时可以同时观看视频元素中的播放内容的有益效果。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了根据本发明一个实施例的一种网页中视频元素的播放方法的流程示意图；

图2示出了根据本发明一个实施例的一种网页中视频元素的播放方法的流程示意图；

图3示出了根据本发明一个实施例的一种网页中视频元素的播放方法的流程示意图；

图3A示出了根据本发明一个实施例的一种的视频元素初始的加载状态示意图；

图3B示出了根据本发明一个实施例的一种视频元素部分未显示时触发小窗口播放视频元素的示意图；

图4示出了根据本发明优选的一个实施例的一种网页中视频元素的播放方法的流程示意图；

图4A示出了根据本发明一个实施例的在图3A的基础上的一种视频元素顶部开始进入部分显示状态时触发小窗口播放视频元素的示意图；

图5示出了根据本发明优选的一个实施例的一种网页中视频元素的播放方法的流程示意图；

图5A示出了根据本发明一个实施例的在图3A的基础上的一种视频元素顶部开始进入全部未显示状态时触发小窗口播放视频元素的示意图；

图6示出了根据本发明一个实施例的一种网页中视频元素的播放装置的结构示意图；

图7示出了根据本发明一个实施例的一种网页中视频元素的播放装置的结构示意图；

图8示出了根据本发明一个实施例的一种网页中视频元素的播放装置的结构示意图；

图9示出了根据本发明优选的一个实施例的一种网页中视频元素的播放装置的结构示意图；

图10示出了根据本发明优选的一个实施例的一种网页中视频元素的播放装置的结构示意图；以及

图11示出了根据本发明优选的一个实施例的一种网页中视频元素的播放系统的结构示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

本发明的核心思想之一是：对于网页服务器提供的带有视频元素的网页文档中，加入显示控制脚本；那么在浏览器加载上述网页文档时加载所述显示控制，该显示控制脚本判断网页中的视频元素是否在当前浏览器显示视窗中部分显示和/或全部地未被显示，如果在当前浏览器显示视窗中部分显示和/或全部地未被显示，通过所述显示控制脚本将所述视频元素在当前浏览器显示视窗中的当前网页中进行独立显示。以使网页中的视频元素能以网页的视频元素的身份在显示视窗中一直播放，使用户在滚动网页以浏览非视频元素的信息时，也可以方便的看到视频元素的播放内容。

实施例一

参照图1，其示出了本发明的一种网页中视频元素的播放方法，具体可以包括：

步骤110，从网页服务器侧获取到带有视频元素的网页文档，并加载显示为当前网页，其中所述网页文档中带有针对所述视频元素的显示控制脚本；

在本发明实施例中,对于服务器侧的提供视频元素(比如用于播放电视剧、电影等内容的视频元素)的网页中，加入针对所述视频元素的显示控制脚本，该显示控制脚本具有控制浏览器进行后续执行过程的逻辑。

那么，当浏览器从网页服务器获取到带有视频元素的网页文档时，该网页文档中就包括针对所述视频元素的显示控制脚本。浏览器解析和加载所述网页文档，则会加载所述显示控制脚本，该显示控制脚本即进入运行过程。

在实际应用中，上述网页文档为HTML(Hyper Text Mark-up Language，超文本标记语言)文档。

步骤120，所述显示控制脚本判断出所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示；

在实际应用中，所述显示控制脚本加载之后，会监控浏览器上的onsroll事件(滚动事件)，该滚动事件可以由鼠标滚轮触发，也可以通过拖动滚动条的方式触发。该滚动事件的触发，意味着用户在拖动网页上下移动。

在用户拖动网页以移动时，由显示控制脚本加载的逻辑模块，判断在网页中展示的视频元素是否在当前浏览器显示窗中部分的显示或者全部的未被显示。如果判断出所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示则进入步骤130。

步骤130，通过所述显示控制脚本将所述视频元素在当前浏览器显示视窗中的当前网页中进行独立显示。

在本发明实施例中，对于网页加载完成后，在网页初始位置进行显示的视频元素，可以通过所述显示控制脚本的控制逻辑，将该初始位置的视频元素在当前显示视窗的网页中独立显示。

所述独立显示可以理解为，将视频元素的显示位置从初始位置剥离，使其可以在当前浏览器的显示视窗中展示的网页中的某个位置进行显示。当然，从整体层面上，可以理解为将视频元素的视频内容一直保留在浏览器显示视窗中进行播放，不用随着用户对网页的操作而隐藏、或者显示不全。

当然本发明中，所述独立显示，一般是将视频元素的播放界面整体缩小后，在浏览器显示视窗中的当前网页中进行展示，避免由于视频元素初始的播放区域太大，在其进行独立显示时，遮蔽用户对网页其他信息(比如视频评论)的浏览。

优选地，所述通过所述显示控制脚本将所述视频元素在当前浏览器显示视窗中的当前网页中进行独立显示包括:

子步骤131，所述显示控制脚本修改所述视频元素的显示位置和显示层索引，使所述视频元素在当前浏览器显示视窗中的当前网页中被置顶显示。

在判断出网页中的视频元素在在当前浏览器显示视窗中部分显示和/或全部地未被显示后，则可以修改所述视频元素在网页中显示的位置，并修改视频元素的显示层索引(比如z-index属性)，使视频元素可一直在页面视窗中展示的网页中播放。

优选地，在通过所述显示控制脚本将所述视频元素在当前浏览器显示视窗中的当前网页中进行独立显示之后，还包括：

子步骤132，获取当前视频元素中播放的视频的关联视频信息；当侦听到鼠标悬停至所述视频元素显示位置时，在视频元素显示供所述关联视频信息并提供点击接口。

即将当前视频元素关联的视频信息，比如基于关联视频的网址、名称构建点击接口并展示给用户。

子步骤133，当侦听到鼠标悬停至所述视频元素显示位置时，加载并展示针对当前视频内容的功能接口；所述功能接口包括下载接口、和/或分享接口、和/或收藏接口、和/或调用第三方视频播放软件播放所述视频内容接口中至少一个。

本发明可提供多个实用的功能，打通与其他软件(比如调用第三方视频播放软件播放所述视频内容接口)、组件(比如下载接口、收藏接口)、网站的接口(比如分享接口，如分享给新浪微博)，给用户提供更丰富的体验。

子步骤134，当侦听到针对视频元素显示位置的尺寸变更操作时，根据拖拽动作修改视频元素CSS文件中的显示尺寸。

本发明的独立显示的视频元素可根据用户对视频元素的显示框的拖拽改变显示尺寸。

优选地，在所述显示控制脚本判断出所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示之前，还包括：

子步骤135，判断当前网页中是否存在多个视频元素；如果存在，则提示用户选择进行小窗显示的视频元素并提供选择接口；对于用户未选择的视频元素，停止判断出所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示。

当一个网页中存在多个视频时，本发明可提供给用户选择项，使其可以选择对哪些视频元素进行独立播放，哪些不用独立播放。

子步骤136，当侦听到鼠标悬停至所述视频元素显示位置时，触发对所述视频元素中播放内容的暂停操作；当鼠标移出所述视频元素显示位置后，再继续播放所述视频内容。

本发明实施例可通过鼠标的悬停与否控制视频的播放/暂停，方便用户操作。

子步骤137，当在所述视频元素的显示位置侦听到拖拽动作后，将所述视频元素的显示位置的位置随着拖拽动作移动。

本发明实施例独立显示的视频元素还可根据用户的拖拽移动显示区域，方便用户操作。

优选地，所述通过所述显示控制脚本将所述视频元素在当前浏览器显示视窗中的当前网页中进行独立显示之后，还包括：

子步骤138，根据用户触发的滚动条事件，判断所述显示视窗中是否全部显示所述视频元素的初始显示位置；适于如果是，则将当前显示位置的视频元素还原至初始显示位置。

在本发明实施例中，为了提高用户体验，当用户向上滚动网页时，如果滚动到视频元素初始出现的显示位置，那么进行小窗播放的视频元素则回到其初始的显示位置，其小窗播放模式则取消。

实施例二

参照图2，其示出了本发明的一种网页中视频元素的播放方法，具体可以包括：

步骤210，从网页服务器侧获取到带有视频元素的网页文档，并加载显示为当前网页，其中所述网页文档中带有针对所述视频元素的显示控制脚本；

步骤220，所述显示控制脚本判断出所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示；

在用户拖动网页以移动时，由显示控制脚本加载的逻辑模块，判断在网页中展示的视频元素是否在当前浏览器显示窗中部分的显示或者全部的未被显示。如果判断出所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示则进入步骤230。

优选地，所述显示控制脚本判断出所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示,包括:

子步骤222，根据视频元素的显示位置、显示视窗的显示位置、滚动条的显示位置、页面整体的大小属性，判断所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示。

在实际应用中，浏览器对页面进行展示时至少有4个属性需要处理：浏览器显示视窗的展示位置比如宽(width)、高(height)；网页文档的大小属性比如其展示时其整体的宽(width)、高(height)；文档中各元素在页面中的展示位置，比如对于视频元素有：宽(width)、高(height)、距离页面顶部的距离(top)、距离页面左侧的距离(left)等)；滚动条的展示位置，比如距离显示视窗顶部的距离(top)，距离显示视窗左侧的距离(left)等。

然后，在拖动过程中即可根据上述位置属性计算所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示。

步骤230，所述显示控制脚本修改所述视频元素的显示位置和显示层索引，使所述视频元素在当前浏览器显示视窗中的当前网页中被置顶显示。

优选地，所述显示控制脚本修改所述视频元素的显示位置和显示层索引，使所述视频元素在当前浏览器显示视窗中的当前网页中被置顶显示，包括：

子步骤232，将所述视频元素的显示位置中显示尺寸进行缩放，将所述显示位置的中定位参数修改为在当前浏览器显示视窗中的当前网页中显示。

对于前述加载后的网页文档，将初始的网页文档中的视频元素，将视频元素的初始显示尺寸进行缩放，比如视频元素初始宽为600px(px，像素)，高为400px，那么可将其宽缩放为150Px，高缩放为100px。

上述缩放可按比例缩放，比如缩放为原来的1/4大小，具体缩放比例可以根据实际页面显示大小设置，本发明不对其加以限制。

同时，对于视频元素在网页中初始所在的位置，将其位置参数进行修改，比如初始情况下，视频元素的距离网页顶部的距离为200px，距离网页左侧的距离为100px，那么可以将这个定位参数修改为距离显示视窗底部距离为0，距离网页右侧距离为0。具体的定位参数的修改可根据实际情况选择，只要使视频元素可以在显示视窗中显示即可。

当然，还会修改视频元素当前的z-index的值，使其处于页面的最顶层，不至于被其他元素遮挡。实际上，z-index的值越大，代表其层级越高，本发明中只需要保证z-index的值是HTML中所有元素涉及z-index值中最大的即可

优选的，所述显示控制脚本修改所述视频元素的显示位置和显示层索引，使所述视频元素在当前浏览器显示视窗中的当前网页中被置顶显示包括：

子步骤2321，在网页HTML的CSS文件中，将所述视频元素的CSS样式的显示位置修改为在当前浏览器显示视窗中的当前网页中显示，将所述CSS样式的显示层索引修改为顶层的索引参数。

浏览器是通过对HTML文档(HTML，超文本标记语言，HypertextMarkup Language)进行解析，然后进行渲染的，HTML文档一般是几个部分：

其一，包括可以解析为DOM树(DOM，文件对象模型Document Object)的内容。

DOM是一种与平台和语言无关的接口，它允许程序和脚本动态访问和修改文档的内容、结构和类型。它定义了一系列的对象和方法对DOM树的节点进行各种随机操作：

●Document对象：作为树的最高节点，Document对象是对整个文档进行操作的入口。

●Element和Attr对象：这些节点对象都是网页文档某一部分的映射，节点的定级层次恰好反映了文档的结构。

●Text对象：作为Element和Attr对象的子节点，Text对象表达了元素或属性的文本内容。Text节点不再包含任何子节点。

DOM树中的所有节点都是从节点对象继承而来的，节点对象定义了一些最基本的属性和方法，利用这些方法可以实现对树的遍历，同时，根据属性还可以得知节点的名称、取值并判断其类型。

其二，为控制每个DOM的节点的呈现方式(比如位置、大小)的CSS样式(CSS，级联样式表，Cascading Style Sheet)。

实际上，本发明对于DOM树本身没有进行任何改变，只是对于视频元素的CSS样式进行了更改，即将针对视频元素的CSS样式中的参数，比如宽、高、定位参数(如距离页面顶部的距离、距离页面左侧的距离)、视频元素的显示层级z-index。

优选地，将所述视频元素的CSS样式的显示位置修改为在当前浏览器显示视窗中的当前网页中显示包括：

子步骤234，针对所述视频元素的CSS样式，将所述CSS样式的显示位置中的定位参数相对滚动条位置进行修改。

在实际应用中，可将前述视频元素的CSS样式定位参数(如距离页面顶部的距离、距离页面左侧的距离)修改为距离滚动条位置指定距离，比如修改视频元素顶部距滚动条顶部距离为m；当滚动条顶部到滚动槽底部的距离值h小于m时，设视频元素的高度j时，m值修改为h-j。当然，还可以将所述定位参数相对滚动条进行其他设置，本发明不对其加以限制。

子步骤236，针对所述视频元素的CSS样式，将所述CSS样式的显示位置中的定位参数相对显示视窗位置进行修改。

在实际应用中，可将前述视频元素的CSS样式定位参数(如距离页面顶部的距离、距离页面左侧的距离)相对显示视窗位置进行修改。比如将视频元素固定在右下角显示，即修改CSS样式的定位参数为到显示视窗右侧距离为0，到底部距离为0；或者固定在左下角显示等等。当然，具体显示位置本发明不对其加以限制。

在上述步骤中，视频元素只是从网页文档的初始位置移动至另外一个位置进行显示，其DIV结构并没有改变，其内部的除了显示尺寸和显示位置参数、显示层索引参数改变了，其他属性及参数可以不用改变。即相当于将初始位置的播放区域移动至了显示视窗中进行显示，移动后的播放区域本身除了大小与初始的不同，其他的基本一样。

进一步的，本发明可以对移动后的视频元素的播放区域进行改变。即优选的，所述显示控制脚本修改所述视频元素的显示位置和显示层索引，使所述视频元素在当前浏览器显示视窗中的当前网页中被置顶显示包括：

子步骤238，将所述视频元素中的控制按钮隐藏。

在实际应用中，本发明可将除了播放视频内容的界面进行显示以外，视频元素中其他界面均可进行隐藏，比如把控制按钮隐藏，播放区域的边界隐藏，使用户只用看到播放视频内容的界面而不受视频元素其他按钮界面的影响。比如将控制按钮的display或者visibilitys属性值修改为不可见。

在子步骤238之后，还包括：

子步骤2381，当侦听到鼠标悬停至所述视频元素显示位置时，显示所述视频元素中的控制按钮。

即在播放控制按钮的CSS样式中将其是否显示的属性从隐藏修改为显示。比如将控制按钮的display或者visibilitys属性值修改为可见。

优选地，在所述显示控制脚本修改所述视频元素的显示位置和显示层索引，使所述视频元素在当前浏览器显示视窗中的当前网页中被置顶显示之后，还包括：

子步骤240，获取当前视频元素中播放的视频的关联视频信息；当侦听到鼠标悬停至所述视频元素显示位置时，在视频元素显示供所述关联视频信息并提供点击接口。

在实际应用中，可能一个带有视频元素的网页中，存在大量与视频相关联的视频信息，本发明可在显示脚本中加入子步骤240的逻辑，获取当前视频元素中播放的视频的关联视频信息；当侦听到鼠标悬停至所述视频元素显示位置时，在视频元素显示供所述关联视频信息并提供点击接口。

当在视频元素显示位置，监控到鼠标悬浮事件(onmouseover事件)时，在视频元素中显示所述关联视频信息并提供点击接口。在显示相关视频信息时，可在视频元素的播放视频内容的播放区域之外的其他位置显示。当然，也可以在视频元素中添加新的展示界面，用以显示关联视频信息并针对每个视频信息提供点击接口。

当用户点击针对某个视频Q的点击接口，则在视频元素的播放区域中播放该视频Q。

当侦测到用户没有点击动作，鼠标移开视频元素显示位置后，即侦测到移出视频元素显示位置的onmouseout事件后，则隐藏所述关联视频信息及其点击接口。

子步骤242，当侦听到鼠标悬停至所述视频元素显示位置时，加载并展示针对当前视频内容的功能接口；所述功能接口包括下载接口、和/或分享接口、和/或收藏接口、和/或调用第三方视频播放软件播放所述视频内容接口中至少一个。

在显示控制脚本中，还可以加入子步骤242的逻辑，在浏览器中加载执行上述逻辑的模块。即当在视频元素的显示位置侦听到鼠标悬停事件后，在视频元素中添加针对当前视频内容的功能接口，所述功能接口包括下载接口、和/或分享接口、和/或收藏接口、和/或调用第三方视频播放软件播放所述视频内容接口中至少一个。所述下载接口用于调用浏览器的下载组件下载当前播放的视频。所述分享接口用于将当前的视频分享到指定的网站，比如人人网，新浪微博等网站。所述调用第三方视频播放软件播放所述视频内容接口包括调用PPS播放器等播放软件，在该播放软件中播放视频。

子步骤244，当侦听到针对视频元素显示位置的尺寸变更操作时，根据拖拽动作修改视频元素CSS文件中的显示尺寸。

在本发明实施例中，在视频元素显示位置的边框处提供可变更视频元素尺寸的功能。当在视频元素的边框处侦听到鼠标焦点，则触发边框拉动箭头，当再侦听到鼠标按下+拖动的拖拽动作时，即再侦听到onmousedown+onmousemove事件时，则将视频元素的尺寸随着拖拽动作变大或者变小。在变更视频元素尺寸时，根据鼠标的拖动坐标，修改视频元素CSS文件中的显示尺寸，比如将视频元素的宽高随着鼠标的拖拽进行更改。当侦听到鼠标放开事件(onmouseup事件)时，则固定当前视频元素的显示尺寸。

子步骤246，当侦听到鼠标悬停至所述视频元素显示位置时，触发对所述视频元素中播放内容的暂停操作；当鼠标移出所述视频元素显示位置后，再继续播放所述视频内容。

在本发明实施例中，还可提供便捷的暂停和播放功能，即当在视频元素的显示位置侦听到鼠标悬停事件后，触发对所述视频元素中播放内容的暂停操作；当鼠标移出所述视频元素显示位置后，再继续播放所述视频内容。

在实际中，页面刚加载完成时的初始视频元素中，存在播放/暂停按钮，本发明则将需要点击播放/暂停按钮的情况，修改为用户鼠标滑动至视频元素的显示位置即可暂停视频，滑出所述显示位置，视频继续播放。

另外，当存在子步骤2381，子步骤240，子步骤242，子步骤246中多个功能时，则可将视频元素的显示区域根据上述功能的个数进行划分，每个区域接收到的鼠标悬停事件负责触发一个功能。

子步骤248，当在所述视频元素的显示位置侦听到拖拽动作后，将所述视频元素的显示位置的位置随着拖拽动作移动。

当在所述视频元素的显示位置侦听到onmousedown+onmousemove事件时，拖动视频元素的整体显示位置，不改变视频元素的显示尺寸。在本发明实施例中，一般是在视频元素的视频播放区域侦听到onmousedown+onmousemove事件时，视频的整体显示位置随着拖拽变化而变化。

优选地，将所述视频元素的显示位置的位置随着拖拽动作移动包括：

子步骤2481，在对应所述视频元素的CSS样式中，将视频元素的定位参数随着在网页视窗区域内拖拽的位置参数而改变。

即在实际应用中，可以根据鼠标的坐标修改视频元素的CSS样式中的定位参数，比如修改视频元素距离显示视窗顶部的距离和距离显示视窗左侧的距离，如此即可将视频元素随着鼠标的拖动而改变显示的位置。

子步骤250，判断当前网页中是否存在多个视频元素；如果存在，则提示用户选择进行小窗显示的视频元素并提供选择接口；对于用户未选择的视频元素，停止判断出所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示。

在本发明的显示脚本可以通过视频标签识别页面中的各个视频元素；所述视频标签比如<video>标签，比如<embed>标签中的type类型，如果其为视频类型即表明对应的元素为视频元素，或者判断该标签中的id＝“flash”、“media”等值，也可判断元素为视频元素；比如<object>中type类型，如果其为视频类型即表明对应的元素为视频元素，或者判断该标签中的id，id＝“flash”、“media”等值，也可判断元素为视频元素。

那么当存在多个视频元素时，提取视频元素的主题名称，然后生成弹出框，在弹出框中以所述主题名称生成选择项以供用户勾选，同时提示用户是否选择将某些视频元素进行小窗播放(可以理解为本发明实施例中的独立显示功能)功能。当用户勾选一个或者多个选项并确定后，显示控制脚本对于未选择的视频元素，则停止对其执行后续逻辑，对用户勾选的视频元素，则执行后续逻辑。

进一步的，所述显示控制脚本修改所述视频元素的显示位置和显示层索引，使所述视频元素在当前浏览器显示视窗中的当前网页中被置顶显示之后，还包括：

步骤260，根据用户触发的滚动条事件，判断所述显示视窗中是否全部显示所述视频元素的初始显示位置；如果是，则将当前显示位置的视频元素还原至初始显示位置。

优选地，将所述视频元素还原至初始显示位置包括：

子步骤2601，在网页HTML的CSS文件中，将所述视频元素的CSS样式的显示位置修改为在初始的显示位置，将所述CSS样式的显示层索引修改为初始的索引参数。

本步骤为与子步骤2321相反的步骤，即将小窗播放的视频元素的SS样式的显示位置还原至其初始的显示位置，即还原为网页刚加载完后视频元素的显示位置；将所述CSS样式的显示层索引修改为初始的索引参数，即还原为网页刚加载完后视频元素的显示层索引。

本发明与实施例一类似的步骤原理类似，在此不再详述。

本发明的一种网页中视频元素的播放方法可以对网页服务器侧提供的网页文档加入显示控制脚本，该显示控制脚本判断出所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示后，修改所述视频元素的显示位置和显示层索引，使所述视频元素在当前浏览器显示视窗中的当前网页中被置顶显示，由此解决了用户滑动页面时，当视频元素移出显示视窗之后，用户浏览网页中的信息时无法同时观看视频元素中的播放内容的问题，时取得了可以在网页文档中视频元素的初始位置移出显示视窗之后，使视频元素出现在显示视窗中展示，在用户浏览器网页中其他信息(比如视频评论、推荐视频等)时可以同时观看视频元素中的播放内容的有益效果。

实施例三

参照图3，其示出了本发明的一种网页中视频元素的播放方法，具体可以包括：

步骤310，从网页服务器侧获取到带有视频元素的网页文档，并加载显示为当前网页，其中所述网页文档中带有针对所述视频元素的显示控制脚本；

如图3A，为浏览器加载显示网页文档的示例；S312为浏览器显示视窗，S313为视频元素的显示窗口，S314为滚动条，S315为滚动槽，浏览器的其他部件在此省略。在本发明实施例中，图3A是网页文档加载完成后，用户还未被用户拖动时的初始状态示意图，即浏览器加载完网页文档，还未检测到任何onscroll事件。其中，S313所示窗口的当前的显示位置为视频元素的初始显示位置。

步骤320，根据网页整体大小、滚动条的显示位置以及网页当前浏览器显示视窗的显示位置，确定滚动条的滚动距离与网页的滚动距离之间的滚动比例；

在浏览器的渲染引擎渲染HTML文档时，渲染后的页面的高度一般都会大于显示视窗S312的高度，而滚动条的滚动比例会根据页面的高度变化。所述滚动比例为滚动条每滚动1px页面滚动的Npx。N≥1的整数。

那么本发明可根据页面的高度a，显示视窗的高度b，滚动条的长度f计算所述滚动比例g，其计算公式可为g＝a/(b-f)。即计算滚动在滚动槽中可滚动的长度与页面的高度之间的比例。

在本发明实施例中可以通过document.body.scrollHeight函数获取网页文档的高度，即a；可通过document.body.clientHeight函数获取显示视窗的高，即b，用GetScrollInfo函数获取滚动条的高，即c。

步骤330，获取所述视频元素显示位置中，在视频元素高度范围内的高度值到显示视窗顶部的距离阈值L；

在本发明实施例中，可以选择在视频元素的一部分被遮挡了，再以执行后续逻辑以小窗口的模式播放。即可以在视频元素的高q的范围内选择一个位置，计算什么时候开始进入小窗播放模式。

比如图3A中，选择在视频元素高的一半q/2处，即视频元素被遮挡了一半时即进入小窗模式，那么首先需要技术显示视窗顶部至视频元素q/2处的距离L。

在本发明实施例中，获取所述L的值有多种方法，比如通过getBoundingClientRect()方法获取视频元素左上角至显示视窗顶部的距离k,然后k+q/2＝L。

步骤340，根据所述滚动比例和距离阈值L确定滚动条需要滚动的第一阈值；

在获得L后，只需要计算滚动条的滚动的第一阈值。比如滚动比例为1：10，即滚动条滚动1px，页面滚动10px，L＝200px，那么L*1/10＝20px，也即滚动条需要滚动20px。

步骤350，判断滚动条滚动的距离C是否达到第一阈值；当滚动条滚动的距离C达到第一阈值时，则判断出所述视频元素部分显示和/或全部地未被显示。

如前述例子，当滚动条滚动了20px距离，即判断所述视频元素部分显示和/或全部地未被显示，达到需要进入小窗口播放模式的时刻，进入步骤360。如图3B所示，在此刻开始由步骤360进入小窗播放模式，即图3B中的小窗口S316中播放视频内容。只要用户在此刻一直往下滑动，小窗模式就一直存在。当判断视频元素还是全部的显示在显示视窗中时，则保持网页的初始展示状态。

在本发明实施例中可以通过onsroll事件刚触发时，获取滚动条的top属性p1(即距离页面顶部距离)，然后在滚动过程中实时获取所述top属性p2，由p2-p1即可得知滚动条滚动距离。

当然，如果是在页面初始加载后，用户第一次触发onsroll事件，可以直接以top属性值作为滚动条滚动距离。

如果滚动条没滚动到20px。则判断所述不需要进入小窗口播放模式，不进行步骤360。

步骤320-步骤350可以理解为实施例一中“根据视频元素的显示位置、显示视窗的显示位置、滚动条的显示位置、页面整体的大小属性，判断所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示”的具体实施方式。

步骤360，判断出所述视频元素部分显示和/或全部地未被显示，则所述显示控制脚本修改所述视频元素的显示位置和显示层索引，使所述视频元素在当前浏览器显示视窗中的当前网页中被置顶显示。

在步骤350中，当滚动条滚动的距离C达到第一阈值时，即判断出所述视频元素部分显示和/或全部地未被显示。

步骤370，根据用户触发的滚动条事件，判断所述显示视窗中是否全部显示所述视频元素的初始显示位置；如果是，则将当前显示位置的视频元素还原至初始显示位置。

优选地，获取所述视频元素显示位置中，在视频元素高度范围内的高度值到显示视窗顶部的距离阈值L包括：

子步骤331，在网页加载完成之后，用户初次触发滚动条事件时，计算所述距离阈值L。

在本发明实施例中，在网页加载完成后，用户未对网页做任何操作之前，所述视频元素显示位置中，在视频元素高度范围内的高度值到显示视窗顶部的距离阈值L是固定的。

此时，对于使用绝对定位的视频元素，其top值(视频元素顶部到网页顶部的距离)，与视频元素顶部到显示视窗顶部的距离是一样的，因此可以直接获取视频元素的所述top值，加上选择的视频元素的触发高度，比如隐藏q/2时就进入开始进入小窗播放模式，那么L＝top值+q/2；

然后L结合滚动比例计算第一阈值，在该步骤之后，可以分配很小的内存空间记录所述第一阈值，此时只需要获取滚动条的top属性，将滚动条的top属性，与记录的第一阈值进行比较即可判断是否进入小窗播放模式，或者判断从小窗播放模式还原为初始的网页样式。其计算速度快，不需要后续在计算滚动比例，L值，以及第一阈值。

在本发明实施例中还可设置L的其他值，比如L＝top值，即视频元素顶部距离显示视窗顶部的距离，为判断显示视窗开始部分被显示。也可设置L＝top值+q，即视频元素开始全部未被显示。在视频元素被判断为部分被全部显示时和/或全部未被显示时均可进入以图3B中将视频元素调整为S316小窗口播放的模式。

本发明与实施例一、实施例二类似的步骤原理类似，在此不再详述。本发明实施例与实施例一、实施例二的类似步骤也可以挪用到本实施例中，具体原理不再详述。

本发明实施例可以选择视频元素未显示的部分有多少时，才进入小窗播放模式。

实施例四

参照图4，其示出了本发明的优选地一种网页中视频元素的播放方法，具体可以包括：

步骤410，从网页服务器侧获取到带有视频元素的网页文档，并加载显示为当前网页，其中所述网页文档中带有针对所述视频元素的显示控制脚本；

步骤420，根据网页整体大小、滚动条的显示位置以及网页当前浏览器显示视窗的显示位置，确定滚动条的滚动距离与网页的滚动距离之间的滚动比例；

步骤430，获取所述视频元素显示位置的顶部到显示视窗顶部的距离阈值A；

该距离阈值A即视频元素顶部至显示视窗顶部的距离。

步骤440，根据所述滚动比例和距离阈值A确定滚动条需要滚动的第二阈值；

步骤450，判断滚动条滚动的距离C是否达到第二阈值；当滚动条滚动的距离C达到第二阈值时，则判断出所述视频元素部分显示。

判断所述视频元素部分显示后，进入步骤460。

在图3A的基础上，本实施例变化至图4A，在视频元素底部与显示视窗顶部重合的时候，即进入小窗播放模式。其中浏览器加载显示网页文档的示例；S412为浏览器显示视窗，S413为原网页中视频元素的显示窗口，S414为滚动条，S415为滚动槽，浏览器的其他部件在此省略。此时会触发小窗口模式S416，只要用户在此刻一直往下滑动，小窗口模式就一直存在。当判断视频元素还是全部的显示在显示视窗中时，则保持网页的初始展示状态。

步骤420-步骤450可以理解为实施例一中“根据视频元素的显示位置、显示视窗的显示位置、滚动条的显示位置、页面整体的大小属性，判断所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示”的具体实施方式。

步骤460，判断出所述视频元素部分显示，则所述显示控制脚本修改所述视频元素的显示位置和显示层索引，使所述视频元素在当前浏览器显示视窗中的当前网页中被置顶显示。

在步骤450中，当滚动条滚动的距离C达到第二阈值时，即判断出所述视频元素部分显示。

优选地，所述步骤430包括：

子步骤431，在网页加载完成之后，用户初次触发滚动条事件时，计算所述距离阈值A。

优选地，所述显示控制脚本修改所述视频元素的显示位置和显示层索引，使所述视频元素在当前浏览器显示视窗中的当前网页中被置顶显示之后，还包括：

子步骤432，根据用户触发的滚动条事件，判断所述显示视窗中是否全部显示所述视频元素的初始显示位置；如果是，则将当前显示位置的视频元素还原至初始显示位置。

进一步的，根据用户触发的滚动条事件，判断所述显示视窗中是否全部显示所述视频元素的初始显示位置，包括：

子步骤433，当视频元素开始部分显示后，根据用户触发的滚动条事件，判断所述滚动条距离所述显示视窗顶部的距离是否小于所述第二阈值；如果小于所述第二阈值，判断所述显示视窗开始全部显示所述视频元素的初始显示位置；

在本发明实施例中，可在网页加载完成后，用户第一次触发onsroll事件之前就计算并记录所述第二阈值。那么后续的如果用户向上滑动网页，那么即可判断滚动条顶部距离显示视窗顶部的距离是否小于所述记录的第二阈值，即可判断视频元素的初始显示位置已经出现在显示视窗中，此时即可将视频元素还原至其初始的显示位置，停用小窗播放模式。

本发明与实施例一至实施例三类似的步骤原理类似，在此不再详述。本发明实施例与实施例一至实施例三的类似步骤也可以挪用到本实施例中，具体原理不再详述。

本发明实施例为视频元素开始进入未完全显示状态时即进入小窗播放模式的实施例。

实施例五

参照图5，其示出了本发明的最优的一种网页中视频元素的播放方法，具体可以包括：

步骤510，从网页服务器侧获取到带有视频元素的网页文档，并加载显示为当前网页，其中所述网页文档中带有针对所述视频元素的显示控制脚本；

步骤520，根据网页整体大小、滚动条的显示位置以及网页当前浏览器显示视窗的显示位置，确定滚动条的滚动距离与网页的滚动距离之间的滚动比例；

步骤530，获取所述视频元素显示位置的顶部到显示视窗顶部的距离阈值B；

该距离阈值为视频元素顶部到显示视窗顶部的距离加上视频元素的高度。

步骤540；根据所述滚动比例和距离阈值B确定滚动条需要滚动的第三阈值；

步骤550，当滚动条滚动的距离C达到第三阈值时，则判断出所述视频元素全部地未被显示。

判断所述视频元素部分显示后，进入步骤560。

在图3A的基础上，本实施例变化至图5A，在视频元素顶部与显示视窗顶部重合的时候，即进入小窗播放模式。其中浏览器加载显示网页文档的示例；S512为浏览器显示视窗，S513为原网页中视频元素的显示窗口，S514为滚动条，S515为滚动槽，浏览器的其他部件在此省略。此时会触发小窗口模式S516，只要用户在此刻一直往下滑动，小窗模式就一直存在。

步骤520-步骤550可以理解为实施例一中“根据视频元素的显示位置、显示视窗的显示位置、滚动条的显示位置、页面整体的大小属性，判断所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示”的具体实施方式。

步骤560，判断出所述视频元素全部地未被显示，则所述显示控制脚本修改所述视频元素的显示位置和显示层索引，使所述视频元素在当前浏览器显示视窗中的当前网页中被置顶显示。

在步骤550，中当滚动条滚动的距离C达到第三阈值时，即判断出所述视频元素全部地未被显示。

优选地，所述步骤530包括：

子步骤531，在网页加载完成之后，用户初次触发滚动条事件时，计算所述距离阈值B。

子步骤532，根据用户触发的滚动条事件，判断所述显示视窗中是否全部显示所述视频元素的初始显示位置；如果是，则将当前显示位置的视频元素还原至初始显示位置。

子步骤532，当视频元素开始部分显示后，根据用户触发的滚动条事件，判断所述滚动条距离所述显示视窗顶部的距离是否小于所述第三阈值；如果小于所述第三阈值，判断所述显示视窗开始全部显示所述视频元素的初始显示位置；

在本发明实施例中，可在网页加载完成后，用户第一次触发onsroll事件之前就计算并记录所述第三阈值。那么后续的如果用户向上滑动网页，那么即可判断滚动条顶部距离显示视窗顶部的距离是否小于所述记录的第三阈值，即可判断视频元素的初始显示位置已经出现在显示视窗中，此时即可将视频元素还原至其初始的显示位置，停用小窗播放模式。

本发明与实施例一至实施例四类似的步骤原理类似，在此不再详述。本发明实施例与实施例一至实施例四的类似步骤也可以挪用到本实施例中，具体原理不再详述。

本发明实施例为视频元素开始完全未显示时即进入小窗播放模式的实施例。

当然,在上述实施例之外,所述显示控制脚本判断出所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示还可包括:

通过获取视频元素距离网页文档顶部的距离了L1，通过document.body.scrollTop函数获取网页文档被卷去的高度L2,(也即网页隐藏的高度)；当L1＝L2，则视频元素开始进入部分显示阶段；和/或，当L1<L2<L1+L3,其中L3为视频元素高度，则视频元素部分显示；和/或当L2≥L1+L3，则视频元素进入视频元素完毕未被显示阶段。

根据上述判断结果即可修改所述视频元素的显示位置和显示层索引，使所述视频元素在当前浏览器显示视窗中的当前网页中被置顶显示。

实施例六

参照图6，其示出了本发明的一种网页中视频元素的播放装置，具体可以包括：

脚本加载模块610，适于从网页服务器侧获取到带有视频元素的网页文档，并加载显示为当前网页，其中所述网页文档中带有针对所述视频元素的显示控制脚本；

显示位置判断模块620，适于所述显示控制脚本判断出所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示；

显示位置更改模块630，适于通过所述显示控制脚本将所述视频元素在当前浏览器显示视窗中的当前网页中进行独立显示。

优选地，所述显示位置更改模块630包括:

元素位置更改模块，适于所述显示控制脚本修改所述视频元素的显示位置和显示层索引，使所述视频元素在当前浏览器显示视窗中的当前网页中被置顶显示。

优选地，在显示位置更改模块630之后，还包括：

关联视频接口提模块，适于获取当前视频元素中播放的视频的关联视频信息；当侦听到鼠标悬停至所述视频元素显示位置时，在视频元素显示供所述关联视频信息并提供点击接口。

优选地，在显示位置更改模块630之后，还包括：

功能结构提供模块，适于当侦听到鼠标悬停至所述视频元素显示位置时，加载并展示针对当前视频内容的功能接口；所述功能接口包括下载接口、和/或分享接口、和/或收藏接口、和/或调用第三方视频播放软件播放所述视频内容接口中至少一个。

优选地，在显示位置更改模块630之后，还包括：

尺寸改变模块，适于当侦听到针对视频元素显示位置的尺寸变更操作时，根据拖拽动作修改视频元素CSS文件中的显示尺寸。

优选地，在显示位置判断模块620之前，还包括：

选择提示模块，适于判断当前网页中是否存在多个视频元素；如果存在，则提示用户选择进行小窗显示的视频元素并提供选择接口；对于用户未选择的视频元素，停止判断出所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示。

优选地，在显示位置更改模块630之后，还包括：

暂停模块，适于当侦听到鼠标悬停至所述视频元素显示位置时，触发对所述视频元素中播放内容的暂停操作；当鼠标移出所述视频元素显示位置后，再继续播放所述视频内容。

优选地，在显示位置更改模块630之后，还包括：

位置移动模块，适于当在所述视频元素的显示位置侦听到拖拽动作后，将所述视频元素的显示位置的位置随着拖拽动作移动。

优选地，所述位置移动模块包括：

第一位置移动模块，适于在对应所述视频元素的CSS样式中，将视频元素的定位参数随着在网页视窗区域内拖拽的位置参数而改变。

优选地，所述显示位置更改模块630之后，还包括：

还原判断模块，适于根据用户触发的滚动条事件，判断所述显示视窗中是否全部显示所述视频元素的初始显示位置；适于如果是，则将当前显示位置的视频元素还原至初始显示位置。

优选地，所述还原判断模块包括：

CSS还原模块，适于在网页HTML的CSS文件中，将所述视频元素的CSS样式的显示位置修改为在初始的显示位置，将所述CSS样式的显示层索引修改为初始的索引参数。

实施例七

参照图7，其示出了本发明的一种网页中视频元素的播放装置，具体可以包括：

脚本加载模块710，适于从网页服务器侧获取到带有视频元素的网页文档，并加载显示为当前网页，其中所述网页文档中带有针对所述视频元素的显示控制脚本；

显示位置判断模块720，适于所述显示控制脚本判断出所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示；

优选地，所述显示位置判断模块720包括:

第一显示位置判断模块，适于根据视频元素的显示位置、显示视窗的显示位置、滚动条的显示位置、页面整体的大小属性，判断所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示。

显示位置更改模块730，所述显示位置更改模块730包括：

元素位置更改模块732，适于所述显示控制脚本修改所述视频元素的显示位置和显示层索引，使所述视频元素在当前浏览器显示视窗中的当前网页中被置顶显示。

优选地，所述元素位置更改模块732包括：

第一元素位置更改模块，适于将所述视频元素的显示位置中显示尺寸进行缩放，将所述显示位置的中定位参数修改为在当前浏览器显示视窗中的当前网页中显示。

优选地，所述第一元素位置更改模块包括：

第二元素位置更改模块，适于在网页HTML的CSS文件中，将所述视频元素的CSS样式的显示位置修改为在当前浏览器显示视窗中的当前网页中显示，将所述CSS样式的显示层索引修改为顶层的索引参数。

优选地，所述第二元素位置更改模块包括：

第一相对修改模块，适于针对所述视频元素的CSS样式，将所述CSS样式的显示位置中的定位参数相对滚动条位置进行修改。

优选地，所述第二元素位置更改模块包括：包括：

第二相对修改模块，适于针对所述视频元素的CSS样式，将所述CSS样式的显示位置中的定位参数相对显示视窗位置进行修改。

优选地，所述元素位置更改模块包括：

按钮隐藏模块，适于将所述视频元素中的控制按钮隐藏。

实施例八

参照图8，其示出了本发明的一种网页中视频元素的播放装置，具体可以包括：

脚本加载模块810，适于从网页服务器侧获取到带有视频元素的网页文档，并加载显示为当前网页，其中所述网页文档中带有针对所述视频元素的显示控制脚本；

第一显示位置判断模块820，所述第一显示位置判断模块820包括；

第一滚动比例计算模块822，适于根据网页整体大小、滚动条的显示位置以及网页当前浏览器显示视窗的显示位置，确定滚动条的滚动距离与网页的滚动距离之间的滚动比例；

第一滚动距离获取模块824，适于获取所述视频元素显示位置中，在视频元素高度范围内的高度值到显示视窗顶部的距离阈值L；

第一滚动阈值确定模块826，适于根据所述滚动比例和距离阈值L确定滚动条需要滚动的第一阈值；

第一元素判断模块828，适于当滚动条滚动的距离C达到第一阈值时，则判断所述视频元素部分显示和/或全部地未被显示。

显示位置更改模块830，所述显示位置更改模块830包括：元素位置更改模块832，适于所述显示控制脚本修改所述视频元素的显示位置和显示层索引，使所述视频元素在当前浏览器显示视窗中的当前网页中被置顶显示。

优选地，所述显示位置更改模块830之后，还包括：

实施例九

参照图9，其示出了本发明优选地一种网页中视频元素的播放装置，具体可以包括：

脚本加载模块910，适于从网页服务器侧获取到带有视频元素的网页文档，并加载显示为当前网页，其中所述网页文档中带有针对所述视频元素的显示控制脚本；

第一显示位置判断模块920，所述第一显示位置判断模块720包括；

第二滚动比例计算模块922，适于根据网页整体大小、滚动条的显示位置以及网页当前浏览器显示视窗的显示位置，确定滚动条的滚动距离与网页的滚动距离之间的滚动比例；

第二滚动距离获取模块924，适于获取所述视频元素显示位置的顶部到显示视窗顶部的距离阈值A；

优选地，所述第二滚动距离获取模块924包括：

第一触发计算模块，适于在网页加载完成之后，用户初次触发滚动条事件时，计算所述距离阈值A。

第二滚动阈值确定模块926，适于根据所述滚动比例和距离阈值A确定滚动条需要滚动的第二阈值；

部分显示判断模块928，适于当滚动条滚动的距离C达到第二阈值时，则判断所述视频元素部分显示。

显示位置更改模块930，所述显示位置更改模块930包括：元素位置更改模块932，适于所述显示控制脚本修改所述视频元素的显示位置和显示层索引，使所述视频元素在当前浏览器显示视窗中的当前网页中被置顶显示。

优选地，所述显示位置更改模块730之后，还包括：

优选地，所述还原判断模块包括：

第一还原判断模块，适于当视频元素开始部分显示后，根据用户触发的滚动条事件，判断所述滚动条距离所述显示视窗顶部的距离是否小于所述第二阈值；如果小于所述第二阈值，判断所述显示视窗开始全部显示所述视频元素的初始显示位置；

实施例十

参照图10，其示出了本发明最优的一种网页中视频元素的播放装置，具体可以包括：

脚本加载模块1010，适于从网页服务器侧获取到带有视频元素的网页文档，并加载显示为当前网页，其中所述网页文档中带有针对所述视频元素的显示控制脚本；

第一显示位置判断模块1020，所述第一显示位置判断模块1020包括；

第三滚动比例计算模块1022，适于根据网页整体大小、滚动条的显示位置以及网页当前浏览器显示视窗的显示位置，确定滚动条的滚动距离与网页的滚动距离之间的滚动比例；

第三滚动距离获取模块1024，适于获取所述视频元素显示位置的顶部到显示视窗顶部的距离阈值B；

优选地，所述第二滚动距离获取模块1024包括：

第一触发计算模块，适于在网页加载完成之后，用户初次触发滚动条事件时，计算所述距离阈值B。

第三滚动距离获取模块1026，适于获取所述视频元素显示位置的底部到显示视窗顶部的距离阈值B；

全部未显示判断模块1028，适于当滚动条滚动的距离C达到第三阈值时，则判断所述视频元素部分显示。

显示位置更改模块1030，所述显示位置更改模块1030包括：元素位置更改模块1032，适于所述显示控制脚本修改所述视频元素的显示位置和显示层索引，使所述视频元素在当前浏览器显示视窗中的当前网页中被置顶显示。

优选地，所述显示位置更改模块1030之后，还包括：

优选地，所述还原判断模块包括：

第一还原判断模块，适于当视频元素开始部分显示后，根据用户触发的滚动条事件，判断所述滚动条距离所述显示视窗顶部的距离是否小于所述第三阈值；如果小于所述第三阈值，判断所述显示视窗开始全部显示所述视频元素的初始显示位置；

实施例十一

参照图11，其示出了本发明最优的一种网页中视频元素的播放系统，具体可以包括：

客户端浏览器1110和服务器1120；

所述服务器110适于，在带有视频元素的网页文档中，添加显示控制脚本；所述显示控制脚本用于控制客户端浏览器1110判断出所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示，以及述显示控制脚本修改所述视频元素的显示位置和显示层索引，使所述视频元素在当前浏览器显示视窗中的当前网页中被置顶显示。

所述客户端浏览器1110包括：

脚本加载模块1112，适于从网页服务器侧获取到带有视频元素的网页文档，并加载显示为当前网页，其中所述网页文档中带有针对所述视频元素的显示控制脚本；

显示位置判断模块1114，适于所述显示控制脚本判断出所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示；

显示位置更改模块1116，适于通过所述显示控制脚本将所述视频元素在当前浏览器显示视窗中的当前网页中进行独立显示。

当然所述服务器添加的显示控制脚本还可以包括实施例一至实施例十中提及的其他任意逻辑，相应的客户端浏览器也可根据所述脚本加载相应逻辑的执行模块。

在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的网页中视频元素的播放设备中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部地设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

本发明公开了A1、一种网页中视频元素的播放方法，包括：

A2、如A1所述的方法，所述通过所述显示控制脚本将所述视频元素在当前浏览器显示视窗中的当前网页中进行独立显示：

所述显示控制脚本修改所述视频元素的显示位置和显示层索引，使所述视频元素在当前浏览器显示视窗中的当前网页中被置顶显示。

A3、如A2所述的方法，所述显示控制脚本判断出所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示,包括:

根据视频元素的显示位置、显示视窗的显示位置、滚动条的显示位置、页面整体的大小属性，判断所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示。

A4、如A3所述的方法，根据视频元素的显示位置、显示视窗的显示位置、滚动条的显示位置、页面整体的大小属性，判断所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示包括：

根据网页整体大小、滚动条的显示位置以及网页当前浏览器显示视窗的显示位置，确定滚动条的滚动距离与网页的滚动距离之间的滚动比例；

获取所述视频元素显示位置中，在视频元素高度范围内的高度值到显示视窗顶部的距离阈值L；

根据所述滚动比例和距离阈值L确定滚动条需要滚动的第一阈值；

当滚动条滚动的距离C达到第一阈值时，则判断所述视频元素部分显示和/或全部地未被显示。

A5、如A3所述的方法，根据视频元素的显示位置、显示视窗的显示位置、滚动条的显示位置、页面整体的大小属性，判断所述视频元素在当前浏览器显示视窗中部分显示包括：

获取所述视频元素显示位置的顶部到显示视窗顶部的距离阈值A；

根据所述滚动比例和距离阈值A确定滚动条需要滚动的第二阈值；

当滚动条滚动的距离C达到第二阈值时，则判断所述视频元素部分显示。

A6、如A3所述的方法，根据视频元素的显示位置、显示视窗的显示位置、滚动条的显示位置、页面整体的大小，判断所述视频元素在当前浏览器显示视窗中全部地未被显示包括：

根据网页整体大小属性、滚动条的显示位置以及网页当前浏览器显示视窗的显示位置，确定滚动条的滚动距离与网页的滚动距离之间的滚动比例；

获取所述视频元素显示位置的底部到显示视窗顶部的距离阈值B；

根据所述滚动比例和距离阈值B确定滚动条需要滚动的第三阈值；

当滚动条滚动的距离C达到第三阈值时，则判断所述视频元素全部地未被显示。

A7、如A5所述的方法，获取所述视频元素显示位置的顶部到显示视窗顶部的距离阈值A包括：

在网页加载完成之后，用户初次触发滚动条事件时，计算所述距离阈值A。

A8、如A6所述的方法，所述获取所述视频元素显示位置的顶部到显示视窗顶部的距离阈值B包括：

在网页加载完成之后，用户初次触发滚动条事件时，计算所述距离阈值B。

A9、如A5或A6所述的方法，所述通过所述显示控制脚本将所述视频元素在当前浏览器显示视窗中的当前网页中进行独立显示之后，还包括：

根据用户触发的滚动条事件，判断所述显示视窗中是否全部显示所述视频元素的初始显示位置；如果是，则将当前显示位置的视频元素还原至初始显示位置。

A10、如A9所述的方法，根据用户触发的滚动条事件，判断所述显示视窗中是否全部显示所述视频元素的初始显示位置，包括：

当视频元素开始部分显示后，根据用户触发的滚动条事件，判断所述滚动条距离所述显示视窗顶部的距离是否小于所述第二阈值；如果小于所述第二阈值，判断所述显示视窗开始全部显示所述视频元素的初始显示位置；

或者，当视频元素开始全部地不被显示后，根据用户触发的滚动条事件，判断所述滚动条距离所述显示视窗顶部的距离是否小于所述第三阈值；如果小于所述第三阈值，判断所述显示视窗开始全部显示所述视频元素的初始显示位置。

A11、如A9所述的方法，将所述视频元素还原至初始显示位置包括：

在网页HTML的CSS文件中，将所述视频元素的CSS样式的显示位置修改为在初始的显示位置，将所述CSS样式的显示层索引修改为初始的索引参数。

A12、如A2所述的方法，所述显示控制脚本修改所述视频元素的显示位置和显示层索引，使所述视频元素在当前浏览器显示视窗中的当前网页中被置顶显示，包括：

将所述视频元素的显示位置中显示尺寸进行缩放，将所述显示位置的中定位参数修改为在当前浏览器显示视窗中的当前网页中显示。

A13、如A2所述的方法，所述显示控制脚本修改所述视频元素的显示位置和显示层索引，使所述视频元素在当前浏览器显示视窗中的当前网页中被置顶显示包括：

在网页HTML的CSS文件中，将所述视频元素的CSS样式的显示位置修改为在当前浏览器显示视窗中的当前网页中显示，将所述CSS样式的显示层索引修改为顶层的索引参数。

A14、如A12所述的方法，将所述视频元素的CSS样式的显示位置修改为在当前浏览器显示视窗中的当前网页中显示包括：

针对所述视频元素的CSS样式，将所述CSS样式的显示位置中的定位参数相对滚动条位置进行修改。

A15、如A12所述的方法，将所述视频元素的CSS样式的显示位置修改为在当前浏览器显示视窗中的当前网页中显示包括：

针对所述视频元素的CSS样式，将所述CSS样式的显示位置中的定位参数相对显示视窗位置进行修改。

A16、如A2所述的方法，所述显示控制脚本修改所述视频元素的显示位置和显示层索引，使所述视频元素在当前浏览器显示视窗中的当前网页中被置顶显示包括：

将所述视频元素中的控制按钮隐藏。

A17、如A1所述的方法，在通过所述显示控制脚本将所述视频元素在当前浏览器显示视窗中的当前网页中进行独立显示之后，还包括：

获取当前视频元素中播放的视频的关联视频信息；当侦听到鼠标悬停至所述视频元素显示位置时，在视频元素显示供所述关联视频信息并提供点击接口。

A18、如A1所述的方法，在通过所述显示控制脚本将所述视频元素在当前浏览器显示视窗中的当前网页中进行独立显示之后，还包括：

当侦听到鼠标悬停至所述视频元素显示位置时，加载并展示针对当前视频内容的功能接口；所述功能接口包括下载接口、和/或分享接口、和/或收藏接口、和/或调用第三方视频播放软件播放所述视频内容接口中至少一个。

A19、如A1所述的方法，在通过所述显示控制脚本将所述视频元素在当前浏览器显示视窗中的当前网页中进行独立显示之后，还包括：

当侦听到针对视频元素显示位置的尺寸变更操作时，根据拖拽动作修改视频元素CSS文件中的显示尺寸。

A20、如A1所述的方法，在所述显示控制脚本判断出所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示之前，还包括：

判断当前网页中是否存在多个视频元素；如果存在，则提示用户选择进行小窗显示的视频元素并提供选择接口；对于用户未选择的视频元素，停止判断出所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示。

A21、如A1所述的方法，在通过所述显示控制脚本将所述视频元素在当前浏览器显示视窗中的当前网页中进行独立显示之后，还包括：

当侦听到鼠标悬停至所述视频元素显示位置时，触发对所述视频元素中播放内容的暂停操作；当鼠标移出所述视频元素显示位置后，再继续播放所述视频内容。

A22、如A1所述的方法，在通过所述显示控制脚本将所述视频元素在当前浏览器显示视窗中的当前网页中进行独立显示之后，还包括：

当在所述视频元素的显示位置侦听到拖拽动作后，将所述视频元素的显示位置的位置随着拖拽动作移动。

A23、如A22所述的方法，将所述视频元素的显示位置的位置随着拖拽动作移动包括：

在对应所述视频元素的CSS样式中，将视频元素的定位参数随着在网页视窗区域内拖拽的位置参数而改变。

本发明还公开了一种B24、一种网页中视频元素的播放装置，包括：

B25、如B24所述的装置，所述显示位置更改模块包括:

B26、如B25所述的装置，所述显示位置判断模块包括:

B27、如B26所述的装置，所述第一显示位置判断模块包括：

第一滚动比例计算模块，适于根据网页整体大小、滚动条的显示位置以及网页当前浏览器显示视窗的显示位置，确定滚动条的滚动距离与网页的滚动距离之间的滚动比例；

第一滚动距离获取模块，适于获取所述视频元素显示位置中，在视频元素高度范围内的高度值到显示视窗顶部的距离阈值L；

第一滚动阈值确定模块，适于根据所述滚动比例和距离阈值L确定滚动条需要滚动的第一阈值；

第一元素判断模块，适于当滚动条滚动的距离C达到第一阈值时，则判断所述视频元素部分显示和/或全部地未被显示。

B28、如B26所述的装置，所述第一显示位置判断模块包括：

第二滚动比例计算模块，适于根据网页整体大小、滚动条的显示位置以及网页当前浏览器显示视窗的显示位置，确定滚动条的滚动距离与网页的滚动距离之间的滚动比例；

第二滚动距离获取模块，适于获取所述视频元素显示位置的顶部到显示视窗顶部的距离阈值A；

第二滚动阈值确定模块，适于根据所述滚动比例和距离阈值A确定滚动条需要滚动的第二阈值；

部分显示判断模块，适于当滚动条滚动的距离C达到第二阈值时，则判断所述视频元素部分显示。

B29、如B26所述的装置，所述第一显示位置判断模块包括：

第三滚动距离获取模块，适于根据网页整体大小属性、滚动条的显示位置以及网页当前浏览器显示视窗的显示位置，确定滚动条的滚动距离与网页的滚动距离之间的滚动比例；

第三滚动距离获取模块，适于获取所述视频元素显示位置的底部到显示视窗顶部的距离阈值B；

第三滚动阈值确定模块，适于根据所述滚动比例和距离阈值B确定滚动条需要滚动的第三阈值；

全部未显示判断模块，适于当滚动条滚动的距离C达到第三阈值时，则判断所述视频元素全部地未被显示。

B30、如B28所述的装置，所述第二滚动距离获取模块包括：

B31、如B29所述的装置，所述第三滚动距离获取模块包括：

第二触发计算模块，适于在网页加载完成之后，用户初次触发滚动条事件时，计算所述距离阈值B。

B32、如B28或B29其所述的装置，所述显示位置更改模块之后，还包括：

B33、如B32所述的方法，所述还原判断模块包括：

或者，第二还原判断模块，适于当视频元素开始全部地不被显示后，根据用户触发的滚动条事件，判断所述滚动条距离所述显示视窗顶部的距离是否小于所述第三阈值；如果小于所述第三阈值，判断所述显示视窗开始全部显示所述视频元素的初始显示位置。

B34、如B32所述的方法，所述还原判断模块包括：

B35、如B25所述的装置，所述元素位置更改模块包括：

B36、如B24所述的装置，所述显示位置更改模块包括：

B37、如B36所述的装置，所述第二元素位置更改模块包括：

B38、如B36所述的装置，所述第二显示位置更改模块包括：包括：

B39、如B25所述的装置，所述元素位置更改模块包括：

按钮隐藏模块，适于将所述视频元素中的控制按钮隐藏。

B40、如B24所述的装置，在显示位置更改模块之后，还包括：

B41、如B24所述的装置，在显示位置更改模块之后，还包括：

B42、如B24所述的装置，在显示位置更改模块之后，还包括：

B43、如B24所述的装置，在显示位置判断模块之前，还包括：

B44、如B24所述的装置，在显示位置更改模块之后，还包括：

B45、如B24所述的装置，在显示位置更改模块之后，还包括：

B46、如B44所述的装置，所述位置移动模块包括：

Claims

1.一种网页中视频元素的播放方法，包括：

2.如权利要求1所述的方法，其特征在于，所述通过所述显示控制脚本将所述视频元素在当前浏览器显示视窗中的当前网页中进行独立显示：

3.如权利要求2所述的方法，其特征在于，所述显示控制脚本判断出所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示,包括:

4.如权利要求3所述的方法，其特征在于，根据视频元素的显示位置、显示视窗的显示位置、滚动条的显示位置、页面整体的大小属性，判断所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示包括：

5.如权利要求3所述的方法，其特征在于，根据视频元素的显示位置、显示视窗的显示位置、滚动条的显示位置、页面整体的大小属性，判断所述视频元素在当前浏览器显示视窗中部分显示包括：

6.如权利要求3所述的方法，其特征在于，根据视频元素的显示位置、显示视窗的显示位置、滚动条的显示位置、页面整体的大小，判断所述视频元素在当前浏览器显示视窗中全部地未被显示包括：

7.如权利要求5所述的方法，其特征在于，获取所述视频元素显示位置的顶部到显示视窗顶部的距离阈值A包括：

8.如权利要求6所述的方法，其特征在于，所述获取所述视频元素显示位置的顶部到显示视窗顶部的距离阈值B包括：

9.如权利要求5或6所述的方法，其特征在于，所述通过所述显示控制脚本将所述视频元素在当前浏览器显示视窗中的当前网页中进行独立显示之后，还包括：

10.一种网页中视频元素的播放装置，包括：