CN105094763A - 扩展视频功能的方法及系统 - Google Patents

Abstract

本发明提供了一种扩展视频功能的方法及系统，其中的方法包括：当监听到视频区域的播放事件时，创建与视频区域相对应的父View和子View；其中，父View为透明View，并覆盖视频区域；子View为视频功能的扩展按钮，嵌套在父View中；当监听到父View中发生的所述视频区域的点击事件时，在子View中响应视频区域的点击事件，为视频区域提供视频功能的扩展。通过本发明能够在视频区域上提供视频扩展入口，进而在扩展视频功能的同时，不破坏网页本身的功能，提高用户的使用体验。

Description

扩展视频功能的方法及系统

技术领域

本发明涉及移动浏览器技术领域，更为具体地，涉及一种扩展视频功能的方法及系统。

背景技术

随着手机、平板等移动设备性能的提高和HTML5(HyperTextMarkupLanguage，超文本标记语言)技术的发展，移动浏览器的功能也越来越强大，例如，现如今人们可以无需下载专门的音乐和视频播放软件，而是直接通过浏览器在页面中播放音乐和视频，这无疑给人们的移动生活创造了进一步的便利条件。

按照HTML5标准的规定，页面中的视频元素与网页其他元素并没有本质上的区别，网页可以定义元素之间的相互融合和相互遮盖。例如，网页可以定义一张图片飘浮在视频区域的上方，覆盖住视频的一部分区域。HTML5标准还同时规定视频控制条的显示必须受网页的控制，网页开发者只有在Video(视频)标签的属性中增加“controls”(控制)属性，才会显示视频的控制条。

根据这些标准的规定，浏览器就会较难扩展视频的功能。例如，在非全屏播放的时候，假设网页开发者没有定义控制条，那么视频就没有进入全屏状态的入口，用户则无法全屏观看视频，而浏览器在全屏下提供的各种手势功能、剧集功能等均无法提供给用户使用。另外，假设浏览器在非全屏播放时想提供一个下载当前视频的功能，由于网页开发者事先没有定义控制条，因此也没有区域可以提供下载视频的入口。

为了解决上述问题，现有主流的浏览器对视频功能扩展有如下两种不同的实现方式。第一种方式采用不扩展视频功能的方式，如不提供剧集、手势控制、下载视频等功能，只完成基础的视频播放功能，若页面没有定义控制条，则视频无法全屏播放，浏览器完成的功能只局限于网页的设定。第二种方式使用Android的VideoView(视频视图)及其他View(视图)播放视频和实现控制条，忽略页面video标签的controls属性，强制让控制条显示、并提供进入全屏按钮，如此，浏览器则能够进入全屏状态，进而实现在全屏状态下的一些功能扩展。

然而上述两种实现方式均有很大的缺陷：第一，不对视频作扩展无法提供良好的用户体验，产品丧失了优势。第二，使用Android的VideoView及其他View播放视频和实现控制条，虽然可以方便的实现全屏和其他功能的入口，但视频所在的View与页面所在的View为两个不同的AndroidView，导致视频区域的所有页面元素均会被视频所在的View遮挡住，不仅看不到，也无法响应事件。如此便会导致网站实现的控制条无法显示和被操作，进而对网站本身的功能造成影响。

发明内容

鉴于上述问题，本发明的目的是提供一种扩展视频功能的方法及系统，以在视频区域上提供视频扩展入口，进而在不破坏网页本身的功能的基础上扩展视频功能。

根据本发明的一个方面，提供一种扩展视频功能的方法，包括：

当监听到视频区域的播放事件时，创建与视频区域相对应的父View和子View；其中，父View为透明View，并覆盖视频区域；子View为视频功能的扩展按钮，嵌套在父View中；

当监听到父View中发生的所述视频区域的点击事件时，在子View中响应视频区域的点击事件，为视频区域提供视频功能的扩展。

其中，子View被配置为当监听到视频区域的点击事件时，或者视频的播放状态发生改变时，处于显示状态；当未监听到视频区域的点击事件，并经过预定的时间后，处于隐藏状态。

其中，视频功能的扩展包括：下载功能，和/或视频区域的缩放功能，和/或调节视频清晰度功能。

