视频播放方法、装置、计算设备以及存储介质

技术领域

本发明涉及多媒体技术领域，特别是涉及一种视频播放方法、装置、计算设备以及存储介质。

背景技术

随着互联网技术和多媒体技术的快速发展，视频在线播放业务被越来越多的用户使用。用户可以使用个人电脑、移动终端以及智能电视等多种形式的终端通过多种方式浏览在线视频资源。例如，用户可以通过腾讯视频、优酷、爱奇艺等视频播放软件点播视频，通过今日头条、新浪微博等新闻资讯类APP浏览视频资讯，通过UC浏览器、QQ浏览器、百度浏览器等浏览器APP观看视频，还可以通过斗鱼TV、虎牙TV等直播平台观看视频直播。

针对各类视频资源，页面可以定制自己的播放控件，也可以用操作系统原生的播放控件。播放页面的这种可自由选择性会导致用户的播放体验不一致，并且页面定制的质量参差不齐，会为用户体验带来负面影响。

有鉴于此，本发明提出了一种新的视频播放方案。

发明内容

为了解决如上的至少一个问题，本发明提出了一种新的播放机制的视频播放方案。具体地，本发明通过将自建播放容器(例如，视频视图)放置在页面之下，并将页面自带播放容器(例如，视频元素)通过渲染技术设为透明，就能够在确保对页面常规内容进行显示的同时，为用户提供统一的播放页面及控件。进一步地，可以将自建视图设置为页面视图的兄弟视图，以实现视频元素的经由渲染技术的透明化，并可通过获取页面视图转发的用户输入事件，实现自建视图上播放控件的及时响应。

根据本发明的一个方面，提供了一种视频播放方法，包括：获取页面上待播放视频的播放内容和播放位置信息；将所述页面上的待播放视频设置为至少部分透明；以及在窗口中播放获取的播放内容，其中根据所述播放位置信息使所述页面上待播放视频的播放位置至少部分覆盖所述窗口的播放位置。

由此，通过自建播放窗口并将原始页面上播放内容透明来确保为用户提供在各种页面下统一的播放页面，同时避免窗口对原始页面上其他页面内容(例如，弹幕)的遮挡。

优选地，将所述页面上的待播放视频设置为至少部分透明可以包括：将所述页面上的视频元素设置为至少部分透明。由此实现对页面视图所属特定元素层次的透明化，在确保下层视频显示的同时，不妨碍原始页面其他内容的显示。优选地，可以让所述页面上待播放视频的播放位置完全覆盖所述窗口的播放位置，从而实现对页面播放容器的精确遮盖。

优选地，本方法还包括：建立自建层或是调用已有层作为所述窗口，其中所述窗口被布置在所述页面的下层布局中。建立所述窗口包括：将所述窗口设置为所述页面的兄弟页面。由此方便对输入事件的同级转发。

本方法可以在Android系统中实现，于是窗口可以是原生视图，所述页面可以是网页视图。

优选地，该方法还可以包括：所述窗口同步获取所述页面的视频元素的当前位置信息；更新所述窗口中的所述播放位置。由此方便对播放容器的精确遮盖。

优选地，该方法还可以包括：所述页面接收用户的输入事件；以及所述页面向所述窗口转发所述输入事件。具体地，所述用户的输入事件是针对所述窗口的播放控件的输入事件，其中，所述方法还包括：根据被转发的所述输入事件，所述窗口的播放控件对播放内容进行相应的操作。由此实现用户对下层窗口上播放控件的控制。为了防止混淆，还可以隐藏并禁用所述页面的播放控件。

本方法也可以在iOS系统中实现，于是该方法还可以包括：将所述页面中的播放控件层拆分为相同的两个层；以及将所述两个层的上层作为所述窗口并添加目标播放控件。

根据本发明的另一个方面，提出了一种视频播放装置，包括：播放信息获取单元，用于获取页面上待播放视频的播放内容和播放位置信息；页面设置单元，用于将所述页面上的待播放视频设置为至少部分透明；以及窗口设置单元，用于在窗口中播放获取的播放内容，在窗口中播放获取的播放内容，其中根据所述播放位置信息使所述页面上待播放视频的播放位置至少部分覆盖所述窗口的播放位置。

优选地，所述页面设置单元可以用于将所述页面上的视频元素设置为至少部分透明。

