CN102779046B - 一种基于html5开发的视频播放系统及其视频播放方法 - Google Patents

Abstract

一种基于HTML5开发的视频播放系统，其包括服务器端基于超文本传输协议的服务器（1）和客户端的浏览器（4），所述基于超文本传输协议的服务器（1）提供基于超文本传输协议的服务，存储视频内容并提供用于展示基于HTML5开发的视频播系统用户界面的相关数据；所述客户端的浏览器（4），为基于Web技术的网页浏览器或基于WebView开发的网页程序组件，属于客户端在本地应用程序中访问基于Web技术的内置程序组件，其通过基于超文本传输协议的服务器下载用于展示HTML5视频播系统用户界面的相关数据，并基于浏览器展示视频播放界面。

Description

一种基于HTML5开发的视频播放系统及其视频播放方法

技术领域

本发明属于视频播放技术领域，尤其涉及一种基于HTML5开发的视频播放系统及其视频播放方法。

背景技术

当前，手机、平板电脑（Pad）等移动智能设备以及其他嵌入式系统，例如智能电视等已在人们娱乐和工作生活中得以普遍应用，对这些设备的一项需求就是能够观看视频，目前，如果希望在这些智能设备上观看视频主要有这样几种方式：（1）通过系统内置的视频应用程序；（2）通过系统自带的电子市场下载安装视频播放程序；（3）通过电脑下载应用，然后通过有线（数据线）或无线（WLAN）上传到手机安装视频播放程序；（4）通过浏览器浏览视频网站来观看视频。

然而，上述观看视频的方式存在诸多缺陷：（1）用户需要在本地机上安装视频播放系统，这不仅占用存储器的存放空间，而且对系统的稳定性带来影响；（2）传统的播放器系统播放视频文件时，必须将视频文件转换成播放器支持的格式才能播放，因此用户必须事先知道转成何种格式才能满足播放要求，而且视频格式转换一般需要在电脑上通过额外的视频转换工具进行转换，用户要设置各种复杂的转换参数进行转化，而且视频格式转换时间也比较长；（3）通过浏览器浏览视频网络来观看视频需要浏览器支持观看视频的插件，对于某些特定格式的视频，需要用户自己下载安装插件，这给用户带来了不便。

发明内容

鉴于现有技术中存在的问题，本发明的目的在于提供一种基于HTML5开发的视频播放系统，其包括服务器端的，基于超文本传输协议的服务器（1）和客户端的浏览器（4），其特征在于：

基于超文本传输协议的服务器（1），用于提供基于超文本传输协议的服务，存储视频内容并提供用于展示基于HTML5开发的视频播系统用户界面的相关数据；

客户端的浏览器（4），为基于Web技术的网页浏览器或基于WebView开发的网页程序组件，属于客户端在本地应用程序中访问基于Web技术的内置程序组件，其通过基于超文本传输协议的服务器下载用于展示HTML5视频播系统用户界面的相关数据，并基于浏览器展示视频播放界面。

进一步，本发明所述的基于HTML5开发的视频播放系统，其特征在于所述基于超文本传输协议的服务器（1）包括：

内容服务器（2），用于存储视频内容；

接口服务器（3），用于提供基于HTML5开发视频播放系统所需要的用户界面展示的相关数据。

进一步，本发明所述的基于HTML5开发的视频播放系统，其特征在于所述客户端的浏览器（4）包括：

基于JavaScript开发的网页程序组件（5），用来与接口服务器进行通信，获取用于显示用户界面的相关数据；

基于HTML5开发的网页程序组件（7），用于用户构建和显示基于HTML5开发的视频播放系统的用户界面；

基于层叠样式表单（CSS）开发的网页程序组件（6），用来与基于JavaScript开发的网页程序组件协同控制在浏览器中进行视频播放时的用户界面和播放器外观。

进一步，本发明所述的基于HTML5开发的视频播放系统，其特征在于所述基于HTML5开发的网页程序组件（7）通过和基于层叠样式表单（CSS）开发的网页程序组件（6）联合使用以适应不同显示分辨率的设备。