其中，父View的位置对应于视频区域的位置改变而改变。

其中，扩展视频功能的方法还包括：在所述当监听到视频区域的播放事件时，创建与所述视频区域相对应的父View和子View之前，创建与视频区域相对应的Video元素，Video元素用于监听对应视频区域的播放事件以及获取对应视频区域的位置。

其中，子View嵌套在所述父View的指定位置。

另一方面，本发明还提供一种扩展视频功能的系统，包括：

功能扩展创建单元，用于当监听到视频区域的播放事件时，创建与视频区域相对应的父View和子View；其中，父View为透明View，并覆盖视频区域；子View为视频功能的扩展按钮，嵌套在父View中；

功能扩展单元，用于当监听到父View中发生的视频区域的点击事件时，在子View中响应视频区域的点击事件，为视频区域提供视频功能的扩展。

利用上述根据本发明的扩展视频功能的方法及系统，通过在页面的视频区域上方覆盖透明View，同时设置透明View只监听视频区域所发生的点击事件，由于覆盖在视频区域上方的View为透明，因此不会从视觉上遮盖住原有的网页元素，更不会响应视频区域发生的点击事件，而在透明View上布局子View，设置子View拦截并响应视频区域所发生的点击或者播放状态改变事件，由于只有子View才能够响应事件，因此上述方式能够在兼容标准的同时为视频功能的扩展提供入口，不受网页事件分派机制的影响，也不会完全遮盖原有的网页区域，进而在扩展视频功能的同时，不破坏网页本身的功能，提高用户的使用体验。

为了实现上述以及相关目的，本发明的一个或多个方面包括后面将详细说明并在权利要求中特别指出的特征。下面的说明以及附图详细说明了本发明的某些示例性方面。然而，这些方面指示的仅仅是可使用本发明的原理的各种方式中的一些方式。此外，本发明旨在包括所有这些方面以及它们的等同物。

附图说明

通过参考以下结合附图的说明及权利要求书的内容，并且随着对本发明的更全面理解，本发明的其它目的及结果将更加明白及易于理解。在附图中：

图1为根据本发明实施例的扩展视频功能的方法流程示意图；

图2为根据本发明实施例的扩展视频功能的方法的详细流程示意图；

图3为视频功能扩展前的效果图；

图4为本发明实施例的扩展视频功能后的效果图；

图5为根据本发明实施例的扩展视频功能的系统的第一逻辑结构框图；

图6为根据本发明实施例的扩展视频功能的系统的第二逻辑结构框图；

图7为根据本发明实施例的扩展视频功能的系统的第三逻辑结构框图。

在所有附图中相同的标号指示相似或相应的特征或功能。

具体实施方式

以下将结合附图对本发明的具体实施例进行详细描述。

在对本发明所提供的扩展视频功能的方法进行描述之前，先对本发明所产生的背景原理作一些解释说明。

网页内容显示在一个AndroidView(安卓视图)上，这个View叫做WebView(页面视图)。如果其他的AndroidView放在WebView上方，并且不把这个AndroidView设为透明，则这个AndroidView就会从视觉上遮盖住网页的元素，并且优先响应用户的事件。

AndroidSDK(AndroidSoftwareDevelopmentKit，安卓软件开发工具包)提供了两种方式播放视频，其中一种是使用SurfaceTexture。SurfaceTexure不是AndroidView,内部的内容能跟网页内容混合，因此视频是否遮盖住页面的内容、或者是被遮均由网页自已控制。SurfaceTexture不停的绘制在浏览器内核视频所在的Layer上，因此就可以看到播放起来的视频。在视频所在的layer上也可以绘制其他按钮，并监听按钮上点击事件。但是若页面有其他的元素放在视频区域的上方，如一个透明的div(HTML中的一个标签)，那么视频将无法收到事件，即用户在视频区域上的按钮时，该按钮不会作任何的响应。

