CN102647634B - 一种基于HTML5video的多分片视频播放方法及装置 - Google Patents

Abstract

本发明涉及一种基于HTML5播放器的多分片视频播放方法、装置及浏览器。浏览器向索引服务器发送HTTP请求，接收索引服务器根据视频ID(video_id)返回的视频元数据信息，然后设置第一播放器和第二播放器的属性，使得第一播放器可以显示给用户，而第二播放器隐藏在后台执行，向内容服务器请求视频数据内容，分别加载第一播放器和第二播放器，使第一播放器开始向用户播放第一段分片的内容，而第二播放器在后台加载第二段分片的内容，当第一播放器将第一段分片播放完后，改变第一播放器和第二播放器的属性，使得第二播放器可以显示给用户，并播放已加载的第二段分片的内容，而第一播放器被隐藏在后台执行，开始加载第三段分片的内容。本发明的方案既能保证在分片切换时，画面流畅；又能与主流的多分片视频分发现状无缝兼容，从而有效节省流量。

Description

一种基于HTML5video的多分片视频播放方法及装置

技术领域

本发明涉及媒体播放技术，特别是基于HTML5的媒体播放技术。

背景技术

当前在线视频网站的播放器分为两大类实现技术：Flash实现技术和HTML5实现技术。Flash由于耗电等特性在移动平台上表现欠佳，为了满足移动平台用户在线观看视频的需求，各企业积极研发HTML5的播放技术。美国最大的在线视频网站Youtube率先推出了HTML5播放器，其他网站也有跟进。

现有的HTML5媒体播放器技术普遍利用HTML5，CSS以及JavaScript技术来实现，主要工作原理都是用CSS来构建播放器外观，再用JavaScript组件来获取视频地址，然后利用HTML5中的<video>标签来实现视频内容的获取和播放。而事实是，当前，只有一些先进的浏览器(如Chrome，Firefox，IE9)才支持HTML5的<video>。

目前的HTML5播放器技术有一个重大缺陷：它不支持多分片视频架构。而国内的视频网站却往往采用多分片视频架构的方式进行存储和分发。所述之多分片视频架构是指：将一个大的视频文件切分为多个小分片，从而带来存储、分发及带宽控制上的便利。所以，如果把现有基于HTML 5的播放器应用于国内的视频网站，那么就必然导致跨分片时的视频停顿或者画面抖动。而本发明则提出一种新的HTML5多分片视频播放技术，能够较好的适应多分片视频架构，并能消除分片切换过程中明显的卡播和画面闪动现象。

发明内容

本发明实现一种基于HTML5 video的多分片视频播放技术，巧妙设计face_video和buffer_video无缝兼容国内主流的多分片视频分发机制，在视频播放完成以及视频内容全局搜寻时，合理切换face_video和buffer_video的状态，保障流畅观看的同时，节省视频服务商的带宽。

本发明提供一种基于HTML5播放器的多分片视频播放方法，包括：向索引服务器发送HTTP请求，该请求中携带视频ID(video_id)信息；接收索引服务器根据视频ID(video_id)返回的视频元数据信息，该元数据信息包括时长、分片数、各分片的时长、分片地址；设置第一播放单元和第二播放单元的属性，使得第一播放单元可以显示给用户，而第二播放单元隐藏在后台加载内容；向内容服务器请求视频数据内容，使第一播放单元加载并播放第一段分片的内容，而第二播放单元在后台加载第二段分片的内容；当第一播放单元将第一段分片播放完后，改变第一播放单元和第二播放单元的属性，使得第二播放单元可以显示给用户，并播放已加载的第二段分片的内容，而第一播放单元被隐藏在后台执行，开始加载第三段分片的内容，如此循环直到所有分片被播放完。

其中所述第一播放单元和第二播放单元的功能利用HTML组件的video标签来实现。

所述方法利用JavaScript组件来实现。

其中通过设置播放单元的css style.display属性来控制其是显示给用户还是隐藏在后台。

