专利名称：一种基于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(Videojd)信息；接收索引服务器根据视频ID(Videojd)返回的视频元数据信息，该元数据信息包括时长、分片数、各分片的时长、分片地址；设置第一播放单元和第二播放单元的属性，使得第一播放单元可以显示给用户，而第二播放单元隐藏在后台加载内容；向内容服务器请求视频数据内容，使第一播放单元加载并播放第一段分片的内容，而第二播放单元在后台加载第二段分片的内容；当第一播放单元将第一段分片播放完后，改变第一播放单元和第二播放单元的属性，使得第二播放单元可以显示给用户，并播放已加载的第二段分片的内容，而第一播放单元被隐藏在后台执行，开始加载第三段分片的内容，如此循环直到所有分片被播放完。其中所述第一播放单元和第二播放单元的功能利用HTML组件的video标签来实现。所述方法利用JavaScript组件来实现。
其中通过设置播放单元的css style, display属性来控制其是显示给用户还是隐减在后台。本发明还提供了一种基于HTML5播放器的多分片视频播放装置，包括向索引服务器发送HTTP请求的单元,该请求中携带视频ID(video_id)信息；接收索引服务器根据视频ID(Videojd)返回的视频元数据信息的単元，该元数据信息包括时长、分片数、各分片的时长、分片地址；设置第一播放单元和第二播放单元的属性，使得第一播放单元可以显示给用户，而第二播放单元隐藏在后台加载内容的単元；向内容服务器请求视频数据内容，使第一播放单元加载并播放第一段分片的内容，而第二播放单元在后台加载第二段分片的内容的单元；当第一播放单元将第一段分片播放完后，改变第一播放单元和第二播放单元的属性，使得第二播放单元可以显示给用户，并播放已加载的第二段分片的内容，而第一播放単元被隐藏在后台执行，开始加载第三段分片的内容，如此循环直到所有分片被播放完的单元。其中所述第一播放单元和第二播放单元的功能利用HTML组件的video标签来实现。所述装置利用JavaScript组件来实现。其中通过设置播放单元的css style, display属性来控制其是显示给用户还是隐减在后台。本发明还提供了一种基于HTML5播放器实现多分片视频播放的浏览器，包括控制単元和播放单元，所述控制単元，用于向索引服务器发送HTTP请求，该请求中携帯视频ID(Videojd)信息；接收索引服务器根据视频ID (videojd)返回的视频元数据信息，该元数据信息包括时长、分片数、各分片的时长、分片地址；所述播放単元包括第一播放单元和第二播放单元；所述控制单元设置第一播放单元和第二播放单元的属性，使得其中ー个播放単元可以显示给用户，而另一个播放単元隐藏在后台加载内容，并且一段分片播放完成的事件可以触发第一播放单元和第二播放单元的属性相互转换；播放单元向内容服务器请求视频数据内容，使第一播放单元开始加载并播放第一段分片的内容，而第二播放单元在后台加载第二段分片的内容；当第一播放单元将第一段分片播放完后，第一播放单元和第ニ播放单元的属性转换，第二播放单元可以显示给用户，并播放已加载的第二段分片的内容，而第一播放单元隐藏在后台执行，开始加载第三段分片的内容，如此循环直到所有分片被播放完。其中所述第一播放单元和第二播放单元的功能利用HTML组件的video标签来实现。
所述控制单元利用JavaScript组件来实现。所述播放単元利用HTML组件来实现。其中通过设置播放单元的css style, display属性来控制其是显示给用户还是隐减在后台。
图I是本发明基于HTML5vide0的多分片视频播放系统的整体架构图。图2所不是face_video和buffer_video状态转换不意图。
具体实施例方式如图I所示是本发明基于HTML5 video的多分片视频播放系统的整体架构图。对系统中各部分的介绍如下。索引服务器101 :存储并分发视频元数据信息，包括视频时长，字节数，分片数以及各分片的地址等。内容服务器102:存储并分发视频分片内容。浏览器103 :具体包括JavaScript组件104、CSS组件105和HTML组件106，分别实现下述功能。JavaScript组件104 :与索引服务器101通信，取回视频对应的元数据信息，包括 分片信息；与HTML组件106通信，监听HTML组件106中face_videol07和buffer_videol08的各类事件，控制face_videol07和buffer_videol08的状态转换。CSS组件105 :与JavaScript组件104协同控制HTML5播放器的外观，包括播放/暂停按钮，进度条，当前播放时间等。HTML组件106的face_videol07 :是页面上展示给用户的video,播放视频内容；由JavaScript组件104设置face_videol07播放视频内容的分片地址，并向内容服务器102请求视频分片的内容。HTML组件106的buffer_videol08 :是页面中隐藏的video,预取并缓存下一分片的内容，同样由JavaScript组件104设置播放视频内容的分片地址，并向内容服务器102请求视频分片内容。控制M109 :利用<div>标签和CSS构建的播放器控制ni09，主要包括播放/暂停按钮，进度条，当前播放时间点/总时长显示框等。下面介绍具体工作过程中各组件与服务器之间以及各组件之间的交互过程。I. JavaScript组件104向索引服务器101请求视频的元数据信息,包括时长、字节数、分片列表、请求中的參数video_id,表示视频id ；2.索引服务器101向JavaScript组件104返回视频的元数据信息，采用JSON格式；3. face_videol07向内容服务器102请求视频分片内容,利用http byte range请求；4.内容服务器102向face_videol07返回分片内容；5. buffer_videol08向内容服务器102请求视频分片内容,利用http byte range请求；6.内容服务器102向buffer_videol08返回分片内容；7. JavaScript组件104控制HTML组件106中的元素，主要是播放器控制元素和video标签,JavaScript组件104可以设置video标签的src,以及控制和监听video的播放，暂停等。8. HTML组件106向JavaScript组件104抛出各种事件,主要有video的播放事件，缓冲事件，播放结束事件等，JavaScript组件104可以根据这些事件进行下ー步的操作。如图2所不是face_videol07和buffer_videol08状态转换不意图。
其中，虚线9是指face—videol07结束以后，会自动接收新的分片地址，转为buffer—videol08，并进入load状态；虚线10是指face—videol07结束以后，会促使buffer—videol08 转为 face—videol07，并进入 play 状态。这里举一个五个分片的视频来重点说说face—videol07和buffer—videol08的状态切換。前提是getPlayList返回视频分片信息在face—videol07播放完成时，在seek的时候，和在末尾的时候如何处理。比如，用户请求ー个页面，http://host/video id/ {value}浏览器103载入该页面，JavaScript组件104向索引服务器101发请求，http://index—server/getMeta/videoid/{value}，索引服务器 101 获得到{value}，并返回存储的
元数据信息(这些元数据信息是在视频存入服务器时，生成的)
{
Viaeo id:{value},
Seconds: 3600,
Bytes: 90M,
Segs {
Num: 6 ,
Data: {
‘1，:{
Seconds: 60s,
Bytes: 15M,
Src: http://data server/getData/{value l}
}， _ _
‘2’:{
Seconds: 60s,
Bytes: 15M, Src: http://data server/getData/{value—2}‘3’:{
Seconds: 60s,
Bytes: 15M,
Src: http://data server/getData/{value 3}
}, "
‘4’:{Seconds: 60s,
Bytes: 15M,
Src: http://data server/getData/{value—4}
}, "
‘5’:{
Seconds: 60s,
Bytes: 15M,
Src: http://data server/getData/{value—5}
}, "
‘6’:{
Seconds: 60s,
Bytes: 15M,
Src: http://data server/getData/{value—6}
} " "
}
}
}上述元数据信息显示该视频共有6个分片，并包含每个分片的urI地址。JavaScript在得到元数据信息之后，就可以设置播放器控制瓜109的时长块，这里是3600s,也就是一个小时；然后可以给face_videol07指定src为http://data_server/getData/{value_l}；给 buffer_videol08 指疋 src 为 http://data_server/getData/ {value_2},并通过调用 play ()和 pause (),使得 face_videol07 开始播放，而buffer_videol08 暂停，以便在后端缓冲。当 http://data_server/getData/{value_l}播放完成以后，face_videol07和buffer_videol08实现状态切换，开始播放http://data_server/getData/{value_2},同时，之前的 face_videol07 开始缓冲 http://data_server/getData/ {value_3},以后依此类推。本发明基于HTML5video的多分片视频播放流程具体如下I.用户打开播放页面,页面URL中带有视频id(video_id)的信息；2. JavaScript组件104向索引服务器101发送HTTP请求,其中携带參数为video_id ；3.索引服务器101根据videojd，向客户端返回视频的元数据信息，包括时长、字节数、分片数以及各分片的时长、字节数、分片地址等；如果返回的元数据信息错误，那么后续向内容服务器请求数据时，就不能得到正确数据，这时，播放器给用户弹出错误提示信
o4. JavaScript得到索引服务器101的返回数据之后，设置播放器控制W109的总时长显示块，同时设置face_videol07和buffer_videol08的src属性，同时利用CSS组件105,将 face_videol07 的 css style, display 设置为 block,将 buffer_videol08 的 cssstyle, display属性设置为none,从而使得face_videol07可以显示给用户，而buffer_videol08 隐藏执行。之后，JavaScript 要分别加载 face_videol07 和 buffer_videol08,并且调用face_video. play ()使之开始播放,调用buffer_video. pause ()使之在后台缓冲。5. 一旦face_videol07或者buffer_videol08拥有非空的src属性值,并被外部加载之后，就会通过浏览器103内生实现的机制向内容服务器102发送HttpByte Range请求数据内容。以face_videol07为例,一旦返回数据内容填满face_videol07自身的缓冲区，就会开始播放画面。而由于buffer_videol08已经被暂停，因而它只会不断的填满缓冲区，而不会播放画面。如果由于后台服务故障，导致迟迟不能加载数据，超过内设的超时阈值，则播放器会停止当前工作，给用户提出错误提示信息。6.当face_videol07播放完成时，会把相应结束事件抛出来，从而被外部的JavaScript组件104捕获,JavaScript组件104开始启动事件对应的回调函数,将buffer_videol08 变成 face_videol07,开始播放；将 face_videol07 变成 buffer_videol08,设置新的src,并在后台隐藏加载。由于在face_videol07播放过程中，buffer_videol08 一直在后台加载数据，因而这个切換会相对流畅，不会有明显的视频卡播发生。在索引服务器返回的元数据信息中，已经取到视频的所有分片数目，在播放过程中，顺次处理这些分片。如果最末一片也已经被加载了，那么就可以停止加载过程，等待已加载分片播放完成即可。本发明技术方案巧妙利用两个HTML5〈video>,称为face_video和buffer_videol08o Face_video在前端播放一个视频分片，同时buffer_videol08隐藏在后端对后续分片进行缓冲；当face_video播放完成时,将bufTer_videol08利用ess切换到前端,状态转化为face_Vide0。按照这种作法，既能保证在分片切换时，画面流畅；又能与主流的多分片视频分发现状无缝兼容，从而有效节省流量。在单分片情况下，视频一直下载，如果网速较好，那么该视频很快就下载完成，而实际上用户平均观看时间只占到视频的一半左右，那么后面一半就相当于无效下载，是ー种资源浪费。在我们的解决方案中，buffer_vide0仅仅加载后续一片内容，这就有效抑制了无效下载的数量。
权利要求
1.一种基于HTML5播放器的多分片视频播放方法,包括 向索引服务器发送HTTP请求,该请求中携带视频ID(video_id)信息； 接收索引服务器根 据视频ID(Videojd)返回的视频元数据信息，该元数据信息包括时长、分片数、各分片的时长、分片地址； 设置第一播放单元和第二播放单元的属性，使得第一播放单元可以显示给用户，而第ニ播放单元隐藏在后台加载内容； 向内容服务器请求视频数据内容，使第一播放单元加载并播放第一段分片的内容，而第二播放单元在后台加载第二段分片的内容； 当第一播放单元将第一段分片播放完后，改变第一播放单元和第二播放单元的属性，使得第二播放单元可以显示给用户，并播放已加载的第二段分片的内容，而第一播放单元被隐藏在后台执行，开始加载第三段分片的内容，如此循环直到所有分片被播放完。
2.如权利要求I所述的方法，其中所述第一播放单元和第二播放单元的功能利用HTML组件的video标签来实现。
3.如权利要求I所述的方法，所述方法利用JavaScript组件来实现。
4.如权利要求I所述的方法，其中通过设置播放单元的cssstyle, display属性来控制其是显示给用户还是隐藏在后台。
5.一种基于HTML5播放器的多分片视频播放装置，包括 向索引服务器发送HTTP请求的单元,该请求中携带视频ID (video_id)信息；接收索引服务器根据视频ID(Videojd)返回的视频元数据信息的単元，该元数据信息包括时长、分片数、各分片的时长、分片地址； 设置第一播放单元和第二播放单元的属性，使得第一播放单元可以显示给用户，而第ニ播放单元隐藏在后台加载内容的单元； 向内容服务器请求视频数据内容，使第一播放单元加载并播放第一段分片的内容，而第二播放单元在后台加载第二段分片的内容的单元； 当第一播放单元将第一段分片播放完后，改变第一播放单元和第二播放单元的属性，使得第二播放单元可以显示给用户，并播放已加载的第二段分片的内容，而第一播放单元被隐藏在后台执行，开始加载第三段分片的内容，如此循环直到所有分片被播放完的单元。
6.如权利要求5所述的装置，其中所述第一播放单元和第二播放单元的功能利用HTML组件的video标签来实现。
7.如权利要求5所述的装置,所述装置利用JavaScript组件来实现。
8.如权利要求5所述的装置,其中通过设置播放单元的cssstyle, display属性来控 制其是显示给用户还是隐藏在后台。
9.一种基于HTML5播放器实现多分片视频播放的浏览器，包括控制单元和播放单元， 所述控制单元，用于向索引服务器发送HTTP请求,该请求中携带视频ID (Video_id)信息；接收索引服务器根据视频ID(Videojd)返回的视频元数据信息，该元数据信息包括时长、分片数、各分片的时长、分片地址； 所述播放単元包括第一播放单元和第二播放单元； 所述控制单元设置第一播放单元和第二播放单元的属性，使得其中一个播放単元可以显示给用户，而另一个播放単元隐藏在后台加载内容，并且一段分片播放完成的事件可以触发第一播放单元和第二播放单元的属性相互转换； 播放单元向内容服务器请求视频数据内容，使第一播放单元开始加载并播放第一段分片的内容，而第二播放单元在后台加载第二段分片的内容； 当第一播放单元将第一段分片播放完后，第一播放单元和第二播放单元的属性转换，第二播放单元可以显示给用户，并播放已加载的第二段分片的内容，而第一播放单元隐藏在后台执行，开始加载第三段分片的内容，如此循环直到所有分片被播放完。
10.如权利要求9所述的 浏览器，其中所述第一播放单元和第二播放单元的功能利用HTML组件的video标签来实现。
11.如权利要求9所述的浏览器，所述控制単元利用JavaScript组件来实现。
12.如权利要求9所述的浏览器，所述播放単元利用HTML组件来实现。
13.如权利要求9所述的浏览器,其中通过设置播放单元的cssstyle, display属性来控制其是显示给用户还是隐藏在后台。
全文摘要
本发明涉及一种基于HTML5播放器的多分片视频播放方法、装置及浏览器。浏览器向索引服务器发送HTTP请求，接收索引服务器根据视频ID(video_id)返回的视频元数据信息，然后设置第一播放器和第二播放器的属性，使得第一播放器可以显示给用户，而第二播放器隐藏在后台执行，向内容服务器请求视频数据内容，分别加载第一播放器和第二播放器，使第一播放器开始向用户播放第一段分片的内容，而第二播放器在后台加载第二段分片的内容，当第一播放器将第一段分片播放完后，改变第一播放器和第二播放器的属性，使得第二播放器可以显示给用户，并播放已加载的第二段分片的内容，而第一播放器被隐藏在后台执行，开始加载第三段分片的内容。本发明的方案既能保证在分片切换时，画面流畅；又能与主流的多分片视频分发现状无缝兼容，从而有效节省流量。
文档编号H04N21/44GK102647634SQ20121013411
公开日2012年8月22日 申请日期2012年5月2日 优先权日2012年5月2日
发明者卢述奇, 吴昊宇, 姚键, 潘柏宇, 白鹏, 邱丹 申请人:合一网络技术(北京)有限公司