CN104268251A - 一种网页中视频元素的播放方法和装置 - Google Patents
一种网页中视频元素的播放方法和装置 Download PDFInfo
- Publication number
- CN104268251A CN104268251A CN201410523186.9A CN201410523186A CN104268251A CN 104268251 A CN104268251 A CN 104268251A CN 201410523186 A CN201410523186 A CN 201410523186A CN 104268251 A CN104268251 A CN 104268251A
- Authority
- CN
- China
- Prior art keywords
- window
- video elementary
- video
- webpage
- display
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Two-Way Televisions, Distribution Of Moving Picture Or The Like (AREA)
Abstract
本发明公开了一种网页中视频元素的播放方法和装置,本发明涉及浏览器技术领域。所述方法包括:确定出浏览器中当前加载网页文档为带有可播放的视频元素的特定网页;检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示;由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放。本发明取得了可以在网页文档中视频元素的初始位置移出显示视窗之后,可使视频元素在独立于显示视窗中的新窗口中播放,使在用户浏览器网页中其他信息(比如视频评论、推荐视频等)时可以同时观看视频元素中的播放内容的有益效果。
Description
技术领域
本发明涉及浏览器技术领域,具体涉及一种网页中视频元素的播放方法和装置。
背景技术
浏览器是指可以显示网页服务器或者文件系统的HTML(超文本标记语言,HyperText Mark-up Language))文件内容,并让用户与这些文件交互的一种软件。网页浏览器主要通过HTTP协议与网页服务器交互并获取网页,这些网页由URL(统一资源定位符,Uniform Resource Locator)指定,文件格式通常为HTML。一个网页中可以包括多个文档,每个文档都是分别从服务器获取的。HTTP内容类型和URL协议规范允许网页设计者在网页中嵌入图像、视频等。
而当前的网页服务器中存在一种带有视频内容的网页,其视频内容一般是在页面的某个位置进行播放,然后视频下方很长的一部分是其他内容,比如相关广告图片,相关推荐视频的链接,当前视频评论等内容,其页面整体高度远远大于浏览器显示视窗的高度。那么,当用户通过鼠标滚轮或者滚动条滑动页面去浏览其他位置的信息(比如视频评论)时,页面中播放的视频可能移出显示视窗,以至用户则无法观看到视频内容。
发明内容
鉴于上述问题,提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的网页中视频元素的播放装置和相应的网页中视频元素的播放方法。
依据本发明的一个方面,提供了一种网页中视频元素的播放方法,包括:
确定出浏览器中当前加载网页文档为带有可播放的视频元素的特定网页;
检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示;
由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放。
根据本发明的另一方面,提供了一种网页中视频元素的播放装置,包括:
网页判断模块,适于确定出浏览器中当前加载网页文档为带有可播放的视频元素的特定网页;
显示位置判断模块,适于检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示;
窗口播放模块,适于由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放。
根据本发明的一种网页中视频元素的播放方法和装置,针对浏览器中当前加载网页文档为带有可播放的视频元素的特定网页,当检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示;由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放。由此解决了用户滑动页面时,当视频元素移出显示视窗之后,用户浏览网页中的信息时无法同时观看视频元素中的播放内容的问题,取得了可以在网页文档中视频元素的初始位置移出显示视窗之后,可使视频元素在独立于显示视窗中的新窗口中播放,使在用户浏览器网页中其他信息(比如视频评论、推荐视频等)时可以同时观看视频元素中的播放内容的有益效果。
上述说明仅是本发明技术方案的概述,为了能够更清楚了解本发明的技术手段,而可依照说明书的内容予以实施,并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂,以下特举本发明的具体实施方式。
附图说明
通过阅读下文优选实施方式的详细描述,各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的,而并不认为是对本发明的限制。而且在整个附图中,用相同的参考符号表示相同的部件。在附图中:
图1示出了根据本发明一个实施例的一种网页中视频元素的播放方法的流程示意图;
图2示出了根据本发明一个实施例的一种网页中视频元素的播放方法的流程示意图;
图2A示出了根据本发明一个实施例的一种的视频元素初始的加载状态示意图;
图2B示出了根据本发明一个实施例的一种视频元素部分未显示时触发小窗口播放视频元素的示意图;
图3示出了根据本发明优选的一个实施例的一种网页中视频元素的播放方法的流程示意图;
图3A示出了根据本发明一个实施例的在图2A的基础上的一种视频元素顶部开始进入部分显示状态时触发小窗口播放视频元素的示意图;
图4示出了根据本发明一个实施例的一种网页中视频元素的播放方法的流程示意图;
图4A示出了根据本发明一个实施例的在图2A的基础上的一种视频元素顶部开始进入全部未显示状态时触发小窗口播放视频元素的示意图;
图5示出了根据本发明一个实施例的一种网页中视频元素的播放方法的流程示意图;
图6示出了根据本发明一个实施例的一种网页中视频元素的播放装置的结构示意图;
图7示出了根据本发明一个实施例的一种网页中视频元素的播放装置的结构示意图;
图8示出了根据本发明一个实施例的一种网页中视频元素的播放装置的结构示意图;
图9示出了根据本发明一个实施例的一种网页中视频元素的播放装置的结构示意图;
图10示出了根据本发明一个实施例的一种网页中视频元素的播放装置的结构示意图。
具体实施方式
下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例,然而应当理解,可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反,提供这些实施例是为了能够更透彻地理解本公开,并且能够将本公开的范围完整的传达给本领域的技术人员。
本发明的核心思想之一是:针对浏览器中当前加载网页文档为带有可播放的视频元素的特定网页,当检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示;由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放。以使网页中的视频元素在新窗口中进行播放,该新窗口显示顺序在显示视窗前面,使用户在滚动网页以浏览非视频元素的信息时,也可以方便的看到视频元素的播放内容。
实施例一
参照图1,其示出了本发明的一种网页中视频元素的播放方法,具体可以包括:
步骤110,确定出浏览器中当前加载网页文档为带有可播放的视频元素的特定网页;
在本发明实施例中,浏览器首先会从服务器获取用于加载的网页文档。然后对该网页文档进行解析和加载。
在实际应用中,本发明实施例的浏览器在接收用户输入的URL(统一资源定位符,Uniform Resource Locator)后,可发送相应的HTTP(超文本转移协议,Hypertext Transfer Protocol)请求从网页服务器获取HTML(即超文本标记语言,HyperText Mark-up Language)文档,该HTML用于加载到浏览器的tab标签页中展示。
然后本发明则可判断浏览器中当前加载网页文档是否为带有可播放的视频元素的特定网页。
在本发明实施例中,对于浏览器获取的网页文档,首先会针对URL和或者网页内容,判断该网页文档是否为带有可播放的视频元素的特定网页。所述可播放的视频元素比如用于播放电视剧、电影等内容的视频元素。当判断出所述网页文档为带有可播放的视频元素的特定网页,则进入后续过程。
优选地,所述判断出所述网页文档为带有可播放的视频元素的特定网页包括:
子步骤A111,针对当前网页文档对应的网址,根据以通配符构建的网址匹配规则和/或预置的网址名单,对所述网址进行匹配;当网址匹配上,则判断出所述网页文档为带有可播放的视频元素的特定网页。
在本发明实施例中,对于浏览器获取的网页文档的URL,本发明可以通配符构建网址匹配规则,比如对于通配符*,构建网址匹配规则:*v.youku*,则表示带有v.youku的任意网址均为特定网页。那么如果所述URL包括v.youku则意味着匹配上。
或者预置网址名单,比如对youku视频网站、360视频网站等主流视频网站的播放页面构建网址名单,将所述URL与网址名单进行匹配。
上述两种匹配方式可以单独使用,也可以同时使用。
优选地,在网址匹配上之后,包括:
子步骤A112,提取对应所述网址的网页架构模板,并利用所述网页架构模板对所述网页文档进行匹配;当所述网页文档与上述网页架构模板匹配上,则判断出所述网页文档为带有可播放的视频元素的特定网页。
在前述对网址匹配后,如果匹配上网址,则可先进入本步骤,提取对应所述匹配上的网址的网页架构模块,利用所述网页架构模板对所述网页文档进行匹配。
在实际中,网页文档可解析为DOM树结构,而每个网站的设计的各栏目的网页的DOM树结构不尽相同,那么本发明可基于每个网站各栏目的网页文档的DOM树,构建网页架构模板,该模板可以精准定位该类型网页文档中可播放视频元素的位置。
如此,如果所述网页文档与上述网页架构模板匹配上,则判断出所述网页文档为带有可播放的视频元素的特定网页。
步骤120,检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示;
针对前述的特定网页,本发明实施例会检测网页中的视频元素是否在当前浏览器显示视窗中部分显示和/或全部地未被显示。比如视频元素部分显示+全部地未被显示后,进入步骤130;或者视频元素全部地未被显示后,进入步骤130;或者视频元素部分显示后,进入步骤130。
优选地,所述检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示,包括:
子步骤S122,根据视频元素的显示位置、显示视窗的显示位置、滚动条的显示位置、页面整体的大小属性,判断所述视频元素在当前浏览器显示视窗中部分显示和/或者全部地未被显示。
在实际应用中,浏览器对页面进行展示时至少有4个属性需要处理:浏览器显示视窗的展示位置比如宽(width)、高(height);网页文档的大小属性比如其展示时其整体的宽(width)、高(height);文档中各元素在页面中的展示位置,比如对于视频元素有:宽(width)、高(height)、距离页面顶部的距离(top)、距离页面左侧的距离(left)等);滚动条的展示位置,比如距离显示视窗顶部的距离(top),距离显示视窗左侧的距离(left)等。
然后,在拖动过程中即可根据上述位置属性计算所述视频元素在当前浏览器显示视窗中部分显示和/或者全部地未被显示。
优选地,在检测到所述视频元素部分显示和/或全部地未被显示之后还包括:
子步骤S123,判断所述视频元素对应的视频窗口为有窗口模式还是无窗口模式。
在实际应用中,网页文档中的视频元素的设计方式可包括两种:一种是设计一个UI窗口形式播放视频内容;另外一种是固定一个区域,将该区域作为一个位图展示区域,将视频流的帧在该位图上进行刷新,以进行播放。
两种模式下的,在步骤130中设置视频元素在该新建的窗口的原理不同,因此在此可判断视频元素对应的视频窗口的模式。
优选地,所述判断所述视频元素对应的视频窗口为有窗口模式还是无窗口模式,包括:
通过网页文档中的<param>标签判断所述视频窗口为有窗口模式还是无窗口模式。
在网页文档中,一般是以<param>设定视频元素对应的视频窗口模式。比如<param name="wmode"value="transparent">。其中value的值表示视频元素对应的视频窗口模式。在本发明实施例中,value值有三种,分别如下:
Window:表示有窗口模式
Opaque:表示有窗口模式
Transparent:表示无窗口模式。
那么前面例子<param name="wmode"value="transparent">中表示所属视频元素为无窗口模式。
步骤130,由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放。
在本发明实施例中,浏览器判断出特定网页中的视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示后,可创建一个独立的窗口,将视频元素设置在该窗口中播放。在实际应用中,本发明一般设置一个小窗口,该小窗口大小只占浏览器显示视窗的很小比例,避免在用户拉动网页时,窗口过大而影响其对网页内容的浏览。对于创建小窗口,可以有浏览器调用CreateWindow函数创建一个窗口。其中CreateWindow原型为:
CreateWindow(
LPCTSTR lpClassName,
LPCTSTR lpWindowName,
DWORD dwStyle,
int x,
int y,
int nWidth,
int nHeight,
HWND hWndParent,
HMENU hMenu,
HANDLE hlnstance,
LPVOID lpParam);
其中,lpClassName指向一个空结束的字符串或整型数atom。lpWindowName指向一个指定窗口名的空结束的字符串指针。dwExstyle指定创建窗口的风格。x,y,nWidth,nHeight制定了窗口的位置和大小,x和y指定初始左定点坐标,nWidth和nHeight指定宽度和高度。hWndParent指向被创建窗口的父窗口或所有者窗口的句柄,若要创建一个子窗口或一个被属窗口,需提供一个有效的窗口句柄,这个参数对弹出式窗口是可选的。hMenu菜单句柄,或依据窗口风格指明一个子窗口标识,对于层叠或弹出式窗口,hMenu指定窗口使用的菜单:如果使用了菜单类,则hMenu可以为NULL。对于子窗口,hMenu指定了该子窗口标识(一个整型量),一个对话框使用这个整型值将事件通知父类。hInstance在早期的操作系统中,如Windows95/98/Me,该参数指定与窗口相关的模块实例的句柄,而在较新的操作系统中,如Windows NT/2000/XP/7,可以不理睬该参数。lpPraram指向一个值的指针,该值传递给窗口WM_CREATE消息。该值通过在IParam参数中的CREATESTRUCT结构传递,如果应用程序调用CreateWindow创建一个MDI客户窗口,则lpParam必须指向一个CLIENTCREATESTRUCT结构。
在本发明实施例中,创建窗口时,可将所述窗口的显示顺序(即Z序)设置为至少始终显示于显示视窗之前。
其中,窗口的大小可以跟随显示视窗大小确定,比如为显示视窗大小1/6,也可以指定。窗口的位置可以跟随滚动条变动,也可随着显示视窗位置确定。
优选地,所述将所述视频元素中的视频内容放入所述窗口中播放包括:
子步骤A131,对于有窗口模式的视频元素,将所述视频元素对应的视频窗口的父窗口修改为所述窗口,使所述视频窗口嵌入所述窗口中进行播放。
对于前述有窗口模式和无窗口模式的判断结果,当视频元素对应的视频窗口为有窗口模式时,只要将视频元素对应的视频窗口的父窗口修改为所述新建的窗口。那么根据窗口的运行规则,视频窗口会自动在父窗口中运行。在本发明实施例中,可采用SetParent函数改变窗口的父窗口。
其中,函数原型为:SetParent(HWND hWndChild,HWNDhWndNewParent);
其中hWndChild:子窗口句柄。hWndNewParent:新的父窗口句柄。返回值:如果函数成功,返回值为子窗口的原父窗口句柄;如果函数失败,返回值为NULL。若想获得多错误信息,请调用GetLastError函数。
当然,对于修改视频元素对应视频窗口的父窗口的方式,本发明不对其加以限制。
优选地,所述将所述视频元素中的视频内容放入所述窗口中播放包括:
子步骤A132,对于无窗口模式的视频元素,接管视频内容的绘制输出函数,将对视频内容的输出位置更改为所述在所述窗口中输出。
对于无窗口模式,在实际运行中其是调用绘制输出函数,将视频帧输出到为视频元素提供的位图显示区域进行绘制,从而将视频帧以位图的形式渲染展示。当然,每两帧视频帧之间的间隔时间极短,在人的视觉上是连续的。
那么,对于前述无窗口模式和无窗口模式的判断结果,当视频元素对应的视频窗口为无窗口模式时,只有接管对视频元素的绘制输出函数,将其输出的位置修改为新建的窗口,即可实现视频元素的内容在所述窗口中播放。
其中,所述绘制输出函数包括:InvalidateRect函数,invalidateregion函数,forceredraw函数其中一个或者多个。其实际应用比如:
host_funcs_.invalidaterect=&NPN_InvalidateRect;
host_funcs_.invalidateregion=&NPN_InvalidateRegion;
host_funcs_.forceredraw=&NPN_ForceRedraw;
其中,invalidate()是强制系统进行重画,但是不一定就马上进行重画。因为Invalidate()只是通知系统,此时的窗口已经变为无效。其是强制系统调用WM_PAINT这个消息寄送至消息队列,当执行到WM_PAINT消息时才会使用视频帧对窗口进行重绘。
优选地,所述由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放包括:
子步骤A133,将所述窗口中对应的视频元素的控制按钮隐藏。
在实际应用中,本发明可将除了播放视频内容的界面进行显示以外,视频元素中其他界面均可进行隐藏,比如把控制按钮隐藏,播放区域的边界隐藏,使用户只用看到播放视频内容的界面而不受视频元素其他按钮界面的影响。
在子步骤S133之后,还包括:
子步骤S1331,当侦听到鼠标悬停至所述视频元素显示位置时,显示所述视频元素中的控制按钮。
优选地,在由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放之后,还包括:
子步骤A134,获取当前窗口中播放的视频内容的关联视频信息;当侦听到鼠标悬停至所述窗口上时,在窗口中显示供所述关联视频信息并提供点击接口。
在实际应用中,可能一个带有视频元素的网页中,存在大量与视频相关联的视频信息,本发明实施例可获取当前视频元素中播放的视频的关联视频信息;当侦听到鼠标悬停至所述视频元素显示位置时,在视频元素显示供所述关联视频信息并提供点击接口。
当在视频元素显示位置,监控到鼠标悬浮事件(onmouseover事件)时,在视频元素中显示所述关联视频信息并提供点击接口。在显示相关视频信息时,可在视频元素的播放视频内容的播放区域之外的其他位置显示。当然,也可以在视频元素中添加新的展示界面,用以显示关联视频信息并针对每个视频信息提供点击接口。
当用户点击针对某个视频Q的点击接口,则在视频元素的播放区域中播放该视频Q。
当侦测到用户没有点击动作,鼠标移开视频元素显示位置后,即侦测到移出视频元素显示位置的onmouseout事件后,则隐藏所述关联视频信息及其点击接口。
优选地,在由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放之后,还包括:
子步骤A135,当侦听到鼠标悬停至所述窗口上时,加载并展示针对当前视频内容的功能接口;所述功能接口包括下载接口、和/或分享接口、和/或收藏接口、和/或调用第三方视频播放软件播放所述视频内容接口。
即当在视频元素的显示位置侦听到鼠标悬停事件后,在视频元素中添加针对当前视频内容的功能接口,所述功能接口包括下载接口、和/或分享接口、和/或收藏接口、和/或调用第三方视频播放软件播放所述视频内容接口中至少一个。所述下载接口用于调用浏览器的下载组件下载当前播放的视频。所述分享接口用于将当前的视频分享到指定的网站,比如人人网,新浪微博等网站。所述调用第三方视频播放软件播放所述视频内容接口包括调用PPS播放器等播放软件,在该播放软件中播放视频。
优选地,在由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放之后,还包括:
子步骤A136,当侦听到针对窗口的尺寸变更操作时,根据拖拽动作修改窗口的显示尺寸。
在本发明实施例中,在窗口的边框处提供可变更视频元素尺寸的功能。当在窗口的边框处侦听到鼠标焦点,则触发边框拉动箭头,当再侦听到鼠标按下+拖动的拖拽动作时,即再侦听到onmousedown+onmousemove事件时,则将窗口的尺寸随着拖拽动作变大或者变小。
优选地,在检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示之前,还包括:
子步骤A137,判断当前网页中是否存在多个视频元素;如果存在,则提示用户选择进行小窗显示的播放元素并提供选择接口;对于用户未选择的播放元素,停止判断所述视频元素在当前浏览器显示视窗中是否部分显示和/或是否全部地未被显示。
在本发明的浏览器可以通过视频标签识别页面中的各个视频元素;所述视频标签比如<video>标签,比如<embed>标签中的type类型,如果其为视频类型即表明对应的元素为视频元素,或者判断该标签中的id=“flash”、“media”等值,也可判断元素为视频元素;比如<object>中type类型,如果其为视频类型即表明对应的元素为视频元素,或者判断该标签中的id,id=“flash”、“media”等值,也可判断元素为视频元素。
那么当存在多个视频元素时,提取视频元素的主题名称,然后生成弹出框,在弹出框中以所述主题名称生成选择项以供用户勾选,同时提示用户是否选择将某些视频元素进行窗口播放(可以理解为本发明实施例中的独立显示功能)功能。当用户勾选一个或者多个选项并确定后,则浏览器对于未选择的视频元素,则停止对其执行后续逻辑,对用户勾选的视频元素,则执行后续逻辑,可进入窗口播放模式。
优选地,在由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放之后,还包括:
子步骤A138,当侦听到鼠标悬停至所述窗口上时,触发对所述窗口中播放内容的暂停操作;当鼠标移出所述窗口上后,再继续播放所述视频内容。
在本发明实施例中,还可提供便捷的暂停和播放功能,即当在窗口侦听到鼠标悬停事件后,触发对所述窗口中播放内容的暂停操作;当鼠标移出所述视窗口后,再继续播放所述视频内容。
在实际中,页面刚加载完成时的初始视频元素中,存在播放/暂停按钮,本发明则将需要点击播放/暂停按钮的情况,修改为用户鼠标滑动至窗口的显示位置即可暂停视频,滑出所述窗口,视频继续播放。
优选地,在由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放之后,还包括:
子步骤A139,当在所述窗口上侦听到拖拽动作后,将所述窗口的显示位置的位置随着拖拽动作移动。
当在所述窗口侦听到onmousedown+onmousemove事件时,拖动窗口,不改变窗口的显示尺寸。在本发明实施例中,一般是在窗口的视频播放区域侦听到onmousedown+onmousemove事件时,窗口的位置随着拖拽变化而变化。
另外,当存在子步骤A1331,子步骤S134,子步骤S135,子步骤S138、子步骤S139中多个功能时,则可将窗口的显示区域根据上述功能的个数进行划分,每个区域接收到的鼠标悬停事件负责触发一个功能。
优选地,所述将所述视频元素中的视频内容放入所述窗口中播放之后,还包括:
子步骤S140,根据用户触发的滚动条事件,判断所述显示视窗中是否全部显示所述视频元素的初始显示位置;如果是,则关闭所述窗口,并将视频元素还原至初始显示位置进行播放。
即判断网页移动过程中,视频元素初始出现的显示区域是否进入浏览器显示视窗范围之内,如果进入,则关闭所述窗口,并将视频元素还原至初始显示位置进行播放。
优选地,对于有窗口模式的视频元素,所述将视频元素还原至初始显示位置进行播放,包括:
子步骤S1401,将视频元素对应的视频窗口的父窗口属性还原为当前页面窗口。
对于有窗口模式的视频元素,在其初始加载时,其视频元素对应的视频窗口,其父窗口属性为显示视窗。而本发明实施例在用户移动网页过程中,如果视频元素的初始显示位置部分进入或者全部进入浏览器显示视窗,则将所述视频窗口的父窗口属性改回显示视窗,那么视频元素的内容会回到原位置显示。
优选地,对于无窗口模式的视频元素,所述将视频元素还原至初始显示位置进行播放,包括:
子步骤S1402,停止接管所述视频内容的绘制输出函数,将对视频内容的输出位置还原至视频窗口的初始显示位置。
对于无窗口模式的视频元素,如前所述只需停止对所述视频内容的绘制输出函数的接管,将绘制输出函数的视频内容输出位置还原至视频元素初始的输出位置,即可使视频元素在网页的初始显示位置进行显示。
优选的,还包括:
步骤140,当检测用户切换到另外的标签页之后;所述标签页中加载网页文档为带有可播放的视频元素的特定网页;
即当用户从当前标签页切换至另外一个标签页之后,如果判断所述标签页加载网页文档也为带有可播放的视频元素的特定网页,那么可进入步骤142。
当然,本步骤判断所述标签页加载网页文档也为带有可播放的视频元素的特定网页与前述过程类似。
步骤142,若检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示;则直接挪用所述窗口,将所述视频元素设置在所述窗口中进行加载播放。
如果在新的标签页中检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示,则可共享前一标签页创建的窗口,不用新创建窗口,以前面创建的窗口为基础,所述视频元素设置在所述窗口中进行加载播放。
当然,检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示与前述过程类似。
优选地,所述直接挪用所述窗口包括:
子步骤1421,将所述窗口的父窗口设为切换后的标签页窗口。
在本发明中,将前一标签页的窗口的父窗口属性设置为切换后的标签页窗口,即切换后的浏览器显示视窗,则前一标签页的窗口可以被切换后的标签页使用。
在本发明实施例中,上述功能可以以插件/扩展的形式注入浏览器。当然,可以理解对于chrome浏览器,可以直接以浏览器逻辑写入代码中,也可以以插件/扩展的形式注入浏览器。对于IE浏览器,可以通过BHO(BrowserHelper Object,浏览器辅助对象)的形式注入浏览器。
本发明实施例,针对浏览器中当前加载网页文档为带有可播放的视频元素的特定网页,当检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示;由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放。由此解决了用户滑动页面时,当视频元素移出显示视窗之后,用户浏览网页中的信息时无法同时观看视频元素中的播放内容的问题,取得了可以在网页文档中视频元素的初始位置移出显示视窗之后,可使视频元素在独立于显示视窗中的新窗口中播放,使在用户浏览器网页中其他信息(比如视频评论、推荐视频等)时可以同时观看视频元素中的播放内容的有益效果。
实施例二
参照图2,其示出了本发明的一种网页中视频元素的播放方法,具体可以包括:
步骤210,确定出浏览器中当前加载网页文档为带有可播放的视频元素的特定网页;
步骤220,根据网页整体大小、滚动条的显示位置以及网页当前浏览器显示视窗的显示位置,确定滚动条的滚动距离与网页的滚动距离之间的滚动比例;
如图2A,为浏览器加载显示网页文档的示例;S212为浏览器显示视窗,S213为视频元素的显示窗口,S214为滚动条,S215为滚动槽,浏览器的其他部件在此省略。在本发明实施例中,图2A是网页文档加载完成后,用户还未被用户拖动时的初始状态示意图,即浏览器加载完网页文档,还未检测到任何onscroll事件。其中,S213所示窗口的当前的显示位置为视频元素的初始显示位置。
在浏览器的渲染引擎渲染HTML文档时,渲染后的页面的高度一般都会大于显示视窗S210的高度,而滚动条的滚动比例会根据页面的高度变化。所述滚动比例为滚动条每滚动1px页面滚动的Npx。N≥1的整数。
那么本发明可根据页面的高度a,显示视窗的高度b,滚动条的长度f计算所述滚动比例g,其计算公式可为g=a/(b-f)。即计算滚动在滚动槽中可滚动的长度与页面的高度之间的比例。
在本发明实施例中可以通过document.body.scrollHeight函数获取网页文档的高度,即a;可通过document.body.clientHeight函数获取显示视窗的高,即b,用GetScrollInfo函数获取滚动条的高,即c。
步骤230,获取所述视频元素显示位置中,在视频元素高度范围内的高度值到显示视窗顶部的距离阈值L;
在本发明实施例中,可以选择在视频元素的一部分被遮挡了,再以执行后续逻辑以小窗口的模式播放。即可以在视频元素的高q的范围内选择一个位置,计算什么时候开始进入窗口播放模式。
比如图2A中,选择在视频元素高的一半q/2处,即视频元素被遮挡了一半时即进入小窗模式,那么首先需要技术显示视窗顶部至视频元素q/2处的距离L。
在本发明实施例中,获取所述L的值有多种方法,比如通过getBoundingClientRect()方法获取视频元素左上角至显示视窗顶部的距离k,然后k+q/2=L。
步骤240,根据所述滚动比例和距离阈值L确定滚动条需要滚动的第一阈值;
在获得L后,只需要计算滚动条的滚动的第一阈值。比如滚动比例为1:10,即滚动条滚动1px,页面滚动10px,L=200px,那么L*1/10=20px,也即滚动条需要滚动20px。
步骤250,判断滚动条滚动的距离C是否达到第一阈值;当滚动条滚动的距离C达到第一阈值时,则判断出所述视频元素部分显示或者全部地未被显示。
如前述例子,当滚动条滚动了20px距离,即判断所述视频元素部分显示和/或全部地未被显示,达到需要进入小窗口播放模式的时刻,进入步骤260。如图2B所示,在此刻开始由步骤260进入小窗播放模式,即图2B中的小窗口S216中播放视频内容。只要用户在此刻一直往下滑动,小窗模式就一直存在。当判断视频元素还是全部的显示在显示视窗中时,则保持网页的初始展示状态。
在本发明实施例中可以通过onsroll事件刚触发时,获取滚动条的top属性p1(即距离页面顶部距离),然后在滚动过程中实时获取所述top属性p2,由p2-p1即可得知滚动条滚动距离。
当然,如果是在页面初始加载后,用户第一次触发onsroll事件,可以直接以top属性值作为滚动条滚动距离。
如果滚动条没滚动到20px。则判断所述不需要进入窗口播放模式,不进行步骤260。
步骤220-步骤250可以理解为实施例一中“根据视频元素的显示位置、显示视窗的显示位置、滚动条的显示位置、页面整体的大小属性,判断所述视频元素在当前浏览器显示视窗中部分显示和/或者全部地未被显示”的具体实施方式。
步骤260,判断出所述视频元素部分显示和/或全部地未被显示,则由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放。
在步骤250中,当滚动条滚动的距离C达到第一阈值时,即判断出所述视频元素部分显示和/或全部地未被显示。
进一步的,所述由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放之后,还包括:
步骤270,根据用户触发的滚动条事件,判断所述显示视窗中是否全部显示所述视频元素的初始显示位置;如果是,则关闭所述窗口,并将视频元素还原至初始显示位置进行播放。
优选地,获取所述视频元素显示位置中,在视频元素高度范围内的高度值到显示视窗顶部的距离阈值L包括:
子步骤231,在网页加载完成之后,用户初次触发滚动条事件时,计算所述距离阈值L。
在本发明实施例中,在网页加载完成后,用户未对网页做任何操作之前,所述视频元素显示位置中,在视频元素高度范围内的高度值到显示视窗顶部的距离阈值L是固定的。
此时,对于使用绝对定位的视频元素,其top值(视频元素顶部到网页顶部的距离),与视频元素顶部到显示视窗顶部的距离是一样的,因此可以直接获取视频元素的所述top值,加上选择的视频元素的触发高度,比如隐藏q/2时就进入开始进入窗口播放模式,那么L=top值+q/2;
然后L结合滚动比例计算第一阈值,在该步骤之后,可以分配很小的内存空间记录所述第一阈值,此时只需要获取滚动条的top属性,将滚动条的top属性,与记录的第一阈值进行比较即可判断是否进入窗口播放模式,或者判断从窗口播放模式还原为初始的网页样式。其计算速度快,不需要后续在计算滚动比例,L值,以及第一阈值。
在本发明实施例中还可设置L的其他值,比如L=top值,即视频元素顶部距离显示视窗顶部的距离,为判断显示视窗开始部分被显示。也可设置L=top值+q,即视频元素开始全部未被显示。在视频元素被判断为部分被全部显示时和/或全部未被显示时均可进入以图2B中S217将视频元素调整为窗口播放的模式。
本发明与实施例一类似的步骤原理类似,在此不再详述。本发明实施例与实施例一的类似步骤也可以挪用到本实施例中,具体原理不再详述。
本发明实施例可以选择视频元素未显示的部分有多少时,才进入窗口播放模式。
本发明实施例,针对浏览器中当前加载网页文档为带有可播放的视频元素的特定网页,当检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示;由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放。由此解决了用户滑动页面时,当视频元素移出显示视窗之后,用户浏览网页中的信息时无法同时观看视频元素中的播放内容的问题,取得了可以在网页文档中视频元素的初始位置移出显示视窗之后,可使视频元素在独立于显示视窗中的新窗口中播放,使在用户浏览器网页中其他信息(比如视频评论、推荐视频等)时可以同时观看视频元素中的播放内容的有益效果。
实施例三
参照图3,其示出了本发明的一种网页中视频元素的播放方法,具体可以包括:
步骤310,确定出浏览器中当前加载网页文档为带有可播放的视频元素的特定网页;
步骤320,根据网页整体大小、滚动条的显示位置以及网页当前浏览器显示视窗的显示位置,确定滚动条的滚动距离与网页的滚动距离之间的滚动比例;
步骤330,获取所述视频元素显示位置的顶部到显示视窗顶部的距离阈值A;
该距离阈值A即视频元素顶部至显示视窗顶部的距离。
步骤340,根据所述滚动比例和距离阈值A确定滚动条需要滚动的第二阈值;
步骤350,判断滚动条滚动的距离C是否达到第二阈值;当滚动条滚动的距离C达到第二阈值时,则判断出所述视频元素部分显示。
判断所述视频元素部分显示后,进入步骤360。
在图2A的基础上,本实施例变化至图3A,在视频元素底部与显示视窗顶部重合的时候,即进入小窗播放模式。其中浏览器加载显示网页文档的示例;S312为浏览器显示视窗,S313为原网页中视频元素的显示窗口,S314为滚动条,S315为滚动槽,浏览器的其他部件在此省略。此时会触发小窗口模式S316,只要用户在此刻一直往下滑动,小窗口模式就一直存在。当判断视频元素还是全部的显示在显示视窗中时,则保持网页的初始展示状态。
步骤320-步骤350可以理解为实施例一中“根据视频元素的显示位置、显示视窗的显示位置、滚动条的显示位置、页面整体的大小属性,判断所述视频元素在当前浏览器显示视窗中部分显示和/或者全部地未被显示”的具体实施方式。
步骤360,判断出所述视频元素部分显示,则由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放。
在步骤350中,当滚动条滚动的距离C达到第二阈值时,即判断出所述视频元素部分显示。
进一步的,所述由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放之后,还包括:
步骤370,根据用户触发的滚动条事件,判断所述显示视窗中是否全部显示所述视频元素的初始显示位置;如果是,则关闭所述窗口,并将视频元素还原至初始显示位置进行播放。
优选地,获取所述视频元素显示位置中,在视频元素高度范围内的高度值到显示视窗顶部的距离阈值A包括:
子步骤331,在网页加载完成之后,用户初次触发滚动条事件时,计算所述距离阈值A。
进一步的,根据用户触发的滚动条事件,判断所述显示视窗中是否全部显示所述视频元素的初始显示位置,包括:
子步骤332,当视频元素开始部分显示后,根据用户触发的滚动条事件,判断所述滚动条距离所述显示视窗顶部的距离是否小于所述第二阈值;如果小于所述第二阈值,判断所述显示视窗开始全部显示所述视频元素的初始显示位置;
在本发明实施例中,可在网页加载完成后,用户第一次触发onsroll事件之前就计算并记录所述第二阈值。那么后续的如果用户向上滑动网页,那么即可判断滚动条顶部距离显示视窗顶部的距离是否小于所述记录的第二阈值,即可判断视频元素的初始显示位置已经出现在显示视窗中,此时即可将视频元素还原至其初始的显示位置,停用窗口播放模式。
本发明与实施例一至实施例二类似的步骤原理类似,在此不再详述。本发明实施例与实施例一至实施例二的类似步骤也可以挪用到本实施例中,具体原理不再详述。
本发明实施例为视频元素开始进入未完全显示状态时即进入窗口播放模式的实施例。
本发明实施例,针对浏览器中当前加载网页文档为带有可播放的视频元素的特定网页,当检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示;由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放。由此解决了用户滑动页面时,当视频元素移出显示视窗之后,用户浏览网页中的信息时无法同时观看视频元素中的播放内容的问题,取得了可以在网页文档中视频元素的初始位置移出显示视窗之后,可使视频元素在独立于显示视窗中的新窗口中播放,使在用户浏览器网页中其他信息(比如视频评论、推荐视频等)时可以同时观看视频元素中的播放内容的有益效果。
实施例四
参照图4,其示出了本发明的一种网页中视频元素的播放方法,具体可以包括:
步骤410,确定出浏览器中当前加载网页文档为带有可播放的视频元素的特定网页;
步骤420,根据网页整体大小、滚动条的显示位置以及网页当前浏览器显示视窗的显示位置,确定滚动条的滚动距离与网页的滚动距离之间的滚动比例;
步骤420,根据网页整体大小、滚动条的显示位置以及网页当前浏览器显示视窗的显示位置,确定滚动条的滚动距离与网页的滚动距离之间的滚动比例;
步骤430,获取所述视频元素显示位置的顶部到显示视窗顶部的距离阈值B;
该距离阈值为视频元素顶部到显示视窗顶部的距离加上视频元素的高度。
步骤440;根据所述滚动比例和距离阈值B确定滚动条需要滚动的第三阈值;
步骤450,当滚动条滚动的距离C达到第三阈值时,则判断出所述视频元素全部地未被显示。
判断所述视频元素部分显示后,进入步骤460。
在图2A的基础上,本实施例变化至图4A,在视频元素顶部与显示视窗顶部重合的时候,即进入小窗播放模式。其中浏览器加载显示网页文档的示例;S412为浏览器显示视窗,S413为原网页中视频元素的显示窗口,S414为滚动条,S415为滚动槽,浏览器的其他部件在此省略。此时会触发小窗口模式S416,只要用户在此刻一直往下滑动,小窗模式就一直存在。
步骤420-步骤450可以理解为实施例一中“根据视频元素的显示位置、显示视窗的显示位置、滚动条的显示位置、页面整体的大小属性,判断所述视频元素在当前浏览器显示视窗中部分显示和/或者全部地未被显示”的具体实施方式。
步骤460,判断出所述视频元素全部地未被显示,则由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放。
在步骤450,中当滚动条滚动的距离C达到第三阈值时,即判断出所述视频元素全部地未被显示。
进一步的,所述由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放之后,还包括:
步骤470,根据用户触发的滚动条事件,判断所述显示视窗中是否全部显示所述视频元素的初始显示位置;如果是,则关闭所述窗口,并将视频元素还原至初始显示位置进行播放。
优选地,获取所述视频元素显示位置中,在视频元素高度范围内的高度值到显示视窗顶部的距离阈值B包括:
子步骤431,在网页加载完成之后,用户初次触发滚动条事件时,计算所述距离阈值B。
进一步的,根据用户触发的滚动条事件,判断所述显示视窗中是否全部显示所述视频元素的初始显示位置,包括:
子步骤432,当视频元素开始部分显示后,根据用户触发的滚动条事件,判断所述滚动条距离所述显示视窗顶部的距离是否小于所述第三阈值;如果小于所述第三阈值,判断所述显示视窗开始全部显示所述视频元素的初始显示位置;
在本发明实施例中,可在网页加载完成后,用户第一次触发onsroll事件之前就计算并记录所述第三阈值。那么后续的如果用户向上滑动网页,那么即可判断滚动条顶部距离显示视窗顶部的距离是否小于所述记录的第二阈值,即可判断视频元素的初始显示位置已经出现在显示视窗中,此时即可将视频元素还原至其初始的显示位置,停用窗口播放模式。
本发明与实施例一至实施例三类似的步骤原理类似,在此不再详述。本发明实施例与实施例一至实施例三的类似步骤也可以挪用到本实施例中,具体原理不再详述。
本发明实施例为视频元素开始进入完全未显示状态时即进入窗口播放模式的实施例。
本发明实施例,针对浏览器中当前加载网页文档为带有可播放的视频元素的特定网页,当检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示;由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放。由此解决了用户滑动页面时,当视频元素移出显示视窗之后,用户浏览网页中的信息时无法同时观看视频元素中的播放内容的问题,取得了可以在网页文档中视频元素的初始位置移出显示视窗之后,可使视频元素在独立于显示视窗中的新窗口中播放,使在用户浏览器网页中其他信息(比如视频评论、推荐视频等)时可以同时观看视频元素中的播放内容的有益效果。
实施例五
参照图5,其示出了本发明的一种网页中视频元素的播放方法,具体可以包括:
步骤510,针对浏览器获取的网页文档,判断所述网页文档是否为带有可播放的视频元素的特定网页;如果是,则进入步骤512;
步骤512,检测所述视频元素在当前浏览器显示视窗中是否部分显示和/或全部地未被显示;如果是,则进入步骤514;
步骤514,判断所述视频元素对应的视频窗口为有窗口模式还是无窗口模式;如果是有窗口模式,进入步骤516;如果是有窗口模式,进入步骤518;
步骤516,将所述视频元素对应的视频窗口的父窗口修改为所述窗口,使所述视频窗口嵌入所述窗口中进行播放;进入步骤520;
步骤518,接管视频内容的绘制输出函数,将对视频内容的输出位置更改为所述在所述窗口中输出;进入步骤520;
步骤520,根据用户触发的滚动条事件,判断所述显示视窗中是否全部显示所述视频元素的初始显示位置;如果是,则进入步骤522;如果否,则保持当前状态;
步骤522,关闭所述窗口,并将视频元素还原至初始显示位置进行播放。
本发明与实施例一至实施例四类似的步骤原理类似,在此不再详述。本发明实施例与实施例一至实施例四的类似步骤也可以挪用到本实施例中,具体原理不再详述。
当然,在上述实施例之外,所述显示控制脚本判断出所述视频元素在当前浏览器显示视窗中部分显示或者全部地未被显示还可包括:
通过获取视频元素距离网页文档顶部的距离了L1,通过document.body.scrollTop函数获取网页文档被卷去的高度L2,(也即网页隐藏的高度);当L1=L2,则视频元素开始进入部分显示阶段;和/或者,当L1<L2<L1+L3,其中L3为视频元素高度,则视频元素部分显示;和/或者当L2≥L1+L3,则视频元素进入视频元素完毕未被显示阶段。
实施例六
参照图6,其示出了本发明的一种网页中视频元素的播放装置,具体可以包括:
网页判断模块610,适于确定出浏览器中当前加载网页文档为带有可播放的视频元素的特定网页;
显示位置判断模块620,适于检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示;
窗口播放模块630,适于由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放。
优选地,所述网页判断模块610包括:
网址判断模块,适于针对当前网页文档对应的网址,根据以通配符构建的网址匹配规则和/或预置的网址名单,对所述网址进行匹配;当网址匹配上,则判断出所述网页文档为带有可播放的视频元素的特定网页。
优选地,所述网址判断模块包括:
网页模板判断模块,适于在网址匹配上之后,提取对应所述网址的网页架构模板,并利用所述网页架构模板对所述网页文档进行匹配;当所述网页文档与上述网页架构模板匹配上,则判断出所述网页文档为带有可播放的视频元素的特定网页。
优选地,还包括:
切换模块,适于当检测用户切换到另外的标签页之后;所述标签页中加载网页文档为带有可播放的视频元素的特定网页;
窗口共享模块,适于若检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示;则直接挪用所述窗口,将所述视频元素设置在所述窗口中进行加载播放。
优选地,所述窗口共享模块包括:包括:
窗口父子变更模块,适于在所述直接挪用所述窗口时,将所述窗口的父窗口设为切换后的标签页窗口。
优选地,所述显示位置判断模块630之后,还包括:
窗口模式判断模块,适于判断所述视频元素对应的视频窗口为有窗口模式还是无窗口模式
优选地,所述窗口播放模块630包括:
有窗模式播放模块,适于对于有窗口模式的视频元素,将所述视频元素对应的视频窗口的父窗口修改为所述窗口,使所述视频窗口嵌入所述窗口中进行播放。
优选地,所述窗口播放模块630包括:
无窗模式播放模块,适于对于无窗口模式的视频元素,接管视频内容的绘制输出函数,将对视频内容的输出位置更改为所述在所述窗口中输出。
优选地,所述绘制输出函数包括:
InvalidateRect函数,invalidateregion函数,forceredraw函数其中一个或者多个。
优选地,所述窗口模式判断模块包括:
第一窗口模式判断模块,适于通过网页文档中的<param>标签判断所述视频窗口为有窗口模式还是无窗口模式。
优选地,所述显示位置判断模块620包括:
第一显示位置判断模块,适于根据视频元素的显示位置、显示视窗的显示位置、滚动条的显示位置、页面整体的大小属性,判断所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示。
优选地,所述窗口播放模块630之后,还包括:
还原判断模块,适于根据用户触发的滚动条事件,判断所述显示视窗中是否全部显示所述视频元素的初始显示位置;适于如果是,则关闭所述窗口,并将视频元素还原至初始显示位置进行播放。
优选地,所述还原判断模块包括:
第一还原模块,适于对于有窗口模式的视频元素,将视频元素对应的视频窗口的父窗口属性还原为当前页面窗口。
优选地,所述还原判断模块包括:
第二还原模块,适于停止接管所述视频内容的绘制输出函数,将对视频内容的输出位置还原至视频窗口的初始显示位置。
优选地,所述窗口播放模块630包括:
按钮隐藏模块,适于将所述窗口中对应的视频元素的控制按钮隐藏。
优选地,在窗口播放模块630之后,还包括:
关联视频接口提模块,适于获取当前窗口中播放的视频内容的关联视频信息;当侦听到鼠标悬停至所述窗口上时,在窗口中显示供所述关联视频信息并提供点击接口。
优选地,在窗口播放模块630之后,还包括:
功能结构提供模块,适于当侦听到鼠标悬停至所述窗口上时,加载并展示针对当前视频内容的功能接口;所述功能接口包括下载接口、和/或分享接口、和/或收藏接口、和/或调用第三方视频播放软件播放所述视频内容接口。
优选地,在窗口播放模块630之后,还包括:
尺寸改变模块,适于当侦听到针对窗口的尺寸变更操作时,根据拖拽动作修改窗口的显示尺寸。
优选地,在显示位置判断模块620之前,还包括:
选择提示模块,适于判断当前网页中是否存在多个视频元素;如果存在,则提示用户选择进行小窗显示的播放元素并提供选择接口;对于用户未选择的播放元素,停止判断所述视频元素在当前浏览器显示视窗中是否部分显示和/或是否全部地未被显示。
优选地,在窗口播放模块630之后,还包括:
暂停模块,适于当侦听到鼠标悬停至所述视频元素显示位置时,触发对所述窗口中播放内容的暂停操作;当鼠标移出所述视频元素显示位置后,再继续播放所述视频内容。
优选地,在窗口播放模块630之后,还包括:
位置移动模块,适于当在所述窗口上侦听到拖拽动作后,将所述窗口的显示位置的位置随着拖拽动作移动。
实施例七
参照图7,其示出了本发明的一种网页中视频元素的播放装置,具体可以包括:
网页判断模块710,适于确定出浏览器中当前加载网页文档为带有可播放的视频元素的特定网页;
第一显示位置判断模块720,所述第一显示位置判断模块720包括;
第一滚动比例计算模块722,适于根据网页整体大小、滚动条的显示位置以及网页当前浏览器显示视窗的显示位置,确定滚动条的滚动距离与网页的滚动距离之间的滚动比例;
第一滚动距离获取模块724,适于获取所述视频元素显示位置中,在视频元素高度范围内的高度值到显示视窗顶部的距离阈值L;
第一滚动阈值确定模块726,适于根据所述滚动比例和距离阈值L确定滚动条需要滚动的第一阈值;
第一元素判断模块728,适于当滚动条滚动的距离C达到第一阈值时,则判断所述视频元素部分显示或者全部地未被显示。
窗口播放模块730,适于由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放。
优选地,所述窗口播放模块730之后,还包括:
还原判断模块,适于根据用户触发的滚动条事件,判断所述显示视窗中是否全部显示所述视频元素的初始显示位置;适于如果是,则关闭所述窗口,并将视频元素还原至初始显示位置进行播放。
实施例八
参照图8,其示出了本发明的一种网页中视频元素的播放装置,具体可以包括:
网页判断模块810,适于确定出浏览器中当前加载网页文档为带有可播放的视频元素的特定网页;
第一显示位置判断模块820,所述第一显示位置判断模块820包括;
第二滚动比例计算模块822,适于根据网页整体大小、滚动条的显示位置以及网页当前浏览器显示视窗的显示位置,确定滚动条的滚动距离与网页的滚动距离之间的滚动比例;
第二滚动距离获取模块824,适于获取所述视频元素显示位置的顶部到显示视窗顶部的距离阈值A;
优选地,所述第二滚动距离获取模块824包括:
第一触发计算模块,适于在网页加载完成之后,用户初次触发滚动条事件时,计算所述距离阈值A。
第二滚动阈值确定模块826,适于根据所述滚动比例和距离阈值A确定滚动条需要滚动的第二阈值;
部分显示判断模块828,适于当滚动条滚动的距离C达到第二阈值时,则判断所述视频元素部分显示。
窗口播放模块830,适于由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放。
优选地,所述窗口播放模块830之后,还包括:
还原判断模块,适于根据用户触发的滚动条事件,判断所述显示视窗中是否全部显示所述视频元素的初始显示位置;适于如果是,则关闭所述窗口,并将视频元素还原至初始显示位置进行播放。
优选地,所述还原判断模块包括:
第一还原判断模块,适于当视频元素开始部分显示后,根据用户触发的滚动条事件,判断所述滚动条距离所述显示视窗顶部的距离是否小于所述第二阈值;如果小于所述第二阈值,判断所述显示视窗开始全部显示所述视频元素的初始显示位置;
实施例九
参照图9,其示出了本发明的一种网页中视频元素的播放装置,具体可以包括:
网页判断模块910,适于确定出浏览器中当前加载网页文档为带有可播放的视频元素的特定网页;
第一显示位置判断模块920,所述第一显示位置判断模块920包括;
第三滚动比例计算模块922,适于根据网页整体大小、滚动条的显示位置以及网页当前浏览器显示视窗的显示位置,确定滚动条的滚动距离与网页的滚动距离之间的滚动比例;
第三滚动距离获取模块924,适于获取所述视频元素显示位置的顶部到显示视窗顶部的距离阈值B;
优选地,所述第二滚动距离获取模块924包括:
第一触发计算模块,适于在网页加载完成之后,用户初次触发滚动条事件时,计算所述距离阈值B。
第三滚动距离获取模块926,适于获取所述视频元素显示位置的底部到显示视窗顶部的距离阈值B;
全部未显示判断模块928,适于当滚动条滚动的距离C达到第三阈值时,则判断所述视频元素部分显示。
窗口播放模块930,适于由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放。
优选地,所述显示位置更改模块930之后,还包括:
还原判断模块,适于根据用户触发的滚动条事件,判断所述显示视窗中是否全部显示所述视频元素的初始显示位置;适于如果是,则关闭所述窗口,并将视频元素还原至初始显示位置进行播放。
优选地,所述还原判断模块包括:
第一还原判断模块,适于当视频元素开始部分显示后,根据用户触发的滚动条事件,判断所述滚动条距离所述显示视窗顶部的距离是否小于所述第三阈值;如果小于所述第三阈值,判断所述显示视窗开始全部显示所述视频元素的初始显示位置;
实施例十
参照图10,其示出了本发明的一种网页中视频元素的播放装置,具体可以包括:
特定网页判断模块1010,适于针对浏览器获取的网页文档,判断所述网页文档是否为带有可播放的视频元素的特定网页;如果是,则进入视频元素显示检测模块1012;
视频元素显示检测模块1012,适于检测所述视频元素在当前浏览器显示视窗中是否部分显示和/或全部地未被显示;如果是,则进入元素窗口模式判断模块1014;
元素窗口模式判断模块1014,判断所述视频元素对应的视频窗口为有窗口模式还是无窗口模式;如果是有窗口模式,进入有窗口修改模块1016;如果是有窗口模式,进入无窗口修改模块1018;
有窗口修改模块1016,适于将所述视频元素对应的视频窗口的父窗口修改为所述窗口,使所述视频窗口嵌入所述窗口中进行播放;进入还原判断模块1020;
无窗口修改模块1018,适于接管视频内容的绘制输出函数,将对视频内容的输出位置更改为所述在所述窗口中输出;进入还原判断模块1020;
还原判断模块1020,适于根据用户触发的滚动条事件,判断所述显示视窗中是否全部显示所述视频元素的初始显示位置;如果是,则进入还原模块1022;如果否,则保持当前状态;
还原模块1022,关闭所述窗口,并将视频元素还原至初始显示位置进行播放。
在此提供的算法和显示不与任何特定计算机、虚拟系统或其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述,构造这类系统所要求的结构是显而易见的。此外,本发明也不针对任何特定编程语言。应当明白,可以利用各种编程语言实现在此描述的本发明的内容,并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。
在此处所提供的说明书中,说明了大量具体细节。然而,能够理解,本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中,并未详细示出公知的方法、结构和技术,以便不模糊对本说明书的理解。
类似地,应当理解,为了精简本公开并帮助理解各个发明方面中的一个或多个,在上面对本发明的示例性实施例的描述中,本发明的各个特征有时被一起分组到单个实施例、图、或对其的描述中。然而,并不应将该公开的方法解释成反映如下意图:即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说,如下面的权利要求书所反映的那样,发明方面在于少于前面公开的单个实施例的所有特征。因此,遵循具体实施方式的权利要求书由此明确地并入该具体实施方式,其中每个权利要求本身都作为本发明的单独实施例。
本领域那些技术人员可以理解,可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件,以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或单元中的至少一些是相互排斥之外,可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或设备的所有过程或单元进行组合。除非另外明确陈述,本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。
此外,本领域的技术人员能够理解,尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征,但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如,在下面的权利要求书中,所要求保护的实施例的任意之一都可以以任意的组合方式来使用。
本发明的各个部件实施例可以以硬件实现,或以在一个或多个处理器上运行的软件模块实现,或以它们的组合实现。本领域的技术人员应当理解,可以在实践中使用微处理器或数字信号处理器(DSP)来实现根据本发明实施例的网页中视频元素的播放设备中的一些或全部部件的一些或全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或全部地设备或装置程序(例如,计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上,或可以具有一个或多个信号的形式。这样的信号可以从因特网网站上下载得到,或在载体信号上提供,或以任何其他形式提供。
应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制,并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中,不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中,这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。
本发明公开了A1、一种网页中视频元素的播放方法,包括:
确定出浏览器中当前加载网页文档为带有可播放的视频元素的特定网页;
检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示;
由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放。
A2、如A1所述的方法,所述判断出所述网页文档为带有可播放的视频元素的特定网页包括:
针对当前网页文档对应的网址,根据以通配符构建的网址匹配规则和/或预置的网址名单,对所述网址进行匹配;当网址匹配上,则判断出所述网页文档为带有可播放的视频元素的特定网页。
A3、如A2所述的方法,在网址匹配上之后,包括:
提取对应所述网址的网页架构模板,并利用所述网页架构模板对所述网页文档进行匹配;当所述网页文档与上述网页架构模板匹配上,则判断出所述网页文档为带有可播放的视频元素的特定网页。
A4、如A1所述的方法,还包括:
当检测用户切换到另外的标签页之后;所述标签页中加载网页文档为带有可播放的视频元素的特定网页;
若检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示;则直接挪用所述窗口,将所述视频元素设置在所述窗口中进行加载播放。
A5、如A1所述的方法,所述直接挪用所述窗口包括:
将所述窗口的父窗口设为切换后的标签页窗口。
A6、如A1或A4所述的方法,在检测到所述视频元素部分显示和/或全部地未被显示之后还包括:
判断所述视频元素对应的视频窗口为有窗口模式还是无窗口模式。
A7、如A6所述的方法,所述将所述视频元素中的视频内容放入所述窗口中播放包括:
对于有窗口模式的视频元素,将所述视频元素对应的视频窗口的父窗口修改为所述窗口,使所述视频窗口嵌入所述窗口中进行播放。
A8、如A6所述的方法,所述将所述视频元素中的视频内容放入所述窗口中播放包括:
对于无窗口模式的视频元素,接管视频内容的绘制输出函数,将对视频内容的输出位置更改为所述在所述窗口中输出。
A9、如A8所述的方法,所述绘制输出函数包括:
InvalidateRect函数,invalidateregion函数,forceredraw函数其中一个或者多个。
A10、如A6所述的方法,所述判断所述视频元素对应的视频窗口为有窗口模式还是无窗口模式,包括:
通过网页文档中的<param>标签判断所述视频窗口为有窗口模式还是无窗口模式。
A11、如A1所述的方法,所述检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示,包括:
根据视频元素的显示位置、显示视窗的显示位置、滚动条的显示位置、页面整体的大小属性,判断所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示。
A12、如A11所述的方法,根据视频元素的显示位置、显示视窗的显示位置、滚动条的显示位置、页面整体的大小属性,判断所述视频元素在当前浏览器显示视窗中部分显示和/或者全部地未被显示包括:
根据网页整体大小、滚动条的显示位置以及网页当前浏览器显示视窗的显示位置,确定滚动条的滚动距离与网页的滚动距离之间的滚动比例;
获取所述视频元素显示位置中,在视频元素高度范围内的高度值到显示视窗顶部的距离阈值L;
根据所述滚动比例和距离阈值L确定滚动条需要滚动的第一阈值;
当滚动条滚动的距离C达到第一阈值时,则判断所述视频元素部分显示或者全部地未被显示。
A13、如A11所述的方法,根据视频元素的显示位置、显示视窗的显示位置、滚动条的显示位置、页面整体的大小属性,判断所述视频元素在当前浏览器显示视窗中部分显示包括:
根据网页整体大小、滚动条的显示位置以及网页当前浏览器显示视窗的显示位置,确定滚动条的滚动距离与网页的滚动距离之间的滚动比例;
获取所述视频元素显示位置的顶部到显示视窗顶部的距离阈值A;
根据所述滚动比例和距离阈值A确定滚动条需要滚动的第一阈值,当滚动条滚动的距离C达到第一阈值时,则判断所述视频元素部分显示。
A14、如A11所述的方法,根据视频元素的显示位置、显示视窗的显示位置、滚动条的显示位置、页面整体的大小,判断所述视频元素在当前浏览器显示视窗中全部地未被显示包括:
根据网页整体大小属性、滚动条的显示位置以及网页当前浏览器显示视窗的显示位置,确定滚动条的滚动距离与网页的滚动距离之间的滚动比例;
获取所述视频元素显示位置的底部到显示视窗顶部的距离阈值B;
根据所述滚动比例和距离阈值B确定滚动条需要滚动的第一阈值,当滚动条滚动的距离C达到第一阈值时,则判断所述视频元素全部地未被显示。
A15、如A13所述的方法,获取所述视频元素显示位置的顶部到显示视窗顶部的距离阈值A包括:
在网页加载完成之后,用户初次触发滚动条事件时,计算所述距离阈值A。
A16、如A14所述的方法,所述获取所述视频元素显示位置的顶部到显示视窗顶部的距离阈值B包括:
在网页加载完成之后,用户初次触发滚动条事件时,计算所述距离阈值B。
A17、如权利要A1、A13、A14其中之一所述的方法,所述将所述视频元素中的视频内容放入所述窗口中播放之后,还包括:
根据用户触发的滚动条事件,判断所述显示视窗中是否全部显示所述视频元素的初始显示位置;如果是,则关闭所述窗口,并将视频元素还原至初始显示位置进行播放。
A18、如A17所述的方法,根据用户触发的滚动条事件,判断所述显示视窗中是否全部显示所述视频元素的初始显示位置,包括:
当视频元素开始部分显示后,根据用户触发的滚动条事件,判断所述滚动条距离所述显示视窗顶部的距离是否小于所述距离阈值A;如果小于距离阈值A,判断所述显示视窗开始全部显示所述视频元素的初始显示位置;
或,当视频元素开始全部地不被显示后,根据用户触发的滚动条事件,判断所述滚动条距离所述显示视窗顶部的距离是否小于所述距离阈值B;如果小于距离阈值B,判断所述显示视窗开始全部显示所述视频元素的初始显示位置。
A19、如A17所述的方法,对于有窗口模式的视频元素,所述将视频元素还原至初始显示位置进行播放,包括:
将视频元素对应的视频窗口的父窗口属性还原为当前页面窗口。
A20、如A17所述的方法,对于无窗口模式的视频元素,所述将视频元素还原至初始显示位置进行播放,包括:
停止接管所述视频内容的绘制输出函数,将对视频内容的输出位置还原至视频窗口的初始显示位置。
A21、如A1所述的方法,所述由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放包括:
将所述窗口中对应的视频元素的控制按钮隐藏。
A22、如A1所述的方法,在由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放之后,还包括:
获取当前窗口中播放的视频内容的关联视频信息;当侦听到鼠标悬停至所述窗口上时,在窗口中显示供所述关联视频信息并提供点击接口。
A23、如A1所述的方法,在由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放之后,还包括:
当侦听到鼠标悬停至所述窗口上时,加载并展示针对当前视频内容的功能接口;所述功能接口包括下载接口、和/或分享接口、和/或收藏接口、和/或调用第三方视频播放软件播放所述视频内容接口。
A24、如A1所述的方法,在由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放之后,还包括:
当侦听到针对窗口的尺寸变更操作时,根据拖拽动作修改窗口的显示尺寸。
A25、如A1所述的方法,在检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示之前,还包括:
判断当前网页中是否存在多个视频元素;如果存在,则提示用户选择进行小窗显示的播放元素并提供选择接口;对于用户未选择的播放元素,停止判断所述视频元素在当前浏览器显示视窗中是否部分显示和/或是否全部地未被显示。
A26、如A1所述的方法,在由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放之后,还包括:
当侦听到鼠标悬停至所述窗口上时,触发对所述窗口中播放内容的暂停操作;当鼠标移出所述窗口上后,再继续播放所述视频内容。
A27、如A1所述的方法,在由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放之后,还包括:
当在所述窗口上侦听到拖拽动作后,将所述窗口的显示位置的位置随着拖拽动作移动。
本发明公开了B28、一种网页中视频元素的播放装置,包括:
网页判断模块,适于确定出浏览器中当前加载网页文档为带有可播放的视频元素的特定网页;
显示位置判断模块,适于检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示;
窗口播放模块,适于由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放。
B29、如B28所述的装置,所述网页判断模块包括:
网址判断模块,适于针对当前网页文档对应的网址,根据以通配符构建的网址匹配规则和/或预置的网址名单,对所述网址进行匹配;当网址匹配上,则判断出所述网页文档为带有可播放的视频元素的特定网页。
B30、如B29所述的装置,所述网址判断模块包括:
网页模板判断模块,适于在网址匹配上之后,提取对应所述网址的网页架构模板,并利用所述网页架构模板对所述网页文档进行匹配;当所述网页文档与上述网页架构模板匹配上,则判断出所述网页文档为带有可播放的视频元素的特定网页。
B31、如B28所述的装置,还包括:
切换模块,适于当检测用户切换到另外的标签页之后;所述标签页中加载网页文档为带有可播放的视频元素的特定网页;
窗口共享模块,适于若检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示;则直接挪用所述窗口,将所述视频元素设置在所述窗口中进行加载播放。
B32、如B28所述的装置,所述窗口共享模块包括:包括:
窗口父子变更模块,适于在所述直接挪用所述窗口时,将所述窗口的父窗口设为切换后的标签页窗口。
B33、如B28或B31所述的装置,所述显示位置判断模块之后,还包括:
窗口模式判断模块,适于判断所述视频元素对应的视频窗口为有窗口模式还是无窗口模式
B34、如B33所述的装置,所述窗口播放模块包括:
有窗模式播放模块,适于对于有窗口模式的视频元素,将所述视频元素对应的视频窗口的父窗口修改为所述窗口,使所述视频窗口嵌入所述窗口中进行播放。
B35、如B33所述的装置,所述窗口播放模块包括:
无窗模式播放模块,适于对于无窗口模式的视频元素,接管视频内容的绘制输出函数,将对视频内容的输出位置更改为所述在所述窗口中输出。
B36、如B35所述的装置,所述绘制输出函数包括:
InvalidateRect函数,invalidateregion函数,forceredraw函数其中一个或者多个。
B37、如B33所述的装置,所述窗口模式判断模块包括:
第一窗口模式判断模块,适于通过网页文档中的<param>标签判断所述视频窗口为有窗口模式还是无窗口模式。
B38、如B28所述的装置,所述显示位置判断模块包括:
第一显示位置判断模块,适于根据视频元素的显示位置、显示视窗的显示位置、滚动条的显示位置、页面整体的大小属性,判断所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示。
B39、如B38所述的装置,所述第一显示位置判断模块包括:
第一滚动比例计算模块,适于根据网页整体大小、滚动条的显示位置以及网页当前浏览器显示视窗的显示位置,确定滚动条的滚动距离与网页的滚动距离之间的滚动比例;
第一滚动距离获取模块,适于获取所述视频元素显示位置中,在视频元素高度范围内的高度值到显示视窗顶部的距离阈值L;
第一滚动阈值确定模块,适于根据所述滚动比例和距离阈值L确定滚动条需要滚动的第一阈值;
第一元素判断模块,适于当滚动条滚动的距离C达到第一阈值时,则判断所述视频元素部分显示或者全部地未被显示。
B40、如B38所述的装置,所述第一显示位置判断模块包括:
第二滚动比例计算模块,适于根据网页整体大小、滚动条的显示位置以及网页当前浏览器显示视窗的显示位置,确定滚动条的滚动距离与网页的滚动距离之间的滚动比例;
第二滚动距离获取模块,适于获取所述视频元素显示位置的顶部到显示视窗顶部的距离阈值A;
第二滚动阈值确定模块,适于根据所述滚动比例和距离阈值A确定滚动条需要滚动的第二阈值;
部分显示判断模块,适于当滚动条滚动的距离C达到第二阈值时,则判断所述视频元素部分显示。
B41、如B38所述的装置,所述显示位置判断模块包括:
第三滚动距离获取模块,适于根据网页整体大小属性、滚动条的显示位置以及网页当前浏览器显示视窗的显示位置,确定滚动条的滚动距离与网页的滚动距离之间的滚动比例;
第三滚动距离获取模块,适于获取所述视频元素显示位置的底部到显示视窗顶部的距离阈值B;
第三滚动阈值确定模块,适于根据所述滚动比例和距离阈值B确定滚动条需要滚动的第三阈值;
全部未显示判断模块,适于当滚动条滚动的距离C达到第三阈值时,则判断所述视频元素全部地未被显示。
B42、如B40所述的装置,所述第一滚动距离获取模块包括:
第一触发计算模块,适于在网页加载完成之后,用户初次触发滚动条事件时,计算所述距离阈值A。
B43、如B41所述的装置,所述第二滚动距离获取模块包括:
第二触发计算模块,适于在网页加载完成之后,用户初次触发滚动条事件时,计算所述距离阈值B。
B44、如B28、B40或B41其中之一所述的装置,所述窗口播放模块之后,还包括:
还原判断模块,适于根据用户触发的滚动条事件,判断所述显示视窗中是否全部显示所述视频元素的初始显示位置;适于如果是,则关闭所述窗口,并将视频元素还原至初始显示位置进行播放。
B45、如B44所述的方法,所述还原判断模块包括:
第一还原判断模块,适于当视频元素开始部分显示后,根据用户触发的滚动条事件,判断所述滚动条距离所述显示视窗顶部的距离是否小于所述距离阈值A;如果小于距离阈值A,判断所述显示视窗开始全部显示所述视频元素的初始显示位置;
或,第二还原判断模块,适于当视频元素开始全部地不被显示后,根据用户触发的滚动条事件,判断所述滚动条距离所述显示视窗顶部的距离是否小于所述距离阈值B;如果小于距离阈值B,判断所述显示视窗开始全部显示所述视频元素的初始显示位置。
B46、如B45所述的装置,所述还原判断模块包括:
第一还原模块,适于对于有窗口模式的视频元素,将视频元素对应的视频窗口的父窗口属性还原为当前页面窗口。
B47、如B45所述的装置,所述还原判断模块包括:
第二还原模块,适于停止接管所述视频内容的绘制输出函数,将对视频内容的输出位置还原至视频窗口的初始显示位置。
B48、如B28所述的装置,所述窗口播放模块包括:
按钮隐藏模块,适于将所述窗口中对应的视频元素的控制按钮隐藏。
B49、如B28所述的装置,在窗口播放模块之后,还包括:
关联视频接口提模块,适于获取当前窗口中播放的视频内容的关联视频信息;当侦听到鼠标悬停至所述窗口上时,在窗口中显示供所述关联视频信息并提供点击接口。
B50、如B28所述的装置,在窗口播放模块之后,还包括:
功能结构提供模块,适于当侦听到鼠标悬停至所述窗口上时,加载并展示针对当前视频内容的功能接口;所述功能接口包括下载接口、和/或分享接口、和/或收藏接口、和/或调用第三方视频播放软件播放所述视频内容接口。
B51、如B28所述的装置,在窗口播放模块之后,还包括:
尺寸改变模块,适于当侦听到针对窗口的尺寸变更操作时,根据拖拽动作修改窗口的显示尺寸。
B52、如B28所述的装置,在显示位置判断模块之前,还包括:
选择提示模块,适于判断当前网页中是否存在多个视频元素;如果存在,则提示用户选择进行小窗显示的播放元素并提供选择接口;对于用户未选择的播放元素,停止判断所述视频元素在当前浏览器显示视窗中是否部分显示和/或是否全部地未被显示。
B53、如B28所述的装置,在窗口播放模块之后,还包括:
暂停模块,适于当侦听到鼠标悬停至所述视频元素显示位置时,触发对所述窗口中播放内容的暂停操作;当鼠标移出所述视频元素显示位置后,再继续播放所述视频内容。
B54、如B28所述的装置,在窗口播放模块之后,还包括:
位置移动模块,适于当在所述窗口上侦听到拖拽动作后,将所述窗口的显示位置的位置随着拖拽动作移动。
Claims (10)
1.一种网页中视频元素的播放方法,包括:
确定出浏览器中当前加载网页文档为带有可播放的视频元素的特定网页;
检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示;
由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放。
2.如权利要求1所述的方法,其特征在于,所述判断出所述网页文档为带有可播放的视频元素的特定网页包括:
针对当前网页文档对应的网址,根据以通配符构建的网址匹配规则和/或预置的网址名单,对所述网址进行匹配;当网址匹配上,则判断出所述网页文档为带有可播放的视频元素的特定网页。
3.如权利要求2所述的方法,其特征在于,在网址匹配上之后,包括:
提取对应所述网址的网页架构模板,并利用所述网页架构模板对所述网页文档进行匹配;当所述网页文档与上述网页架构模板匹配上,则判断出所述网页文档为带有可播放的视频元素的特定网页。
4.如权利要求1所述的方法,其特征在于,还包括:
当检测用户切换到另外的标签页之后;所述标签页中加载网页文档为带有可播放的视频元素的特定网页;
若检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示;则直接挪用所述窗口,将所述视频元素设置在所述窗口中进行加载播放。
5.如权利要求1所述的方法,其特征在于,所述直接挪用所述窗口包括:
将所述窗口的父窗口设为切换后的标签页窗口。
6.如权利要求1或4所述的方法,其特征在于,在检测到所述视频元素部分显示和/或全部地未被显示之后还包括:
判断所述视频元素对应的视频窗口为有窗口模式还是无窗口模式。
7.如权利要求6所述的方法,其特征在于,所述将所述视频元素中的视频内容放入所述窗口中播放包括:
对于有窗口模式的视频元素,将所述视频元素对应的视频窗口的父窗口修改为所述窗口,使所述视频窗口嵌入所述窗口中进行播放。
8.如权利要求6所述的方法,其特征在于,所述将所述视频元素中的视频内容放入所述窗口中播放包括:
对于无窗口模式的视频元素,接管视频内容的绘制输出函数,将对视频内容的输出位置更改为所述在所述窗口中输出。
9.如权利要求8所述的方法,其特征在于,所述绘制输出函数包括:
InvalidateRect函数,invalidateregion函数,forceredraw函数其中一个或者多个。
10.一种网页中视频元素的播放装置,包括:
网页判断模块,适于确定出浏览器中当前加载网页文档为带有可播放的视频元素的特定网页;
显示位置判断模块,适于检测到所述视频元素在当前浏览器显示视窗中部分显示和/或全部地未被显示;
窗口播放模块,适于由浏览器在当前页面视窗上方创建一窗口,将所述视频元素设置在所述窗口中进行加载播放。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201410523186.9A CN104268251A (zh) | 2014-09-30 | 2014-09-30 | 一种网页中视频元素的播放方法和装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201410523186.9A CN104268251A (zh) | 2014-09-30 | 2014-09-30 | 一种网页中视频元素的播放方法和装置 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN104268251A true CN104268251A (zh) | 2015-01-07 |
Family
ID=52159772
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201410523186.9A Pending CN104268251A (zh) | 2014-09-30 | 2014-09-30 | 一种网页中视频元素的播放方法和装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN104268251A (zh) |
Cited By (24)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN105468240A (zh) * | 2015-12-29 | 2016-04-06 | 北京金山安全软件有限公司 | 一种多媒体内容展示方法及装置 |
CN105791947A (zh) * | 2016-04-21 | 2016-07-20 | 腾讯科技(深圳)有限公司 | 一种视频播放方法及装置 |
CN105892900A (zh) * | 2015-12-09 | 2016-08-24 | 乐视网信息技术(北京)股份有限公司 | 视频操作方法及客户端 |
CN105930059A (zh) * | 2016-04-20 | 2016-09-07 | 网易(杭州)网络有限公司 | 一种移动终端的显示方法和装置 |
CN106020590A (zh) * | 2016-05-09 | 2016-10-12 | 腾讯科技(深圳)有限公司 | 视图显示方法及装置 |
WO2017113854A1 (zh) * | 2015-12-31 | 2017-07-06 | 乐视控股(北京)有限公司 | 多路视频流播放的方法及装置 |
CN107241657A (zh) * | 2017-07-06 | 2017-10-10 | 广州优视网络科技有限公司 | 视频播放方法、装置、计算设备以及存储介质 |
CN107295415A (zh) * | 2016-04-12 | 2017-10-24 | 百度在线网络技术(北京)有限公司 | 视频播放方法和装置 |
CN107454456A (zh) * | 2017-09-06 | 2017-12-08 | 武汉斗鱼网络科技有限公司 | 一种浮层元素的管理控制方法及系统 |
CN107728997A (zh) * | 2017-10-31 | 2018-02-23 | 万兴科技股份有限公司 | 一种视频播放器渲染系统 |
CN107783714A (zh) * | 2017-10-13 | 2018-03-09 | 北京金山安全软件有限公司 | 一种页面展示方法、装置、电子设备及存储介质 |
CN107977130A (zh) * | 2017-12-06 | 2018-05-01 | 福建中金在线信息科技有限公司 | Flash播放器的交互方法、装置及服务器 |
CN108712676A (zh) * | 2018-05-30 | 2018-10-26 | 浙江口碑网络技术有限公司 | 基于React框架实现的视频自动播放方法及装置 |
CN109756772A (zh) * | 2019-01-16 | 2019-05-14 | 上海哔哩哔哩科技有限公司 | 视频播放方法、装置及存储介质 |
CN109947981A (zh) * | 2017-10-30 | 2019-06-28 | 上海全土豆文化传播有限公司 | 视频分享方法及装置 |
WO2019128307A1 (zh) * | 2017-12-29 | 2019-07-04 | 浙江宇视科技有限公司 | 窗口管理方法 |
CN110134451A (zh) * | 2018-02-08 | 2019-08-16 | 腾讯科技(深圳)有限公司 | 数据显示方法和装置、存储介质及电子装置 |
WO2019179264A1 (zh) * | 2018-03-22 | 2019-09-26 | 杭州海康威视数字技术股份有限公司 | 一种视频播放方法、装置、电子设备及存储介质 |
CN110971955A (zh) * | 2018-09-30 | 2020-04-07 | 北京京东尚科信息技术有限公司 | 页面处理方法及装置、电子设备以及存储介质 |
CN112711367A (zh) * | 2020-12-14 | 2021-04-27 | 海看网络科技(山东)股份有限公司 | 一种iptv中网页防止加载播放器崩溃的方法 |
WO2021189712A1 (zh) * | 2020-03-23 | 2021-09-30 | 青岛海信传媒网络技术有限公司 | 网页视频全屏播放切换小窗口播放的方法及显示设备 |
CN113760273A (zh) * | 2020-08-31 | 2021-12-07 | 北京沃东天骏信息技术有限公司 | 页面控制方法和页面控制装置 |
WO2022062898A1 (zh) * | 2020-09-28 | 2022-03-31 | 华为技术有限公司 | 一种窗口显示方法及设备 |
CN115175002A (zh) * | 2022-06-28 | 2022-10-11 | 青岛海信移动通信技术股份有限公司 | 一种视频播放方法及设备 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101072164A (zh) * | 2007-05-29 | 2007-11-14 | 腾讯科技(深圳)有限公司 | 一种网络广告的显示方法及系统 |
CN102117290A (zh) * | 2009-12-30 | 2011-07-06 | 北京搜狗科技发展有限公司 | 一种展现网页中页面元素的方法及系统 |
CN102117291A (zh) * | 2009-12-30 | 2011-07-06 | 北京搜狗科技发展有限公司 | 一种展现网络资源的方法及系统 |
CN103986962A (zh) * | 2014-06-03 | 2014-08-13 | 合一网络技术(北京)有限公司 | 显示悬浮式播放窗口的方法和系统 |
-
2014
- 2014-09-30 CN CN201410523186.9A patent/CN104268251A/zh active Pending
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101072164A (zh) * | 2007-05-29 | 2007-11-14 | 腾讯科技(深圳)有限公司 | 一种网络广告的显示方法及系统 |
CN102117290A (zh) * | 2009-12-30 | 2011-07-06 | 北京搜狗科技发展有限公司 | 一种展现网页中页面元素的方法及系统 |
CN102117291A (zh) * | 2009-12-30 | 2011-07-06 | 北京搜狗科技发展有限公司 | 一种展现网络资源的方法及系统 |
CN103986962A (zh) * | 2014-06-03 | 2014-08-13 | 合一网络技术(北京)有限公司 | 显示悬浮式播放窗口的方法和系统 |
Cited By (35)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN105892900A (zh) * | 2015-12-09 | 2016-08-24 | 乐视网信息技术(北京)股份有限公司 | 视频操作方法及客户端 |
CN105468240A (zh) * | 2015-12-29 | 2016-04-06 | 北京金山安全软件有限公司 | 一种多媒体内容展示方法及装置 |
WO2017113854A1 (zh) * | 2015-12-31 | 2017-07-06 | 乐视控股(北京)有限公司 | 多路视频流播放的方法及装置 |
CN107295415A (zh) * | 2016-04-12 | 2017-10-24 | 百度在线网络技术(北京)有限公司 | 视频播放方法和装置 |
CN107295415B (zh) * | 2016-04-12 | 2020-09-25 | 百度在线网络技术(北京)有限公司 | 视频播放方法和装置 |
CN105930059A (zh) * | 2016-04-20 | 2016-09-07 | 网易(杭州)网络有限公司 | 一种移动终端的显示方法和装置 |
CN105791947A (zh) * | 2016-04-21 | 2016-07-20 | 腾讯科技(深圳)有限公司 | 一种视频播放方法及装置 |
CN106020590A (zh) * | 2016-05-09 | 2016-10-12 | 腾讯科技(深圳)有限公司 | 视图显示方法及装置 |
CN106020590B (zh) * | 2016-05-09 | 2021-01-22 | 腾讯科技(深圳)有限公司 | 视图显示方法及装置 |
WO2019007327A1 (zh) * | 2017-07-06 | 2019-01-10 | 广州优视网络科技有限公司 | 视频播放方法、装置、计算设备以及存储介质 |
CN107241657A (zh) * | 2017-07-06 | 2017-10-10 | 广州优视网络科技有限公司 | 视频播放方法、装置、计算设备以及存储介质 |
CN107454456A (zh) * | 2017-09-06 | 2017-12-08 | 武汉斗鱼网络科技有限公司 | 一种浮层元素的管理控制方法及系统 |
CN107783714B (zh) * | 2017-10-13 | 2021-03-23 | 北京乐蜜科技有限责任公司 | 一种页面展示方法、装置、电子设备及存储介质 |
CN107783714A (zh) * | 2017-10-13 | 2018-03-09 | 北京金山安全软件有限公司 | 一种页面展示方法、装置、电子设备及存储介质 |
CN109947981A (zh) * | 2017-10-30 | 2019-06-28 | 上海全土豆文化传播有限公司 | 视频分享方法及装置 |
CN107728997B (zh) * | 2017-10-31 | 2020-09-11 | 万兴科技股份有限公司 | 一种视频播放器渲染系统 |
CN107728997A (zh) * | 2017-10-31 | 2018-02-23 | 万兴科技股份有限公司 | 一种视频播放器渲染系统 |
CN107977130A (zh) * | 2017-12-06 | 2018-05-01 | 福建中金在线信息科技有限公司 | Flash播放器的交互方法、装置及服务器 |
WO2019128307A1 (zh) * | 2017-12-29 | 2019-07-04 | 浙江宇视科技有限公司 | 窗口管理方法 |
CN110134451A (zh) * | 2018-02-08 | 2019-08-16 | 腾讯科技(深圳)有限公司 | 数据显示方法和装置、存储介质及电子装置 |
WO2019179264A1 (zh) * | 2018-03-22 | 2019-09-26 | 杭州海康威视数字技术股份有限公司 | 一种视频播放方法、装置、电子设备及存储介质 |
US11204688B2 (en) | 2018-03-22 | 2021-12-21 | Hangzhou Hikvision Digital Technology Co., Ltd. | Video playing method and device, electronic equipment and storage medium |
CN110300320A (zh) * | 2018-03-22 | 2019-10-01 | 杭州海康威视数字技术股份有限公司 | 一种视频播放方法、装置、电子设备及存储介质 |
CN108712676A (zh) * | 2018-05-30 | 2018-10-26 | 浙江口碑网络技术有限公司 | 基于React框架实现的视频自动播放方法及装置 |
CN110971955B (zh) * | 2018-09-30 | 2022-06-07 | 北京京东尚科信息技术有限公司 | 页面处理方法及装置、电子设备以及存储介质 |
CN110971955A (zh) * | 2018-09-30 | 2020-04-07 | 北京京东尚科信息技术有限公司 | 页面处理方法及装置、电子设备以及存储介质 |
CN109756772A (zh) * | 2019-01-16 | 2019-05-14 | 上海哔哩哔哩科技有限公司 | 视频播放方法、装置及存储介质 |
WO2021189712A1 (zh) * | 2020-03-23 | 2021-09-30 | 青岛海信传媒网络技术有限公司 | 网页视频全屏播放切换小窗口播放的方法及显示设备 |
CN113760273A (zh) * | 2020-08-31 | 2021-12-07 | 北京沃东天骏信息技术有限公司 | 页面控制方法和页面控制装置 |
WO2022062898A1 (zh) * | 2020-09-28 | 2022-03-31 | 华为技术有限公司 | 一种窗口显示方法及设备 |
CN114281225A (zh) * | 2020-09-28 | 2022-04-05 | 华为技术有限公司 | 一种窗口显示方法及设备 |
CN112711367A (zh) * | 2020-12-14 | 2021-04-27 | 海看网络科技(山东)股份有限公司 | 一种iptv中网页防止加载播放器崩溃的方法 |
CN112711367B (zh) * | 2020-12-14 | 2022-09-06 | 海看网络科技(山东)股份有限公司 | 一种iptv中网页防止加载播放器崩溃的方法 |
CN115175002A (zh) * | 2022-06-28 | 2022-10-11 | 青岛海信移动通信技术股份有限公司 | 一种视频播放方法及设备 |
CN115175002B (zh) * | 2022-06-28 | 2023-11-03 | 青岛海信移动通信技术有限公司 | 一种视频播放方法及设备 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN104268251A (zh) | 一种网页中视频元素的播放方法和装置 | |
CN104268250A (zh) | 一种网页中视频元素的播放方法和装置 | |
CN104268252A (zh) | 一种网页中视频元素的播放方法和装置 | |
US9619829B2 (en) | Evolutionary content determination and management | |
CN108463784B (zh) | 用于交互式演示控制的系统和方法 | |
CN107396194B (zh) | 一种弹幕展示方法及客户端 | |
US9576049B2 (en) | Semantic searching using zoom operations | |
AU2018257221B2 (en) | Service processing method and device | |
US8347230B2 (en) | Visual presentation of multiple internet pages | |
US9612715B2 (en) | Real-time preview of uniform resource identifier addressable dynamic content | |
US20110022955A1 (en) | Mashup Application Processing System | |
CN103034517A (zh) | 浏览器控制工具加载方法和装置 | |
US11205036B2 (en) | Method and system for implementing contextual widgets | |
US20130080871A1 (en) | Method for retrieving a representation of an annotated web document, associated computer program and electronic device | |
CN111679818A (zh) | 编辑展示软件的方法和系统 | |
CN103034518A (zh) | 加载浏览器控制工具的方法及浏览器 | |
CN103324734A (zh) | 一种电子设备上网页缩放的方法和装置 | |
Beighley | jQuery for Dummies | |
CN102981853B (zh) | 一种通过网页的文本输入框提交长文本的方法和装置 | |
CN103336817A (zh) | 一种电子设备上网页缩放的方法和装置 | |
CN110781425A (zh) | 移动端h5页面的显示方法、装置、设备及存储介质 | |
CN102981852B (zh) | 长文本提交方法和装置 | |
CN102915378A (zh) | 网页中内容显示状态改变方法和装置 | |
CN103345497A (zh) | 一种电子设备上网页缩放的方法和装置 | |
Clark et al. | Sencha Touch Mobile JavaScript Framework |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
C06 | Publication | ||
PB01 | Publication | ||
C10 | Entry into substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
RJ01 | Rejection of invention patent application after publication | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20150107 |