本发明还提供了一种基于HTML5播放器的多分片视频播放装置，包括：向索引服务器发送HTTP请求的单元，该请求中携带视频ID(video_id)信息；接收索引服务器根据视频ID(video_id)返回的视频元数据信息的单元，该元数据信息包括时长、分片数、各分片的时长、分片地址；设置第一播放单元和第二播放单元的属性，使得第一播放单元可以显示给用户，而第二播放单元隐藏在后台加载内容的单元；向内容服务器请求视频数据内容，使第一播放单元加载并播放第一段分片的内容，而第二播放单元在后台加载第二段分片的内容的单元；当第一播放单元将第一段分片播放完后，改变第一播放单元和第二播放单元的属性，使得第二播放单元可以显示给用户，并播放已加载的第二段分片的内容，而第一播放单元被隐藏在后台执行，开始加载第三段分片的内容，如此循环直到所有分片被播放完的单元。

其中所述第一播放单元和第二播放单元的功能利用HTML组件的video标签来实现。

所述装置利用JavaScript组件来实现。

其中通过设置播放单元的css style.display属性来控制其是显示给用户还是隐藏在后台。

本发明还提供了一种基于HTML5播放器实现多分片视频播放的浏览器，包括控制单元和播放单元，所述控制单元，用于向索引服务器发送HTTP请求，该请求中携带视频ID(video_id)信息；接收索引服务器根据视频ID(video_id)返回的视频元数据信息，该元数据信息包括时长、分片数、各分片的时长、分片地址；所述播放单元包括第一播放单元和第二播放单元；所述控制单元设置第一播放单元和第二播放单元的属性，使得其中一个播放单元可以显示给用户，而另一个播放单元隐藏在后台加载内容，并且一段分片播放完成的事件可以触发第一播放单元和第二播放单元的属性相互转换；播放单元向内容服务器请求视频数据内容，使第一播放单元开始加载并播放第一段分片的内容，而第二播放单元在后台加载第二段分片的内容；当第一播放单元将第一段分片播放完后，第一播放单元和第二播放单元的属性转换，第二播放单元可以显示给用户，并播放已加载的第二段分片的内容，而第一播放单元隐藏在后台执行，开始加载第三段分片的内容，如此循环直到所有分片被播放完。

其中所述第一播放单元和第二播放单元的功能利用HTML组件的video标签来实现。

所述控制单元利用JavaScript组件来实现。

所述播放单元利用HTML组件来实现。

其中通过设置播放单元的css style.display属性来控制其是显示给用户还是隐藏在后台。

附图说明

图1是本发明基于HTML5video的多分片视频播放***的整体架构图。

图2所示是face_video和buffer_video状态转换示意图。

具体实施方式

如图1所示是本发明基于HTML5 video的多分片视频播放***的整体架构图。对***中各部分的介绍如下。

索引服务器101：存储并分发视频元数据信息，包括视频时长，字节数，分片数以及各分片的地址等。

内容服务器102：存储并分发视频分片内容。

浏览器103：具体包括JavaScript组件104、CSS组件105和HTML组件106，分别实现下述功能。

JavaScript组件104：与索引服务器101通信，取回视频对应的元数据信息，包括分片信息；与HTML组件106通信，监听HTML组件106中face_video107和buffer_video108的各类事件，控制face_video107和buffer_video108的状态转换。

CSS组件105：与JavaScript组件104协同控制HTML5播放器的外观，包括播放/暂停按钮，进度条，当前播放时间等。

HTML组件106的face_video107：是页面上展示给用户的video，播放视频内容；由JavaScript组件104设置face_video107播放视频内容的分片地址，并向内容服务器102请求视频分片的内容。

HTML组件106的buffer_video108：是页面中隐藏的video，预取并缓存下一分片的内容，同样由JavaScript组件104设置播放视频内容的分片地址，并向内容服务器102请求视频分片内容。

控制UI109：利用<div>标签和CSS构建的播放器控制UI109，主要包括播放/暂停按钮，进度条，当前播放时间点/总时长显示框等。

下面介绍具体工作过程中各组件与服务器之间以及各组件之间的交互过程。

1.JavaScript组件104向索引服务器101请求视频的元数据信息，包括时长、字节数、分片列表、请求中的参数video_id，表示视频id；

2.索引服务器101向JavaScript组件104返回视频的元数据信息，采用JSON格式；

3.face_video107向内容服务器102请求视频分片内容，利用http byte range请求；

4.内容服务器102向face_video107返回分片内容；

5.buffer_video108向内容服务器102请求视频分片内容，利用http byte range请求；

6.内容服务器102向buffer_video108返回分片内容；