优选地，所述窗口设置单元可以用于使所述窗口的播放位置完全被所述页面上待播放视频的播放位置覆盖。

优选地，该装置还可以包括：窗口单元，用于建立自建层或是调用已有层作为所述窗口，其中所述窗口被布置在所述页面的下层布局中。优选地，窗口单元可以将所述窗口设置为所述页面的兄弟页面。具体地，所述窗口可以是原生视图，所述页面可以是网页视图。

优选地，所述窗口设置单元可以进一步用于：同步获取所述页面的视频元素的当前位置信息；更新所述窗口中的所述播放位置。

优选地，所述页面设置单元可以进一步用于：接收用户针对所述页面的输入事件；以及向所述窗口转发所述输入事件。

优选地，所述用户的输入事件是针对所述窗口的播放控件的输入事件，其中，所述窗口设置单元进一步用于：根据被转发的所述输入事件，所述窗口的播放控件对播放内容进行相应的操作。

优选地，所述页面设置单元进一步用于：隐藏并禁用所述页面的播放控件。

优选地，所述窗口设置单元还可以用于：将所述页面中的播放控件层拆分为相同的两个层；以及将所述两个层的上层作为所述窗口并添加目标播放控件。由此方便在iOS系统中的实现。

根据本发明的又一个方面，还提供了一种计算设备，包括：处理器；以及存储器，其上存储有可执行代码，当可执行代码被处理器执行时，使处理器执行上文述及的方法。

根据本发明的再一个方面，还提供了一种非暂时性机器可读存储介质，其上存储有可执行代码，当可执行代码被电子设备的处理器执行时，使处理器执行上文述及的方法。

本发明的视频播放方法、装置、计算设备以及存储介质，通过在现有视图的下层创建用于播放视频的窗口并使得现有视图的视频透明化，可以实现在不遮挡其他页面内容的同时，为用户提供统一的播放界面以方便用户的操作的有益技术效果。上述播放方案进一步实现为页面和窗口的兄弟视图方案，由此方便页面获取用户输入并向窗口进行转发，由此完成对窗口中视频播放的精确控制。

附图说明

通过结合附图对本公开示例性实施方式进行更详细的描述，本公开的上述以及其它目的、特征和优势将变得更加明显，其中，在本公开示例性实施方式中，相同的参考标号通常代表相同部件。

图1示出了常规视频播放页面的一个例子。

图2示出了包括上层自建页面的视频播放的页面层次关系图。

图3示出了具有图2页面层次关系的视频播放页面的一个例子。

图4是用于实现本发明实施例的环境的示意图。

图5是示出了根据本发明一个实施例的视频播放方法的示意性流程图。

图6示出了包括下层自建页面的视频播放的页面层次关系图。

图7示出了具有图6页面层次关系的视频播放页面的一个例子。

图8示出了本发明视频播放流程的一个优选例。

图9是示出了根据本发明一个实施例的视频播放装置的结构的示意性方框图。

图10是示出了根据本发明一个实施例的计算设备的结构的示意性方框图。

具体实施方式

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

如前所述，随着互联网技术和多媒体技术的快速发展，视频在线播放业务被越来越多的用户使用。例如，用户可以通过腾讯视频、优酷、爱奇艺等视频播放APP或是通过UC浏览器、QQ浏览器、百度浏览器等浏览器APP观看视频。

图1示出了常规视频播放页面的一个例子。该页面例如可以是智能手机用户在特定视频播放APP或是浏览器中点击全屏播放按钮之后显示的播放页面。

如图所示，播放窗口中正播放视频1(例如，颁奖画面)，播放窗口还包括可供用户进行操作的操作控件2。操作控件2可以包括页面下部的播放按钮，弹幕输入框，倍速、清晰度、选集选择项目，以及页面上部的退回按钮、转发按钮和其他(…)按钮。另外，由于弹幕选项被打开，因此在视频1上还叠加显示了从右向左穿过视频页面的弹幕3。

针对各类视频资源，页面可以定制自己的播放控件，也可以用操作系统原生的播放控件。播放页面的这种可自由选择性会导致用户的播放体验不一致，并且页面定制的质量参差不齐，会为用户体验带来负面影响。