针对前述现有的视频功能扩展方式存在遮挡页面元素，使网页无法响应事件，进而影响网页本身功能的问题。本发明使用SurfaceTexture绘制视频，通过在页面的视频区域上方覆盖透明View，并在透明View上布局子View，同时设置透明View只监听视频区域所发生的事件，而设置子View拦截并响应视频区域所发生的事件。通过该方式，透明View不会遮盖住原有的网页区域，而子View充当按钮的角色为扩展视频功能提供入口，进而在不破坏网页本身的功能的同时，提高用户的使用体验。

为了说明本发明所提供的扩展视频功能的方法，图1示出了根据本发明实施例的扩展视频功能的方法流程。

如图1所示，本发明提供的扩展视频功能的方法包括：

S110：当监听到视频区域的播放事件时，创建与视频区域相对应的父View和子View；其中，父View为透明View，并覆盖视频区域；子View为视频功能的扩展按钮，嵌套在父View中。

其中，可以在创建与视频区域相对应的父View和子View之前，创建与视频区域相对应的Video元素，Video元素用于监听对应视频区域的播放事件以及获取对应视频区域的位置。

具体地，浏览器在加载一个有视频的页面时，当解析到页面的Video标签时，浏览器内核会创建一个与该Video标签相对应的Video元素。需要说明的是，在本发明中，Video标签由网页开发者创建，一个Video标签即代表页面中的一个视频区域，页面中有多少个Video标签，则会相应地创建多少个Video元素。

利用浏览器内核所创建的Video元素去监听相应视频区域的播放事件。其中，由用户或者JS触发视频区域播放视频，当Video元素监听到视频区域的播放事件(视频区域的视频开始播放或者播放暂停)时，浏览器内核创建一个与Video元素相对应的父View和至少一个子View。也就是说，对应的视频区域有一个父View和至少一个子View，其中，子View充当视频功能的扩展入口。

父View和子View被创建之后，需要对父View和子View的属性进行设置。其中，在对父View进行设置时，父View为透明View，完全覆盖在视频区域的上方，并负责监听对应视频区域发生的点击事件；而子View被添加在父View中，充当视频功能的扩展按钮，负责响应父View监听到的对应视频区域发生的点击事件。

其中，子View的大小应小于父View，其可以嵌套在父View的指定位置，该指定位置包括但不限于在父View的右上角或者父View的右下角等其他不妨碍用户观看视频的任意位置。

S120：当监听到父View中发生的视频区域的点击事件时，在子View中响应视频区域的点击事件，为视频区域提供视频功能的扩展。

其中，当监听到父View中发生的视频区域的点击事件时，或者视频的播放状态发生改变时，子View处于显示状态；当未监听到父View中发生的视频区域的点击事件时，子View在经过预定的时间后，处于隐藏状态。

需要说明的是，视频的播放状态既可通过点击发生改变，也可通过其他的快捷按键方式改变(例如在移动浏览器中通过敲击虚拟键盘中的空格键使视频由播放状态变为暂停状态，或者由暂停状态变为播放状态)。

也就是说，在父View中还设置有隐藏子View的定时器，只要对应的视频区域没有点击事件发生，子View则根据定时器的设定时间进行隐藏。例如，可以将隐藏子View的时间设定为3秒或者5秒，当对应的视频区域没有点击事件发生并到了定时器所设定的时间，则子View将被隐藏于父View中。

另外，一个子View对应一个扩展的视频功能，当用户点击一个子View时，则可以使用配置在子View上对应的扩展的视频功能。其中，视频功能的扩展包括但不限于下载功能，和/或视频区域的缩放功能，和/或调节视频清晰度功能。

具体地，当通过创建的Video元素获取到对应视频区域的位置(包括视频区域的坐标和大小)，并根据所获取到的对应视频区域的位置将父View完全覆盖在视频区域的上方时，父View与视频区域完全重叠，由于父View是透明且只负责监听视频区域所发生的点击事件，因此不会遮挡视频区域，更不会对视频区域造成影响。同时，由于子View在父View中，负责响应视频区域的点击事件，因此通过子View能够实现视频功能的扩展。当然父View与视频区域也可以容许有一定的位置错开，只要父View能够监听到视频区域所发生的点击事件即可。