7.JavaScript组件104控制HTML组件106中的元素，主要是播放器控制元素和video标签，JavaScript组件104可以设置video标签的src，以及控制和监听video的播放，暂停等。

8.HTML组件106向JavaScript组件104抛出各种事件，主要有video的播放事件，缓冲事件，播放结束事件等，JavaScript组件104可以根据这些事件进行下一步的操作。

如图2所示是face_video107和buffer_video108状态转换示意图。

其中，虚线9是指face_video107结束以后，会自动接收新的分片地址，转为buffer_video108，并进入load状态；虚线10是指face_video107结束以后，会促使buffer_video108转为face_video107，并进入play状态。

这里举一个五个分片的视频来重点说说face_video107和buffer_video108的状态切换。

前提是getPlayList返回视频分片信息：在face_video107播放完成时，在seek的时候，和在末尾的时候如何处理。

比如，用户请求一个页面，http://host/videoid/{value}

浏览器103载入该页面，JavaScript组件104向索引服务器101发请求，http://index_server/getMeta/videoid/{value}，索引服务器101获得到{value}，并返回存储的元数据信息(这些元数据信息是在视频存入服务器时，生成的)：

上述元数据信息显示该视频共有6个分片，并包含每个分片的url地址。

JavaScript在得到元数据信息之后，就可以设置播放器控制UI109的时长块，这里是3600s，也就是一个小时；然后可以给face_video107指定src为http://data_server/getData/{value_1}；给buffer_video108指定src为http://data_server/getData/{value_2}，并通过调用play()和pause()，使得face_video107开始播放，而buffer_video108暂停，以便在后端缓冲。当http://data_server/getData/{value_1}播放完成以后，face_video107和buffer_video108实现状态切换，开始播放http://data_server/getData/{value_2}，同时，之前的face_video107开始缓冲http://data_server/getData/{value_3}，以后依此类推。

本发明基于HTML5video的多分片视频播放流程具体如下：

1.用户打开播放页面，页面URL中带有视频id(video_id)的信息；

2.JavaScript组件104向索引服务器101发送HTTP请求，其中携带参数为video_id；

3.索引服务器101根据video_id，向客户端返回视频的元数据信息，包括时长、字节数、分片数以及各分片的时长、字节数、分片地址等；如果返回的元数据信息错误，那么后续向内容服务器请求数据时，就不能得到正确数据，这时，播放器给用户弹出错误提示信息。

4.JavaScript得到索引服务器101的返回数据之后，设置播放器控制UI109的总时长显示块，同时设置face_video107和buffer_video108的src属性，同时利用CSS组件105，将face_video107的css style.display设置为block，将buffer_video108的css style.display属性设置为none，从而使得face_video107可以显示给用户，而buffer_video108隐藏执行。之后，JavaScript要分别加载face_video107和buffer_video108，并且调用face_video.play()使之开始播放，调用buffer_video.pause()使之在后台缓冲。

5.一旦face_video107或者buffer_video108拥有非空的src属性值，并被外部加载之后，就会通过浏览器103内生实现的机制向内容服务器102发送HttpByte Range请求数据内容。以face_video107为例，一旦返回数据内容填满face_video107自身的缓冲区，就会开始播放画面。而由于buffer_video108已经被暂停，因而它只会不断的填满缓冲区，而不会播放画面。如果由于后台服务故障，导致迟迟不能加载数据，超过内设的超时阈值，则播放器会停止当前工作，给用户提出错误提示信息。

6.当face_video107播放完成时，会把相应结束事件抛出来，从而被外部的JavaScript组件104捕获，JavaScript组件104开始启动事件对应的回调函数，将buffer_video108变成face_video107，开始播放；将face_video107变成buffer_video108，设置新的src，并在后台隐藏加载。由于在face_video107播放过程中，buffer_video108一直在后台加载数据，因而这个切换会相对流畅，不会有明显的视频卡播发生。在索引服务器返回的元数据信息中，已经取到视频的所有分片数目，在播放过程中，顺次处理这些分片。如果最末一片也已经被加载了，那么就可以停止加载过程，等待已加载分片播放完成即可。