此外，本发明还提供一种基于HTML5进行视频播放的方法，其特征在于包括如下步骤：

步骤一、在基于超文本传输协议的服务器存储视频内容并提供用于展示基于HTML5开发视频播系统的用户界面的相关数据；

步骤二、通过客户端的浏览器访问基于超文本传输协议的服务器，从基于超文本传输协议的服务器下载用于展示基于HTML5开发的视频播系统的用户界面等相关数据，并基于浏览器展示所述的视频播放系统界面。

进一步，本发明所述的基于HTML5进行视频播放的方法，其特征在于在步骤一中，使用基于超文本传输协议的服务器中的内容服务器存储视频内容；并通过其接口服务器提供基于HTML5开发视频播放系统所需要的用户界面展示的相关数据。

进一步，本发明所述的基于HTML5进行视频播放的方法，其特征在于在步骤二中，使用客户端的浏览器中基于JavaScript开发的网页程序组件与接口服务器进行通信，获取用于显示用户界面的相关数据；使用基于HTML5开发的网页程序组件构建和显示基于HTML5开发的视频播放系统的用户界面；并使用基于层叠样式表单（CSS）开发的网页程序组件与基于JavaScript开发的网页程序组件协同控制在浏览器中进行视频播放时的用户界面和播放器外观。

进一步，本发明所述的基于HTML5进行视频播放的方法，其特征在于通过联合使用基于HTML5开发的网页程序组件和基于层叠样式表单（CSS）开发的网页程序组件以适应不同显示分辨率的设备。

本发明通过浏览器技术访问并加载存储在服务器上的视频应用系统，选择视频播放后浏览器从远程服务器上获取视频资源，浏览器本身可以对视频进行解码播放，HTML5视频应用系统本身不用做视频解码的工作。HTML5实现的视频应用系统无需安装，升级，大幅度简化了用户观看视频的门槛，有效避免某些内容版权只能在网页上播放的限制。

附图说明

图1是本发明所述基于HTML5协议的进行视频播放的整体功能架构图；

图2是本发明所述基于HTML5协议的视频客户端的架构图。

具体实施方式

HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动web标准化运动的发展，一些公司联合起来，成立了一个叫做WebHypertextApplicationTechnologyWorkingGroup（Web超文本应用技术工作组-WHATWG）的组织，HTML5草案的前身名为WebApplications1.0，于2004年由WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。HTML5的第一份正式草案已于2008年1月22日公布。HTML5有两大特点：首先，强化了Web网页的表现性能。其次，追加了本地数据库等Web应用的功能。HTML5规范的具体内容可参见：超文本传输协议://www.whatwg.org/specs/web-apps/current-work/multipage/以及超文本传输协议://www.w3.org/TR/html5/the-iframe-element.html#the-video-element。

CSS（CascadingStylesheet），即层叠样式表，是一种在网页制作时可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制的技术。其只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块应用，庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。CSS3规范的具体内容可以参见：超文本传输协议://www.w3.org/TR/2001/WD-css3-roadmap-20010523/。

JavaScript是一种象文件一样的描述语言，透过浏览器就可以直接执行，具体内容可以参见：超文本传输协议://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf。

本发明正是基于现有的HTML5协议、CSS技术以及JavaScript脚本技术来实现的基于HTLML5协议的视频播放系统以及基于HTML5协议进行视频播放的方法。其允许用户可以通过浏览器直接访问远程服务器的视频应用程序。服务器端的视频应用程序存储在web播放器上，用户通过Internet使用浏览器访问使用，播放存储在远端服务器上的视频内容。而一般的视频播放器一般只能播放本机存储或临时下载缓存的视频。

为使本发明的上述目的、特征和优点更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明：

图1是本发明所述基于HTML5协议的视频播放系统的整体功能架构图；如图1所示，基于HTML5协议的视频播放系统的整体架构包括服务器端的超文本传输协议服务器1和用户端的浏览器4，其中：