另外需要说明的是，如果网页开发者在视频区域定义了控制条，那么覆盖在视频区域上方的父View必定也会覆盖控制条，此时用户对控制条的控制则会直接转移到父View上。也就是说，即使视频区域的控制条被父View覆盖，用户也同样能够在父View上实现对控制条的控制。

在本发明的一个示例中，父View监听到相应的视频区域发生了一个点击事件，此时子View将在父View中显示，用户点击了一个子View，而该子View所对应的扩展视频功能为视频下载，因此，当用户点击该子View后，该视频区域的视频将被下载到本地。

在本发明的另一个示例中，父View监听到相应的视频区域发生了一个点击事件，此时子View将被显示在父View中，同时用户点击了一个子View，而该子View所对应的扩展视频功能为全屏播放，因此，当用户点击该子View后，该视频区域的视频即进入了全屏播放的状态。

另外，当视频区域发生坐标或大小改变的事件时，继续通过Video元素获取相应视频区域的坐标和大小，然后通过所获取的坐标和大小相应设置父View的坐标和大小。也就是说，父View的位置对应于视频区域的位置改变而改变。当父View的位置发生变化时，子View根据父View的变化重新排版。

需要说明的是，由于父View是与Video元素相对应存在的，而子View与父View相对应存在，因此，当Video元素被销毁时，会同时销毁与Video元素相对应的父View和子View。

为了更为详细地说明本发明所提供扩展视频功能的方法，图2示出了根据本发明实施例的扩展视频功能的方法的详细流程。如图2所示：

S210：当解析到页面的视频区域时，创建与视频区域相对应的Video元素，Video元素用于监听对应视频区域的播放事件。

S220：触发视频区域播放视频。其中，可以由用户或者JS触发视频区域播放视频。

S230：当Video元素监听到对应视频区域的播放事件时，创建与Video元素相对应的父View和子View，设置父View为透明View，负责监听对应视频区域的点击事件，子View嵌套在父View中，负责响应视频区域的点击事件。

在对父View和子View进行设置时，父View为透明View，只负责监听视频区域发生的点击事件，例如当用户点击视频区域时，即发生了一个点击事件，而这个点击事件则是通过父View监听到的。将子View设置在父View中，使其充当按键的角色，负责响应父View监听到的视频区域发生的点击事件。

其中，在父View监听到的对应的视频区域发生的点击事件时，激活该视频区域的视频功能扩展事件；在子View为视频区域提供视频功能的扩展的过程中，子View负责拦截并响应视频区域发生的视频功能扩展事件，当父View监听到视频区域发生点击事件时，在父View中显示子View，通过子View提供的视频功能扩展类型扩展视频功能，该视频功能扩展类型与根据点击事件所激活的视频功能扩展事件相对应。

也就是说，此处的视频功能扩展事件即是指设置在子View上的视频功能扩展类型。需要说明的是，在本发明中，设置在子View上的视频功能扩展类型包括但不仅于视频下载、全屏播放、清晰度调节。

具体地，一个视频功能扩展类型对应一个子View，而设置在该子View上的视频功能扩展类型可以是视频的下载功能或者视频的全屏播放功能，当用户点击一个子View时，则相应的触发了一个视频功能扩展事件，那么此时相应的视频功能扩展事件则可以是一个视频下载事件或者是一个视频的全屏播放事件。

S240：将父View添加到对应的视频区域中显示出来，并相应设置隐藏子View的定时器。

S250：通过创建的Video元素获取对应视频区域的位置(包括坐标和大小)。

S260：根据所获取的位置相应的设置父View的位置，也就是将父View覆盖在对应的视频区域上。

其中，当创建的Video元素监听到对应的视频区域的位置改变时，则重新获取对应视频区域的位置，然后根据重新获取的位置相应设置父View的位置；另外，当监听到视频区域发生点击事件或者播放状态改变时，重新启动隐藏子View的定时器。

具体地，视频区域的视频播放状态改变时，例如，用户通过点击虚拟键盘的空格键将视频的播放状态转换成暂停状态时，子View将会被显示在父View中，同时定时器也将被启动。

S270：当Video元素销毁时，销毁父View和子View。

