一种浏览器内视频小窗播放的方法和装置
技术领域
本发明涉及网页处理领域,具体涉及一种浏览器内视频小窗播放的方法和装置。
背景技术
现有不少支持视频小窗播放的浏览器,各浏览器的实现方式不同,也存在各自的缺陷。现有的方式多是新建一个窗口,然后提取网页中的视频源地址放进新建的窗口中。这种方式往往导致视频移到新建的窗口后又要重新加载播放,不人性化,用户体验不好。另外,在网页中经常会出现视频元素是嵌套在多重框架内,即嵌套在iframe中,这样可能会出现判断不到嵌套在iframe中的视频元素。
发明内容
为了克服现有技术的不足,本发明的目的在于提供一种浏览器内视频小窗播放的方法和装置,实现更稳定识别网页中的视频元素并将其提取出来移到新的窗口中,不影响视频的播放,不需要重新加载,而且窗口的大小自适应视频的原始大小,并隐藏其他页面浮动的元素,给用户较好的体验。
为解决上述问题,本发明所采用的技术方案如下:
技术方案一:
一种浏览器内视频小窗播放的方法,包括以下步骤:
步骤A:获取当前网页窗口中被选中的视频元素;
步骤C:创建一个独立于当前网页窗口的用于容纳和播放视频的独立视频窗口;
步骤D:将步骤A中的当前网页窗口中除视频元素外的其它元素隐藏;
步骤E:将步骤A中的当前网页窗口移动并绑定于独立视频窗口中。
在步骤A之前还包括:
步骤A1:根据用户鼠标在当前网页窗口中所指向的元素类型判断是否为视频元素,若是,则标记为被选中的视频元素并执行步骤A;若否,执行步骤A2;
步骤A2:判断鼠标所指向的元素类型是否为iframe元素,若是,执行步骤A3,若否,表示该鼠标所指的元素不是视频元素,结束流程;
步骤A3:重复判断iframe元素中是否嵌套有另一iframe元素,直至判断到非iframe元素,执行步骤A4;
步骤A4:判断该非iframe元素是否为视频元素,若是,则标记为被选中的视频元素并执行步骤A;若否,表示该鼠标所指的元素不是视频元素,结束流程。
在步骤A和步骤C之间还包括:
步骤B:发起是否同意小窗播放的请求并接收用户的回复,若同意,则执行步骤C;若拒绝,则流程结束。
在步骤C中还包括:获取步骤A中被选中的视频元素中的视频窗口大小,并调整独立视频窗口的大小与该视频窗口大小一致。
在步骤C中还包括:设置独立视频窗口的属性为可拖动且大小可调。
在步骤E之后还包括,
步骤F:在独立视频窗口中添加用于将步骤A中的当前网页窗口解绑恢复的指令。
技术方案二:
一种浏览器内视频小窗播放的装置,包括以下模块:
视频元素获取模块:用于获取当前网页窗口中被选中的视频元素;
创建独立窗口模块:用于创建一个独立于当前网页窗口的用于容纳和播放视频的独立视频窗口;
隐藏元素模块:用于将视频元素获取模块中的当前网页窗口中除被选中的视频元素外的其它元素隐藏;
网页分离模块:用于将视频元素获取模块中的当前网页窗口移动并绑定于独立视频窗口中。
在创建独立窗口模块之前还包括:
元素判断模块A:用于根据用户鼠标在当前网页窗口中所指向的元素类型判断是否为视频元素,若是,则标记为被选中的视频元素并执行视频元素获取模块;若否,执行元素判断模块B;
元素判断模块B:用于判断鼠标所指向的元素类型是否为iframe元素,若是,执行元素判断模块C,若否,表示该鼠标所指的元素不是视频元素,结束流程;
元素判断模块C:用于重复判断iframe元素中是否嵌套有另一iframe元素,直至判断到非iframe元素,执行元素判断模块D;
元素判断模块D:用于判断该非iframe元素是否为视频元素,若是,则标记为被选中的视频元素并执行视频元素获取模块;若否,表示该鼠标所指的元素不是视频元素,结束流程。
在视频元素获取模块和创建独立窗口模块之间还包括:
独立窗口请求模块:用于发起是否同意小窗播放的请求并接收用户的回复,若同意,则执行创建独立窗口模块;若拒绝,则流程结束。
在创建独立窗口模块中还包括:获取视频元素获取模块中被选中的视频元素中的视频窗口大小,并调整独立视频窗口的大小与该视频窗口大小一致。在创建独立窗口模块中还包括:设置独立视频窗口的属性为可拖动且大小可调。
在视频分离模块之后还包括,窗口恢复请求模块:用于在独立视频窗口中添加用于将视频元素获取模块中的当前网页窗口解绑恢复的指令。
相比现有技术,本发明的有益效果在于:将当前网页窗口中的除视频元素外的其它元素隐藏后转移至独立视频窗口中,不仅能使视频凸出,和使用户的观看视频的界面更加纯净,而且不影响视频的播放,不需要重新播放视频。另外,能更好更稳定地判断出用户鼠标所指向的元素是否为视频元素,避免嵌套在iframe中的视频元素被忽略掉。再者,独立视频窗口的属性为可拖动且大小可调,这个设定给予用户最大的自由度,满足不同人群的视频浏览需求。
附图说明
图1为本发明浏览器内视频小窗播放的方法的流程图。
具体实施方式
下面,结合附图以及具体实施方式,对本发明做进一步描述:
实施例1:
参考图1为本发明一种浏览器内视频小窗播放的方法的流程图,实现该方法包括以下内容:
步骤A:获取当前网页窗口中被选中的视频元素。在该步骤中,如何获取当前网页窗口中被选中的视频元素很重要,因此在该步骤前还有关于如何获取网页窗口中被选中的视频元素的步骤。
用户通常是使用鼠标在网页中浏览或选择感兴趣的内容,因此,设置步骤A1:根据用户鼠标在当前网页窗口中所指向的元素类型判断是否为视频元素,若是,则标记为被选中的视频元素并执行步骤A;若否,执行步骤A2。现在的网页中视频通常是以flash形式在网页中播放,因此在步骤A1中所指的视频元素可以是flash,当然,也可以是其它的视频元素。
页面中会有很多元素类型,像图片、文字、视频等,其中有一种元素叫iframe,是一个框架,也可以理解为子页面,iframe中还可以包含另外的iframe,就是说可以多个iframe嵌套。因此,在步骤A1中若检测到元素不是视频元素,有可能视频元素是嵌套在iframe元素中,因此需要执行步骤A2。
步骤A2:判断鼠标所指向的元素类型是否为iframe元素,若是,执行步骤A3;若否,表示该鼠标所指的元素不是视频元素,结束流程。在该步骤中,判断鼠标所指的元素为iframe后,有可能视频元素是嵌套在多层iframe中,需要进一步判断下一层是否还是为iframe元素,因此需要执行步骤A3。如果在步骤A2中判断中不是iframe元素则表示该元素不是视频元素,整个流程结束,等待用户的鼠标指向其他位置的元素,再从A1步骤开始执行判断。
步骤A3:重复判断iframe元素中是否嵌套有另一iframe元素,直至判断到非iframe元素,执行步骤A4。一直递归调用该判断直至判断到非iframe元素时,则进一步判断非iframe是什么元素,执行步骤A4。
步骤A4:判断该非iframe元素是否为视频元素,若是,则标记为被选中的视频元素并执行步骤A;若否,表示该鼠标所指的元素不是视频元素,结束流程。在该步骤中,若判断该非iframe元素为视频元素,则表示该视频元素是嵌套在iframe中的,若判断为否,则表示鼠标所指向的元素并不是视频元素,整个流程结束,等待用户的鼠标指向其他位置的元素,再从A1步骤开始执行判断。
上述A1、A2、A3和A4步骤的判断能更好更稳定地判断出用户鼠标所指向的元素是否为视频元素,避免嵌套在iframe中的视频元素被忽略掉。
上述步骤A中确定鼠标所指的元素为视频元素后,进入步骤B。
步骤B:发起是否同意小窗播放的请求并接收用户的回复,若同意,则执行步骤C;若拒绝,则流程结束。该步骤向用户发起是否需要小窗播放的请求,具体方式可以是在视频的边缘处弹出一个选择菜单。若用户选择拒绝小窗播放的请求,则结束整个流程。进一步地,在用户选择拒绝小窗播放的请求后,在本次当前网页窗口的会话中,将不再针对该视频元素发起小窗播放的请求。即用户再次将鼠标移动到该视频元素上时,不再弹出选择菜单,但是仅限于本次会话,再次打开该网页还是会有选择菜单。
步骤C:创建一个独立于当前网页窗口的用于容纳和播放视频的独立视频窗口。进一步地,获取步骤A中被选中的视频元素中的视频窗口大小,并调整独立视频窗口的大小与该视频窗口大小一致,即新建的独立视频窗口初始大小与视频原始的尺寸大小一致,能使视频最完美地移动至新建的独立视频窗口中。
再进一步,设置独立视频窗口的属性为可拖动且大小可调,这个设定给予用户最大的自由度,对视频的原始大小不满意的用户可调整独立视频窗口的大小,满足不同人群的视频浏览需求。
为了更好地突出独立视频窗口,而且为了使用户在观看独立视频窗口中的视频时能更加专注,在步骤C之后需要执行步骤D:将步骤A中的当前网页窗口中除被选中的视频元素外的其它元素隐藏。该步骤可以将当前页面中除了被选中的视频外的其它元素隐藏,还可以将漂浮于网页上的广告等信息隐藏掉,只留下被选中的视频元素,使用户的观看视频的界面更加纯净。
步骤E:将步骤A中当前网页窗口移动并绑定于独立视频窗口中。该步骤中,仅是将隐藏了除被选中的视频元素外的其它元素的网页窗口移动至独立视频窗口中,因此并不会影响视频的播放。由于独立视频窗口是可以调整大小的,因此也应该设置该视频元素跟随窗口大小的改变而改变,具体可以对视频元素的属性进行如下设置:“position:fixed;top:0px;left:0px;width:100%;height:100%;background-color:rgb(0,0,0);z-index:2147483647;margin-top:0px;margin-left:0px;”。
进一步地,执行步骤E后再执行F:在独立视频窗口中添加用于将步骤A中的当前网页窗口解绑恢复的指令。即在独立视频窗口中添加一个菜单或按钮,用于让客户选择将原网页窗口中的其它元素解除隐藏,并从独立视频窗口中还原回步骤A中的网页窗口样式,该还原的过程为一个逆向的过程。还原后,视频将会继续在还原后的网页窗口中播放,独立视频窗口将关闭。
实施例2:
一种浏览器内视频小窗播放的装置,包括以下模块:
视频元素获取模块:用于获取当前网页窗口中被选中的视频元素;
创建独立窗口模块:用于创建一个独立于当前网页窗口的用于容纳和播放视频的独立视频窗口;
隐藏元素模块:用于将视频元素获取模块中的当前网页窗口中除被选中的视频元素外的其它元素隐藏;
网页分离模块:用于将视频元素获取模块中的当前网页窗口移动并绑定于独立视频窗口中。
在创建独立窗口模块之前还包括:
元素判断模块A:用于根据用户鼠标在当前网页窗口中所指向的元素类型判断是否为视频元素,若是,则标记为被选中的视频元素并执行视频元素获取模块;若否,执行元素判断模块B;
元素判断模块B:用于判断鼠标所指向的元素类型是否为iframe元素,若是,执行元素判断模块C,若否,表示该鼠标所指的元素不是视频元素,结束流程;
元素判断模块C:用于重复判断iframe元素中是否嵌套有另一iframe元素,直至判断到非iframe元素,执行元素判断模块D;
元素判断模块D:用于判断该非iframe元素是否为视频元素,若是,则标记为被选中的视频元素并执行视频元素获取模块;若否,表示该鼠标所指的元素不是视频元素,结束流程。
在视频元素获取模块和创建独立窗口模块之间还包括:
独立窗口请求模块:用于发起是否同意小窗播放的请求并接收用户的回复,若同意,则执行创建独立窗口模块;若拒绝,则流程结束。
在创建独立窗口模块中还包括:获取视频元素获取模块中被选中的视频元素中的视频窗口大小,并调整独立视频窗口的大小与该视频窗口大小一致。在创建独立窗口模块中还包括:设置独立视频窗口的属性为可拖动且大小可调。
在视频分离模块之后还包括,窗口恢复请求模块:用于在独立视频窗口中添加用于将视频元素获取模块中的当前网页窗口解绑恢复的指令。
对本领域的技术人员来说,可根据以上描述的技术方案以及构思,做出其它各种相应的改变以及形变,而所有的这些改变以及形变都应该属于本发明权利要求的保护范围之内。