超文本传输协议服务器1是用于提供超文本传输协议服务的服务器，其包括：内容服务器2，用于存储视频内容；接口服务器3，用于提供HTML5视频播放系统所需要的用户界面展示的相关数据。用户界面是存储在服务器上的，用户通过浏览器访问并使用，用户界面由浏览器负责显示呈现给用户。程序存储在服务器上，用户通过浏览器访问使用。当服务器端的程序升级后用户再用浏览器访问就是升级后的版本。新功能、用户界面以及内容可以从服务器自动传送给用户，用户不用升级程序。

客户端为Web浏览器或WebView组件4，属于在本地应用程序中访问Web的内置程序组件（控件），其包括：JavaScript组件5，用来与接口服务器进行通信，获取用于显示用户界面的相关数据或资源(图片)；CSS组件6，用来与JavaScript组件协同控制在浏览器中进行HTML5视频播放时的用户界面和HTML5播放器外观,包括播放/暂停按钮，进度条，当前播放时间等；HTML组件7，用于用户构建和显示用户界面，通过和CSS组件6联合使用，可以对不同显示分辨率的设备均有良好的显示效果。

图2是本发明所述基于HTML5协议的视频客户端的架构图。如图2所示，整个客户端使用WEB技术构建，UI交互使用HTML、CSS、JavaScript技术来实现。视频播放使用HTML5的Video标签实现播放。Video标签是HTML5标准的组成部分之一。浏览器如果支持HTML5的Video标签，就可以在浏览器中直接播放视频。Video标签的具体技术细节见:超文本传输协议://www.w3.org/TR/html5/the-iframe-element.html#the-video-element。由于HTML5视频播放系统是存储在服务器上，并没有安装在本机上，所以几乎不占用任何存储空间。所以在通过浏览器或其他客户端应用程序播放视频时，首先通过接口服务器下载HTML5视频播放系统所需要的用户界面展示的相关数据，并可以很容易整合到其他应用程序，一般的应用程序UI方面的编程是非常费时费力的，且不方便调试，使用基于HTML5的开发的UI页面，可以通过在本地应用程序中内嵌浏览器控件（WebView）来使用。浏览器控件一般是开发套件自带的控件，不用额外进行开发，通过浏览器直接使用，不用进行任何安装，更新，配置，具有良好的设备兼容性和跨平台特性，同时在多种设备兼容和适配方面有更好的表现。HTML5是一个开放的标准，只要浏览器遵循这个标准理论上就可以正常使用。

由于一些版权内容在购买的时候就定义成只能在web上进行播放，所以一般客户端无权播放，基于HTML5的视频播放系统是基于web技术的，用户可以通过浏览器访问与web在同一个域名下具有web一样的版权的视频，并且观看最新的视频内容，无需安装或升级程序。相对于浏览器直接观看视频网站，这种方法结合了网站和本地应用程序。服务器端的视频应用程序用户无需安装即可使用，具有本地应用程序易于操作，使用方便的特点，同时在内容更新，用户界面显示方面可以做到和网站一样在服务器端部署完成。本机上的本地应用程序可以是一般的视频播放系统，也可以是一般的安装在本机上以后才能使用的各种应用程序，本发明通过浏览器技术访问并加载存储在服务器上的视频应用系统，选择视频播放后浏览器从远程服务器上获取视频资源，浏览器本身可以对视频进行解码播放，HTML5视频应用系统本身不用做视频解码的工作。HTML5实现的视频应用系统无需安装，升级，大幅度简化了用户观看视频的门槛，有效避免某些内容版权只能在网页上播放的限制。