通过图1和图2所示的流程能够看出，本发明在不破坏网页原有功能和不遮挡网页元素的情况下，能过子View提供扩展视频功能的入口，由于功能扩展的入口在视频区域的上方，用户能更为直观的感受到，进而大大提升了用户的使用体验。

作为本发明的一个示例，图3和图4分别示出了扩展前以及利用本发明实现视频功能扩展后的效果对比。

如图3和图4所示，扩展前，视频区域的视频功能较为单一，而利用本发明实现视频功能扩展之后，扩展按钮(下载按钮和缩放按钮)飘浮于视频区域的右上方并没有遮盖住视频区域的页面内容，效果更为直观，更为重要的是没有破坏原有网页的功能，因而能够大大提升用户的使用体验。

与上述方法相对应，本发明还提供一种扩展视频功能的系统。图5示出了根据本发明实施例的扩展视频功能的系统的第一逻辑结构。

如图5所示，本发明提供的扩展视频功能的系统500包括功能扩展创建单元510和功能扩展单元520。

其中，功能扩展创建单元510用于当监听到视频区域的播放事件时，创建与视频区域相对应的父View和子View；其中，父View为透明View，并覆盖视频区域；子View为视频功能的扩展按钮，嵌套在父View中。

为了进一步说明本发明提供的扩展视频功能的系统，图6示出了根据本发明实施例的扩展视频功能的系统的第二逻辑结构。如图6所示，本发明所提供的扩展视频功能的系统500包括功能扩展创建单元510、功能扩展单元520和Video元素创建单元530，其中，Video元素创建单元530在功能扩展创建单元510创建与视频区域相对应的父View和子View之前，创建与视频区域相对应的Video元素，Video元素用于监听对应视频区域的播放事件以及获取对应视频区域的位置。

具体地，浏览器在加载一个有视频的页面时，当解析到页面的Video标签时，浏览器内核会创建一个与该Video标签相对应的Video元素。需要说明的是，在本发明中，Video标签由网页开发者创建，一个Video标签即代表页面中的一个视频区域，页面中有多少个Video标签，则会相应地创建多少个Video元素。

利用浏览器内核所创建的Video元素去监听相应视频区域的播放事件。其中，由用户或者JS触发视频区域播放视频，当Video元素监听到视频区域的播放事件时，浏览器内核创建一个与Video元素相对应的父View和至少一个子View。也就是说，对应的视频区域有一个父View和至少一个子View，其中，子View充当视频功能的扩展入口。

父View和子View被创建之后，需要对父View和子View的属性进行设置。其中，在对父View进行设置时，父View为透明View，完全覆盖在视频区域的上方，并负责监听对应视频区域发生的点击事件；而子View被添加在父View中，充当视频功能的扩展按钮，负责响应父View监听到的对应视频区域发生的点击事件。

其中，子View可以嵌套在父View的指定位置，该指定位置包括但不限于在父View的右上角或者父View的右下角等其他不妨碍用户观看视频的任意位置。

功能扩展单元520用于当监听到父View中发生的视频区域的点击事件时，在子View中响应视频区域的点击事件，为视频区域提供视频功能的扩展。

其中，为了更为详细的说明本发明提供的扩展视频功能的系统，图7示出了根据本发明实施例的扩展视频功能的系统的第三逻辑结构。如图7所示，功能扩展单元520进一步包括显示单元522和隐藏单元521，其中，显示单元522用于当监听到视频区域的点击事件时，或者视频的播放状态发生改变时，显示子View；隐藏单元521用于当未监听到视频区域的点击事件时，子View经过预定的时间进行隐藏。

需要说明的是，视频的播放状态既可通过点击发生改变，也可通过其他的快捷按键方式改变(例如在移动浏览器中通过敲击虚拟键盘中的空格键使视频由播放状态变为暂停状态，或者由暂停状态变为播放状态)。

也就是说，在父View中还设置有隐藏子View的定时器，只要对应的视频区域没有点击事件发生，子View则根据定时器的设定时间进行隐藏。例如，可以将隐藏子View的时间设定为3秒或者5秒，一旦到了定时器所设定的时间，则子View将被隐藏于父View中。