为了避免页面定制质量的参差不齐，并且避免各种播放控件页面给用户带来的混乱感，可以选择将一个窗口覆盖在原有页面之上。该窗口可以是创建的自建层，或是调用的已有层。在Android操作系统中，可以使用native view遮盖方案。图2示出了包括上层自建页面的视频播放的页面层次关系图。在原有的页面其他元素(例如，弹幕)和页面

图3示出了具有图2页面层次关系的视频播放页面的一个例子。如图3所示，相比于图1，图3具有不同于图1的操作控件2，其显示更为简洁。但图2所示的遮盖方案也带来了新的问题。由于native view覆盖在webview之上，因此会遮挡住所有的页面内容，比如页面的弹出菜单、弹幕，甚至会直接影响了功能的使用。如图3所示，页面弹幕由于被native view所覆盖而无法被显示。为此，需要一种在保持原有native view的优点的同时解决页面遮挡问题的视频播放方案。

下面将结合图4至图10详细说明本发明的视频播放方案。本发明实施例所提供的视频播放方案可应用于如图2所示的环境中。图4是用于实现本发明实施例的环境的示意图。在一个实施例中，环境中的移动终端10可以经由网络40实现与服务器20的信息收发。服务器20可以通过访问数据库30来获取移动终端10所需的内容。移动终端之间(例如，10_1与10_2或10_N之间)也可以经由网络40彼此通信。网络40可以是广义上的用于信息传递的网络，可以包括一个或多个通信网络，诸如无线通信网络、因特网、私域网、局域网、城域网、广域网或是蜂窝数据网络等。在一个实施例中，网络40也可以包括卫星网络，由此将移动终端10的GPS信号传送给服务器20。应当注意，如果向图4中添加或从图4中去除附加模块，不会改变本发明的示例实施例的底层概念。另外，虽然为了方便说明而在图中示出了从数据库30到服务器20的双向箭头，但本领域技术人员可以理解的上，上述数据的收发也是可以通过网络40实现的。

移动终端10是可用来进行网络访问的任何合适的便携式电子设备，包括但不限于智能电话、平板电脑或是其他便携式客户端。服务器20则是能够通过网络访问的提供交互服务所需信息的任何服务器。图中虽然示出了多个移动终端10-1…N以及单个服务器20和数据库30，并且在随后的描述中会选择其中的一个或部分移动终端加以描述(例如，移动终端10-1)，但是本领域技术人员应该理解的是，上述1…N个移动终端旨在表示真实网络中存在的多个移动终端，示出的单个服务器20和数据库30旨在表示本发明的技术方案涉及服务器及数据库的操作。对特定编号的移动端以及单个服务器和数据库加以详述至少为了说明方便，而非暗示对移动端和服务器的类型或是位置等具有限制。

图5是根据本发明一个实施例的视频播放方法的示意性流程图。该方法优选可由图4所示的移动终端10执行。在其他实施例中，也可由诸如台式计算机的终端执行。

参见图5，方法始于步骤S510，获取页面上待播放视频的播放内容和播放位置信息。

此处述及的页面是指显示在终端上的带有视频播放资源的页面，例如，提供多个视频资源的播放列表页面，或是单个视频的播放页面。页面可以是终端通过浏览器访问的网页，也可以是安装在终端上的APP中的页面。优选地，本发明的视频播放方法是可由浏览器APP实现的方法。虽然图1和3的例子中示出了全屏(例如，智能手机横屏)的画面，但应该理解的是，本发明的视频播放方法也适用于非全屏的播放场景。另外，显示页面的终端可以是用户的手持终端，例如，智能手机，也可以是智能投屏场景中的其他终端，例如，智能电视或是显示器。

待播放视频可以是页面中用户期望播放的视频，可以根据用户对页面执行的拖动、点击等操作确定页面上的待播放视频，例如，图1和3中的视频1。对于待播放视频，可以将待播放视频在页面中的位置信息视为待播放视频的播放位置信息，并且可以根据待播放视频在页面中的属性设置信息确定其播放位置信息。在这里，播放位置是相对于页面而非屏幕显示而言的，页面的滚动会影响屏显的位置但不会改变播放位置。待播放视频的播放内容可以根据页面中指示的待播放视频的地址通过网络在线获取。

