Summary of the invention
The present invention realizes a kind of many bursts video playback technology based on HTML5 video; Many bursts video distribution mechanism of ingenious design face_video and the domestic main flow of the seamless compatibility of buffer_video; When video playback completion and the search of the video content overall situation; Rationally switch the state of face_video and buffer_video, when ensureing smooth watching, save Video service merchant's bandwidth.
The present invention provides a kind of many bursts video broadcasting method based on the HTML5 player, comprising: send the HTTP request to index server, carry video ID (video_id) information in this request; The video metadata information that the reception hint server returns according to video ID (video_id), this metadata information comprise duration, the burst address of duration, burst number, each burst; The attribute of first broadcast unit and second broadcast unit is set, make the broadcast unit of winning to be shown to the user, and second broadcast unit is hidden in the backstage loading content; To content server requests video data content, first broadcast unit is loaded and play the content of first section burst, and second broadcast unit loads the content of second section burst on the backstage; After first broadcast unit plays first section burst; Change the attribute of first broadcast unit and second broadcast unit; Make second broadcast unit can be shown to the user, and play the content of the second section burst that has loaded, and first broadcast unit is hidden in the backstage execution; Begin to load the content of the 3rd section burst, so circulation is played up to all bursts.
The video label of the functional utilization HTML assembly of wherein said first broadcast unit and second broadcast unit is realized.
Said method utilizes the JavaScript assembly to realize.
Wherein controlling it through the css style.display attribute that broadcast unit is set is shown to the user or is hidden in the backstage.
The present invention also provides a kind of many bursts video play device based on the HTML5 player, comprising: send the unit of HTTP request to index server, carry video ID (video_id) information in this request; The unit of the video metadata information that the reception hint server returns according to video ID (video_id), this metadata information comprises duration, the burst address of duration, burst number, each burst; The attribute of first broadcast unit and second broadcast unit is set, make the broadcast unit of winning to be shown to the user, and second broadcast unit is hidden in the unit of backstage loading content; To content server requests video data content, first broadcast unit is loaded and play the content of first section burst, and second broadcast unit loads the unit of the content of second section burst on the backstage; After first broadcast unit plays first section burst; Change the attribute of first broadcast unit and second broadcast unit; Make second broadcast unit can be shown to the user, and play the content of the second section burst that has loaded, and first broadcast unit is hidden in the backstage execution; Begin to load the content of the 3rd section burst, so circulate up to the unit that all bursts are played.
The video label of the functional utilization HTML assembly of wherein said first broadcast unit and second broadcast unit is realized.
Said device utilizes the JavaScript assembly to realize.
Wherein controlling it through the css style.display attribute that broadcast unit is set is shown to the user or is hidden in the backstage.
The present invention also provides a kind of and has realized the browser of many bursts video playback comprising control unit and broadcast unit based on the HTML5 player, and said control unit is used for sending the HTTP request to index server, carries video ID (video_id) information in this request; The video metadata information that the reception hint server returns according to video ID (video_id), this metadata information comprise duration, the burst address of duration, burst number, each burst; Said broadcast unit comprises first broadcast unit and second broadcast unit; Said control unit is provided with the attribute of first broadcast unit and second broadcast unit; Make one of them broadcast unit can be shown to the user; And another broadcast unit is hidden in the backstage loading content, and the attribute that the incident that finishes playing of one section burst can trigger first broadcast unit and second broadcast unit is changed each other; Broadcast unit is to content server requests video data content, make first broadcast unit begin to load and play the content of first section burst, and second broadcast unit loads the content of second section burst on the backstage; After first broadcast unit plays first section burst; The attribute conversion of first broadcast unit and second broadcast unit; Second broadcast unit can be shown to the user, and plays the content of the second section burst that has loaded, and first broadcast unit is hidden in the backstage execution; Begin to load the content of the 3rd section burst, so circulation is played up to all bursts.
The video label of the functional utilization HTML assembly of wherein said first broadcast unit and second broadcast unit is realized.
Said control unit utilizes the JavaScript assembly to realize.
Said broadcast unit utilizes the HTML assembly to realize.
Wherein controlling it through the css style.display attribute that broadcast unit is set is shown to the user or is hidden in the backstage.
Embodiment
As shown in Figure 1 is the integrated stand composition that the present invention is based on many bursts audio/video player system of HTML5 video.Introduction to each several part in the system is following.
Index server 101: storage and distribution of video metadata information comprise the video duration, byte number, the address of burst number and each burst etc.
Content server 102: storage and distribution of video burst content.
Browser 103: specifically comprise JavaScript assembly 104, CSS assembly 105 and HTML assembly 106, realize following function respectively.
JavaScript assembly 104: communicate by letter with index server 101, fetch video metadata corresponding information, comprise burst information; Communicate by letter all kinds of incidents of face_video107 and buffer_video108 in the monitoring HTML assembly 106, the state exchange of control face_video107 and buffer_video108 with HTML assembly 106.
CSS assembly 105: the outward appearance with JavaScript assembly 104 Collaborative Control HTML5 players comprises broadcast/pause button, progress bar, current reproduction time etc.
The face_video107 of HTML assembly 106: be the video that shows the user on the page, the displaying video content; By JavaScript assembly 104 the burst address of face_video107 displaying video content is set, and to the content of content server 102 request video bursts.
The buffer_video108 of HTML assembly 106: be the video that hides in the page; Look ahead and the content of next burst of buffer memory; The burst address of displaying video content is set by JavaScript assembly 104 equally, and to content server 102 request video burst contents.
Control UI109: the player control UI109 that utilizes < div>label and CSS to make up mainly comprises broadcast/pause button, progress bar, current play time/total duration display box etc.
Introduce in the concrete course of work between each assembly and server below and the reciprocal process between each assembly.
1.JavaScript assembly 104, comprises the parameter video_id in duration, byte number, burst tabulation, the request to the metadata information of index server 101 request videos, expression video id;
2. index server 101 returns the metadata information of video to JavaScript assembly 104, adopts the JSON form;
3.face_video107, utilize http byte range request to content server 102 request video burst contents;
4. content server 102 returns the burst content to face_video107;
5.buffer_video108, utilize http byte range request to content server 102 request video burst contents;
6. content server 102 returns the burst content to buffer_video108;
7.JavaScript the element in the assembly 104 control HTML assemblies 106 mainly is player control element and video label, JavaScript assembly 104 can be provided with the src of video label, and the broadcast of control and monitoring video, suspends etc.
8.HTML assembly 106 to JavaScript assembly 104 variety of event of dishing out, mainly contains the broadcast event of video, buffered event is play End Event etc., and JavaScript assembly 104 can carry out next step operation according to these incidents.
As shown in Figure 2 is face_video107 and buffer_video108 state exchange sketch map.
Wherein, after dotted line 9 was meant that face_video107 finishes, the new burst address of meeting automatic reception transferred buffer_video108 to, and got into the load state; Dotted line 10 can impel buffer_video108 to transfer face_video107 to after being meant that face_video107 finishes, and gets into the play state.
Here the video of lifting five bursts comes emphasis to have a talk about the state switching of face_video107 and buffer_video108.
Prerequisite is that getPlayList returns the video burst information: when face_video107 finishes playing, in seek and in the end, how to handle.
Such as, the user asks a page, http://host/videoid/{value}
Browser 103 is written into this page; JavaScript assembly 104 is to 101 requests of index server; Http:// index_server/getMeta/videoid/{value}; Index server 101 acquire value}, and return the metadata information (these metadata informations are when video deposits server in, generation) of storage:
Above-mentioned metadata information shows that this video has 6 bursts, and comprises the url address of each burst.
JavaScript just can be provided with the duration piece of player control UI109 after obtaining metadata information, be 3600s here, just one hour; Can specify src to face_video107 then is http://data_server/getData/{value_1}; Specifying src to buffer_video108 is http://data_server/getData/{value_2}, and through calling play () and pause (), make that face_video107 begins to play, and buffer_video108 suspends, so that cushion in the rear end.After http://data_server/getData/{value_1} finishes playing; Face_video107 and buffer_video108 realization state switch; Begin to play http://data_server/getData/{value_2}; Simultaneously, face_video107 before begins to cushion http://data_server/getData/{value_3}, and the rest may be inferred later on.
The many bursts video playback flow process that the present invention is based on HTML5video is specific as follows:
1. the user opens the broadcast page, has the information of video id (video_id) among the page URL;
2.JavaScript assembly 104 sends the HTTP request to index server 101, wherein carrying parameter is video_id;
3. index server 101 is according to video_id, returns the metadata information of video to client, comprises duration, byte number, burst address of duration, byte number, burst number and each burst etc.; If the metadata information mistake of returning so follow-uply just can not obtain correct data when content server requests data, at this moment, player ejects miscue information to the user.
4.JavaScript obtain after the return data of index server 101; Total duration displaying block of player control UI109 is set; The src attribute of face_video107 and buffer_video108 is set simultaneously; Utilize CSS assembly 105 simultaneously, the css style.display of face_video107 is set to block, and the css style.display attribute of buffer_video108 is set to none; Thereby make face_video107 can be shown to the user, and buffer_video108 hide execution.Afterwards, JavaScript will load face_video107 and buffer_video108 respectively, and calls face_video.play () and make it to begin to play, and calls buffer_video.pause () and makes it in back buffer.
5., and, will send HttpByte Range request msg content to content server 102 through giving birth to the mechanism that realizes in the browser 103 by after the external load in case face_video107 or buffer_video108 have the src property value of non-NULL.With face_video107 is example, in case the return data content is filled up the buffering area of face_video107 self, will begin broadcasting pictures.And because buffer_video108 has been suspended, thereby it only can constantly fill up buffering area, and can broadcasting pictures.If because the backstage service fault causes the loading data that delays, the timeout threshold of establishing in surpassing, then player can stop work at present, proposes miscue information to the user.
6. when face_video107 finishes playing; Can dish out corresponding End Event come, thereby caught by outside JavaScript assembly 104, JavaScript assembly 104 begins the corresponding call back function of startup incident; Buffer_video108 is become face_video107, begin to play; Face_video107 is become buffer_video108, new src is set, and hide loading on the backstage.Because in the face_video107 playing process, buffer_video108 is the loading data on the backstage always, thereby this switching can be smooth relatively, do not have tangible video card and broadcast life.In the metadata information that index server returns, got all burst numbers of video, in playing process, these bursts of processed in sequence.If the last sheet also has been loaded, so just can stop loading procedure, wait for that loaded burst finishes playing and get final product.
Ingenious two HTML5 < video>that utilize of technical scheme of the present invention are called face_video and buffer_video108.Face_video plays a video burst at front end, and while buffer_video108 is hidden in the rear end follow-up burst is cushioned; When face_video finishes playing, utilize ess to switch to front end buffer_video108, state is converted into face_video.According to this practice, can guarantee that when burst switches picture is smooth; Again can with the seamless compatibility of many bursts video distribution present situation of main flow, thereby effectively save flow.Under single burst situation, video is downloaded always, if network speed is better, this video is downloaded completion soon so, and in fact the average viewing time of user only accounts for about half of video, and half just is equivalent to invalid download so at the back, is a kind of wasting of resources.In our solution, buffer_video only loads follow-up a slice content, and this has just effectively suppressed the quantity of invalid download.