另外，一个子View对应一个扩展的视频功能，当用户点击一个子View时，则相应地扩展了对应的视频功能。也就是说，功能扩展单元520所扩展的视频功能包括但不限于下载功能，和/或视频区域的缩放功能，和/或调节视频清晰度功能。

具体地，当通过创建的Video元素获取到对应视频区域的位置(包括视频区域的坐标和大小)，并根据所获取到的对应视频区域的位置将父View完全覆盖在视频区域的上方时，父View与视频区域完全重叠，由于父View是透明且只负责监听视频区域所发生的点击事件，因此不会遮挡视频区域，更不会对视频区域造成影响。同时，由于子View在父View中，负责响应视频区域的点击事件，因此通过子View能够实现视频功能的扩展。

通过上述能够看出，本发明所提供的扩展视频功能的方法及系统，通过在页面的视频区域上方所覆盖的透明View，并在透明View上布局子View，从而为扩展视频功能提供入口，进而在不破坏网页本身的功能的同时，提高用户的使用体验。

如上参照附图以示例的方式描述了根据本发明的扩展视频功能的方法及系统。但是，本领域技术人员应当理解，对于上述本发明所提出的扩展视频功能的方法及系统，还可以在不脱离本发明内容的基础上做出各种改进。因此，本发明的保护范围应当由所附的权利要求书的内容确定。

Claims (10)

1.一种扩展视频功能的方法，包括：

当监听到视频区域的播放事件时，创建与所述视频区域相对应的父View和子View；其中，所述父View为透明View，并覆盖所述视频区域；所述子View为视频功能的扩展按钮，嵌套在所述父View中；

当监听到所述父View中发生的所述视频区域的点击事件时，在所述子View中响应所述视频区域的点击事件，为所述视频区域提供视频功能的扩展。

2.如权利要求1所述的扩展视频功能的方法，其中，所述子View被配置为当监听到所述视频区域的点击事件时，或者视频的播放状态发生改变时，处于显示状态；当未监听到所述视频区域的点击事件，并经过预定的时间后，处于隐藏状态。

3.如权利要求1所述的扩展视频功能的方法，其中，所述视频功能的扩展包括：下载功能，和/或视频区域的缩放功能，和/或调节视频清晰度功能。

4.如权利要求1所述的扩展视频功能的方法，其中，

所述父View的位置对应于所述视频区域的位置改变而改变。

5.如权利要求1所述的扩展视频功能的方法，其中，在所述当监听到视频区域的播放事件时，创建与所述视频区域相对应的父View和子View之前还包括：

创建与视频区域相对应的Video元素，所述Video元素用于监听对应视频区域的播放事件以及获取对应视频区域的位置。

6.如权利要求1至5中任一项所述的扩展视频功能的方法，其中，所述子View嵌套在所述父View的指定位置。

7.一种扩展视频功能的系统，包括：

功能扩展创建单元，用于当监听到视频区域的播放事件时，创建与所述视频区域相对应的父View和子View；其中，所述父View为透明View，并覆盖所述视频区域；所述子View为视频功能的扩展按钮，嵌套在所述父View中；

功能扩展单元，用于当监听到所述父View中发生的所述视频区域的点击事件时，在所述子View中响应所述视频区域的点击事件，为所述视频区域提供视频功能的扩展。

8.如权利要求7所述的扩展视频功能的系统，其中，所述功能扩展单元进一步包括显示单元和隐藏单元，其中，

所述显示单元用于当监听到所述视频区域的点击事件时，或者视频的播放状态发生改变时，显示所述子View；

所述隐藏单元用于当未监听到所述视频区域的点击事件时，所述子View经过预定的时间进行隐藏。

9.如权利要求7所述的扩展视频功能的系统，其中，所述功能扩展单元所扩展的视频功能包括：下载功能，和/或视频区域的缩放功能，和/或调节视频清晰度功能。

10.如权利要求7至9中任一项所述的扩展视频功能的系统，进一步包括：Video元素创建单元，在所述功能扩展创建单元创建与所述视频区域相对应的父View和子View之前，创建与所述视频区域相对应的Video元素，所述Video元素用于监听对应视频区域的播放事件以及获取对应视频区域的位置。