用户通过浏览器进入HTML5视频播放系统选择视频播放，当用户看完这个视频，或对这个视频不感兴趣的时候通过播放界面提供的“画中画功能”直接观看相关或其他推荐的视频。用户在不用退出播放界面就可以方便的观看相关或推荐的视频。通过HTML5实现的视频播放“画中画”功能使用户更加方便的观看相关和推荐的视频。使用户的观看体验变成选择视频观看这种简单的模式，更接近像看电视播可以连续播台的体验。而不需要进行通常视频应用的选择视频进入播放界面观看视频－退出播放界面－选择其他视频观看的观看模式。同时画中画功能还可以根据用户观看的视频类型推荐给用户可能喜欢的视频观看。

本发明具体应用方式有如下两种方式：

一、从浏览器进入

1、用户打开浏览器，输入HTML5视频播放系统的URL地址，或通过任何指向HTML5视频播放系统的URL地址的超链接（例如：短信中的，网页中的，邮件中的）。

2、HTML5视频播放系统启动开始，显示启动界面，同时连接接口服务器获得显示主界面的相关初始化数据。

3、数据初始化完毕进入主显示界面，同时提示用户可以把该入口URL地址，添加到桌面主屏幕或书签以便更方便的使用。

4、点击界面中的视频观看。

二、从应用程序进入

1、用户打开本地视频播放系统

2、选择视频播放

3、由于版权限制，该视频只能通过浏览器播放。

4、应用程序提示进入HTML5视频播放系统的入口URL地址进行播放。

5、直接进入HTML5视频播放系统的播放页面使用HTML5协议播放只授权给网站的视频。

6.、视频播放中或完成后，可以通过播放界面提供的返回按钮或设备自身提供的返回按钮返回刚才的应用程序界面。

本发明的具体应用例如下：

案例1:用户使用HTML5视频客户端观看视频

服务器端包括：视频服务器，用于存储视频，接入Internet；HTML5视频客户端服务器，用于存储HTML5视频播放系统。对于HTML5视频播放系统，可以先在服务器上部署好web服务(超文本传输协议Server),并将该服务器接入Internet，之后将HTML5视频播放系统上传到该服务器。

客户端（手机，平板PAD）：用于支持浏览器应用，并设置好wlan或3g连接网络。

交互使用过程如下：

用户通过客户端的浏览器访问HTML5视频播放系统的URL地址，服务器收到客户端的请求将服务器上的系统通过Internet传输给客户端的浏览器。浏览器加载并显示。用户选择某一视频播放，播放系统通过HTML5video标签指定该视频的实际播放地址。浏览器根据Video标签标识的视频地址从视频服务器上获取视频并播放。

案例2：通过HTML5视频客户端播放web版权视频

服务器端包括：视频服务器，用于存储视频，接入Internet；HTML5视频客户端服务器，用于存储HTML5视频播放系统。对于HTML5视频播放系统，可以先在服务器上部署好web服务(超文本传输协议Server),并将该服务器接入Internet，之后将HTML5视频播放系统上传到该服务器。

客户端：是用于HTML5协议的视频播放系统。该客户端系统，可以通过客户端自带的应用程序市场，网页下载，USB传输等方式下载并安装在本地的视频播放系统。

交互使用过程如下：

用户打开安装好的本地视频播放系统，并选择某一视频观看，由于web播放的版权限制该视频无法进行播放，此时弹出用户可以打开浏览器访问HTML5视频播放系统播放该视频，用户选择打开播放，此时浏览器被自动打开并访问HTML5视频播放播放该视频。播放完毕后用户通过播放界面的“返回”按钮本地的视频播放系统。

案例3：使用视频画中画更方便的观看视频

服务器，客户端架设同案例1

交互使用过程如下：

用户选择某一视频观看后，在视频播放的界面，会在屏幕边缘（左右两边，或上下两边）部分显示和次视频相关的一些视频。例如：如果是电视剧就是相关的剧集，电影就是同类型题材的。即在视频播放当中会显示其他视频的画面(静止画面，可以是宣传海报或者视频截图)，用户可以通过点击这些画面来直接播放相应的视频。