在步骤S520，将页面上的待播放视频设置为至少部分透明。在步骤S530，在窗口中播放获取的播放内容，其中根据所述播放位置信息使所述页面上待播放视频的播放位置至少部分覆盖所述窗口的播放位置。

在这里，可以将窗口看成是有别于上述页面而自行建立的层，或是调用的已有层。窗口可以位于页面之下，并且通过页面待播放视频的透明化而被显示，由此提供对用户可见的视频播放区域。根据具体的应用场景，可以在恰当的时刻建立本发明的窗口，例如在播放视频的应用被启动时；在进入包括可播放视频的页面时；在所述包括可播放视频的页面内视频第一次被点击播放时；或者其他合适的时刻。

在步骤S520中，可以通过将所述页面上的视频元素设置为至少部分透明，例如，通过渲染技术设置为完全透明来实现页面上待播放视频的透明化。这样，在视频元素之下的内容，例如窗口中的播放内容，就可以透过页面中透明的部分而被显示出来。

在步骤S530中，可以使得窗口的播放位置完全被所述页面上待播放视频的播放位置覆盖，来实现播放位置的精确同步。进一步地，窗口可以同步获取所述页面的视频元素的当前位置信息；并更新所述窗口中的所述播放位置。由此随时保持后续操作中例如与上层透明的video元素的位置同步，从而确保窗口中的播放内容总是能够透过上层的视频元素而被用户看到。

在一个实施例中，上述播放并且可以与小窗播放相结合以实现一个更为自然且完整的播放方案。例如，窗口可以仅在原始播放位置完全在屏幕中显示的情况下保持跟随，而其显示不完整时跳转为固定位置的小窗播放。例如，窗口也可以在原始播放位置只要有部分还在屏幕中显示的情况下保持跟随，而其显示不完整时跳转为固定位置的小窗播放。

作为本发明的一个可选实施例，可以预先建立窗口。由于窗口位于页面之下，因此无需被特别隐藏。在窗口中的内容需要被用户看到时，可以通过上层页面的video元素通过渲染技术的透明化而实现。

在建立窗口的过程中，可以为窗口提供默认的播放控制参数，并且/或者，还可以为窗口提供可供编辑的播放控制参数选项。此处述及的播放控制参数可以是诸如音量控制、进度控制、声音控制等与视频播放相关的参数，由此实现例如图3所示的播放控件2的显示。

优选地，预先建立所述窗口可以包括将所述窗口设置为所述页面的兄弟页面。在Android操作系统的实现中，窗口可以是nativeview(原生视图)，页面则可以是webview(网页视图)。在其他实施例中，窗口也可以是能够在Android操作系统中实现的其他视图。由于nativeview和webview被设置为兄弟关系，由此方便实现视频元素经由渲染技术的透明化。另外，由于上述兄弟关系，因此可以通过页面接收用户的输入事件，并向所述窗口转发所述输入事件。具体地，用户的输入事件可以是针对所述窗口的播放控件的输入事件，其中，所述方法还包括：根据被转发的所述输入事件，所述窗口的播放控件对播放内容进行相应的操作。为了避免混淆，该方法还可以包括：隐藏并禁用所述页面的播放控件。

本发明的视频播放方案可以优选地应用于安卓系统中，例如可以应用于安卓系统下的应用开发，如今日头条、腾讯视频等提供视频播放资源的APP开发，并且尤其适用于会在其中播放各个网站视频的浏览器APP的开发。

在Android系统的具体应用中，可以将NativeView附加到WebView同一棵ViewHierarchy上，并且层级在WebView之下，中间没有其他遮挡。WebView可以将层类型设置为HardwareLayer，以使得系统为其分配额外的Texture作为层缓冲。随后，在WebView绘制到对应图层时，可以在自己的窗口上“挖洞”，例如，清除HardwareLayer对应区域的像素，从而使得下面视图中的内容(视频内容)可以穿透过来，并且保证各图层的正确合成。

另外，本发明的视频播放方案也可以应用于iOS系统和其他系统中。在iOS系统中的渲染基于WKWebView机制。不同于在安卓系统中将每个元素直接绘制到同一个UIWebBrowserView上，WKWebView使用不同的WKCompositingView承载渲染树(RenderTree的每一层)。因此，在iOS的环境下，可以调整WebView生成的渲染树，强制WebView为