本发明技术方案巧妙利用两个HTML5<video>，称为face_video和buffer_video108。Face_video在前端播放一个视频分片，同时buffer_video108隐藏在后端对后续分片进行缓冲；当face_video播放完成时，将buffer_video108利用ess切换到前端，状态转化为face_video。按照这种作法，既能保证在分片切换时，画面流畅；又能与主流的多分片视频分发现状无缝兼容，从而有效节省流量。在单分片情况下，视频一直下载，如果网速较好，那么该视频很快就下载完成，而实际上用户平均观看时间只占到视频的一半左右，那么后面一半就相当于无效下载，是一种资源浪费。在我们的解决方案中，buffer_video仅仅加载后续一片内容，这就有效抑制了无效下载的数量。

Claims (7)

1.一种基于HTML5播放器的多分片视频播放方法，包括：

向索引服务器发送HTTP请求，该请求中携带视频ID（video_id）信息；

接收索引服务器根据视频ID（video_id）返回的视频元数据信息，该元数据信息包括时长、分片数、各分片的时长、分片地址；

设置第一播放单元和第二播放单元的属性，使得第一播放单元可以显示给用户，而第二播放单元隐藏在后台加载内容；

向内容服务器请求视频数据内容，使第一播放单元加载并播放第一段分片的内容，而第二播放单元在后台加载第二段分片的内容；

当第一播放单元将第一段分片播放完后，改变第一播放单元和第二播放单元的属性，使得第二播放单元可以显示给用户，并播放已加载的第二段分片的内容，而第一播放单元被隐藏在后台执行，开始加载第三段分片的内容，如此循环直到所有分片被播放完，其中所述第一播放单元和第二播放单元的功能利用HTML组件的video标签来实现，其中通过设置播放单元的css style.display属性来控制其是显示给用户还是隐藏在后台。

2.如权利要求1所述的方法，所述方法利用JavaScript组件来实现。

3.一种基于HTML5播放器的多分片视频播放装置，包括：

向索引服务器发送HTTP请求的单元，该请求中携带视频ID（video_id）信息；接收索引服务器根据视频ID（video_id）返回的视频元数据信息的单元，该元数据信息包括时长、分片数、各分片的时长、分片地址；

设置第一播放单元和第二播放单元的属性，使得第一播放单元可以显示给用户，而第二播放单元隐藏在后台加载内容的单元；

向内容服务器请求视频数据内容，使第一播放单元加载并播放第一段分片的内容，而第二播放单元在后台加载第二段分片的内容的单元；当第一播放单元将第一段分片播放完后，改变第一播放单元和第二播放单元的属性，使得第二播放单元可以显示给用户，并播放已加载的第二段分片的内容，而第一播放单元被隐藏在后台执行，开始加载第三段分片的内容，如此循环直到所有分片被播放完的单元，其中所述第一播放单元和第二播放单元的功能利用HTML组件的video标签来实现，其中通过设置播放单元的css style.display属性来控制其是显示给用户还是隐藏在后台。

4.如权利要求3所述的装置，所述装置利用JavaScript组件来实现。

5.一种基于HTML5播放器实现多分片视频播放的浏览器，包括控制单元和播放单元，

所述控制单元，用于向索引服务器发送HTTP请求，该请求中携带视频ID（video_id）信息；接收索引服务器根据视频ID（video_id）返回的视频元数据信息，该元数据信息包括时长、分片数、各分片的时长、分片地址；所述播放单元包括第一播放单元和第二播放单元；

所述控制单元设置第一播放单元和第二播放单元的属性，使得其中一个播放单元可以显示给用户，而另一个播放单元隐藏在后台加载内容，并且一段分片播放完成的事件可以触发第一播放单元和第二播放单元的属性相互转换；

播放单元向内容服务器请求视频数据内容，使第一播放单元开始加载并播放第一段分片的内容，而第二播放单元在后台加载第二段分片的内容；

当第一播放单元将第一段分片播放完后，第一播放单元和第二播放单元的属性转换，第二播放单元可以显示给用户，并播放已加载的第二段分片的内容，而第一播放单元隐藏在后台执行，开始加载第三段分片的内容，如此循环直到所有分片被播放完，其中所述第一播放单元和第二播放单元的功能利用HTML组件的video标签来实现，其中通过设置播放单元的css style.display属性来控制其是显示给用户还是隐藏在后台。

6.如权利要求5所述的浏览器，所述控制单元利用JavaScript组件来实现。

7.如权利要求5所述的浏览器，所述播放单元利用HTML组件来实现。

Images