以上是对本发明的优选实施例进行的详细描述，但本领域的普通技术人员应该意识到，在本发明的范围内和精神指导下，各种改进、添加和替换都是可能的，例如调整接口调用顺序、改变消息格式和内容、使用不同的编程语言（如C、C++、Java等）实现等。这些都在本发明的权利要求所限定的保护范围内。

Claims (4)

1.一种基于HTML5开发的视频播放系统，其包括服务器端的，基于超文本传输协议的服务器(1)和客户端的浏览器(4)，其特征在于：

基于超文本传输协议的服务器(1)，用于提供基于超文本传输协议的服务，存储视频内容并提供用于展示基于HTML5开发的视频播放系统用户界面的相关数据；

客户端的浏览器(4)，为基于Web技术的网页浏览器或基于WebView开发的网页程序组件，属于客户端在本地应用程序中访问基于Web技术的内置程序组件，其通过基于超文本传输协议的服务器下载用于展示HTML5视频播放系统用户界面的相关数据，并基于浏览器展示视频播放界面；

所述基于超文本传输协议的服务器(1)包括：内容服务器(2)，用于存储视频内容；接口服务器(3)，用于提供基于HTML5开发视频播放系统所需要的用户界面展示的相关数据；所述用户界面是存储在服务器上的，用户通过浏览器访问并使用，用户界面由浏览器负责显示给用户；

所述客户端的浏览器(4)包括：

基于JavaScript开发的网页程序组件(5)，用来与接口服务器进行通信，获取用于显示用户界面的相关数据；

基于HTML5开发的网页程序组件(7)，用于用户构建和显示基于HTML5开发的视频播放系统的用户界面；

基于层叠样式表单(CSS)开发的网页程序组件(6)，用来与基于JavaScript开发的网页程序组件协同控制在浏览器中进行视频播放时的用户界面和播放器外观；

用户通过客户端的浏览器(4)进入所述基于HTML5开发的视频播放系统选择视频播放，当用户看完这个视频或对这个视频不感兴趣的时候通过播放界面提供的“画中画功能”直接观看相关或其他推荐的视频。

2.根据权利要求1所述的基于HTML5开发的视频播放系统，其特征在于所述基于HTML5开发的网页程序组件(7)通过和基于层叠样式表单(CSS)开发的网页程序组件(6)联合使用以适应不同显示分辨率的设备。

3.一种基于HTML5进行视频播放的方法，其特征在于包括如下步骤：

步骤一、在基于超文本传输协议的服务器存储视频内容并提供用于展示基于HTML5开发视频播放系统的用户界面的相关数据；使用基于超文本传输协议的服务器中的内容服务器存储视频内容；并通过其接口服务器提供基于HTML5开发视频播放系统所需要的用户界面展示的相关数据；所述用户界面是存储在服务器上的，用户通过浏览器访问并使用，用户界面由浏览器负责显示给用户；

步骤二、通过客户端的浏览器访问基于超文本传输协议的服务器，从基于超文本传输协议的服务器下载用于展示基于HTML5开发的视频播放系统的用户界面的相关数据，并基于浏览器展示所述的视频播放系统界面；使用客户端的浏览器中基于JavaScript开发的网页程序组件与接口服务器进行通信，获取用于显示用户界面的相关数据；使用基于HTML5开发的网页程序组件构建和显示基于HTML5开发的视频播放系统的用户界面；并使用基于层叠样式表单(CSS)开发的网页程序组件与基于JavaScript开发的网页程序组件协同控制在浏览器中进行视频播放时的用户界面和播放器外观；

用户通过客户端的浏览器(4)进入所述基于HTML5开发的视频播放系统选择视频播放，当用户看完这个视频或对这个视频不感兴趣的时候通过播放界面提供的“画中画功能”直接观看相关或其他推荐的视频。

4.根据权利要求3所述的基于HTML5进行视频播放的方法，其特征在于通过联合使用基于HTML5开发的网页程序组件和基于层叠样式表单(CSS)开发的网页程序组件以适应不同显示分辨率的设备。