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 the domestic main flow of compatibility that ingehious design face_video and buffer_video are seamless, complete and when the video content overall situation is searched in video playback, rationally switch the state of face_video and buffer_video, when ensureing smooth watching, save Video service business's bandwidth.
The invention provides a kind of many bursts video broadcasting method based on HTML5 player, comprising: send HTTP request to index server, in this request, carry video ID (video_id) information; The video metadata information that 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 the first broadcast unit and the second broadcast unit is set, make the first broadcast unit can be shown to user, and the second broadcast unit is hidden in backstage loading content; To content server request video data content, make the first broadcast unit load and play the content of first paragraph burst, and the second broadcast unit load the content of second segment burst on backstage; After the first broadcast unit plays first paragraph burst, change the attribute of the first broadcast unit and the second broadcast unit, make the second broadcast unit can be shown to user, and play the content of the second segment burst that loaded, and the first broadcast unit is hidden in backstage execution, start to load the content of the 3rd section of burst, so circulate until all bursts have been played.
The video label of the functional utilization HTML assembly of wherein said the first broadcast unit and the second broadcast unit is realized.
Described method utilizes JavaScript assembly to realize.
Wherein control it and be shown to user or be hidden in backstage by the css style.display attribute of broadcast unit is set.
The present invention also provides a kind of many bursts video play device based on 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 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 the first broadcast unit and the second broadcast unit is set, make the first broadcast unit can be shown to user, and the second broadcast unit is hidden in the unit of backstage loading content; To content server request video data content, make the first broadcast unit load and play the content of first paragraph burst, and the second broadcast unit load the unit of the content of second segment burst on backstage; After the first broadcast unit plays first paragraph burst, change the attribute of the first broadcast unit and the second broadcast unit, make the second broadcast unit can be shown to user, and play the content of the second segment burst that loaded, and the first broadcast unit is hidden in backstage execution, start to load the content of the 3rd section of burst, so circulation is until the unit that all bursts have been played.
The video label of the functional utilization HTML assembly of wherein said the first broadcast unit and the second broadcast unit is realized.
Described device utilizes JavaScript assembly to realize.
Wherein control it and be shown to user or be hidden in backstage by the css style.display attribute of broadcast unit is set.
The present invention also provides a kind of browser of realizing many bursts video playback based on HTML5 player, comprise control unit and broadcast unit, described control unit, for send HTTP request to index server, carries video ID (video_id) information in this request; The video metadata information that reception hint server returns according to video ID (video_id), this metadata information comprises duration, the burst address of duration, burst number, each burst; Described broadcast unit comprises the first broadcast unit and the second broadcast unit; Described control unit arranges the attribute of the first broadcast unit and the second broadcast unit, make one of them broadcast unit can be shown to user, and another broadcast unit is hidden in backstage loading content, and the attribute that the event that finishes playing of one section of burst can trigger the first broadcast unit and the second broadcast unit is changed mutually; Broadcast unit is to content server request video data content, make the first broadcast unit start to load and play the content of first paragraph burst, and the second broadcast unit loads the content of second segment burst on backstage; After the first broadcast unit plays first paragraph burst, the attribute conversion of the first broadcast unit and the second broadcast unit, the second broadcast unit can be shown to user, and play the content of the second segment burst that loaded, and the first broadcast unit is hidden in backstage execution, start to load the content of the 3rd section of burst, so circulate until all bursts have been played.
The video label of the functional utilization HTML assembly of wherein said the first broadcast unit and the second broadcast unit is realized.
Described control unit utilizes JavaScript assembly to realize.
Described broadcast unit utilizes HTML assembly to realize.
Wherein control it and be shown to user or be hidden in backstage by the css style.display attribute of broadcast unit is set.
Embodiment
The integrated stand composition that the present invention is based on many bursts audio/video player system of HTML5 video as shown in Figure 1.To being described below of each several part in system.
Index server 101: storage distribution of video metadata information, comprise video duration, byte number, the address of burst number and each burst etc.
Content server 102: storage distribution of video burst content.
Browser 103: specifically comprise JavaScript assembly 104, CSS assembly 105 and HTML assembly 106, realize respectively following function.
JavaScript assembly 104: communicate by letter with index server 101, fetch the metadata information that video is corresponding, comprise burst information; Communicate by letter with HTML assembly 106, all kinds of events of face_video107 and buffer_video108 in monitoring HTML assembly 106, control the state conversion of face_video107 and buffer_video108.
CSS assembly 105: the outward appearance with JavaScript assembly 104 Collaborative Control HTML5 players, comprises broadcasting/pause button, progress bar, current reproduction time etc.
The face_video107 of HTML assembly 106: be the video that shows user on the page, displaying video content; The burst address of face_video107 displaying video content is set by JavaScript assembly 104, and asks the content of video slicing to content server 102.
The buffer_video108 of HTML assembly 106: be video hiding in the page, look ahead and the content of next burst of buffer memory, equally by JavaScript assembly 104, the burst address of displaying video content is set, and ask video slicing content to content server 102.
Control UI109: the player control UI109 that utilizes <div> label and CSS to build, mainly comprises broadcasting/pause button, progress bar, current play time/total duration display box etc.
Introduce the reciprocal process between each assembly and server and between each assembly in specific works process below.
1.JavaScript assembly 104 is asked the metadata information of video to index server 101, comprise the parameter video_id in duration, byte number, burst list, request, represents video id;
2. index server 101 returns to the metadata information of video to JavaScript assembly 104, adopts JSON form;
3.face_video107 ask video slicing content to content server 102, utilize http byte range request;
4. content server 102 returns to burst content to face_video107;
5.buffer_video108 asks video slicing content to content server 102, utilizes http byte range request;
6. content server 102 returns to burst content to buffer_video108;
7.JavaScript assembly 104 is controlled the element in HTML assembly 106, is mainly player control element and video label, and JavaScript assembly 104 can arrange the src of video label, and controls and monitor the broadcasting of video, suspends etc.
8.HTML assembly 106, to JavaScript assembly 104 variety of event of dishing out, mainly contains the broadcast event of video, and buffered event is play End Event etc., and JavaScript assembly 104 can carry out according to these events next step operation.
Face_video107 and buffer_video108 state conversion schematic diagram as shown in Figure 2.
Wherein, after dotted line 9 refers to that face_video107 finishes, the meeting new burst address of automatic reception, transfers buffer_video108 to, and enters load state; After dotted line 10 refers to that face_video107 finishes, can impel buffer_video108 to transfer face_video107 to, and enter play state.
Here the video of lifting five bursts carrys out emphasis and has a talk about the state of face_video107 and buffer_video108 and switch.
Prerequisite is that getPlayList returns to video slicing information: in the time that face_video107 finishes playing, in seek, and how to process in end.
Such as, 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 acquires { value}, and return to the metadata information (these metadata informations are in the time that video deposits server in, generation) of storage:
Above-mentioned metadata information shows that this video has 6 bursts, and the url address that comprises each burst.
JavaScript, after obtaining metadata information, just can arrange the duration piece of player control UI109, is 3600s here, namely one hour; Then can specify src to face_video107 is http://data_server/getData/{value_1}; Specifying src to buffer_video108 is http://data_server/getData/{value_2}, and by calling play () and pause (), make face_video107 start to play, and buffer_video108 suspend, to cushion in rear end.After http://data_server/getData/{value_1} finishes playing, face_video107 and buffer_video108 realize state and switch, start to play http://data_server/getData/{value_2}, simultaneously, face_video107 before starts to cushion http://data_server/getData/{value_3}, and the rest may be inferred later.
The many bursts video playback flow process that the present invention is based on HTML5video is specific as follows:
1. user opens the broadcasting page, in page URL with the information of video id (video_id);
2.JavaScript assembly 104 sends HTTP request to index server 101, wherein carrying parameter is video_id;
3. index server 101, according to video_id, returns to 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 is so follow-up during to content server request data, just can not obtain correct data, at this moment, player ejects miscue information to user.
After 4.JavaScript obtains 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, be none by the css style.display setup of attribute of buffer_video108, thereby make face_video107 can be shown to user, and buffer_video108 hide execution.Afterwards, JavaScript will load respectively face_video107 and buffer_video108, and call face_video.play () make it to start play, call buffer_video.pause () and make it in back buffer.
5. once face_video107 or buffer_video108 have the src property value of non-NULL, and by after external load, will send HttpByte Range request msg content to content server 102 by the interior raw mechanism realizing of browser 103.Take face_video107 as example, once return data content is filled up the buffering area of face_video107 self, will start broadcasting pictures.And because buffer_video108 has been suspended, thereby it only can constantly fill up buffering area, and can broadcasting pictures.If due to background service fault, cause delaying to load data, the timeout threshold of establishing in exceeding, player can stop work at present, proposes miscue information to user.
6. in the time that face_video107 finishes playing, corresponding End Event can be dished out, thereby be caught by outside JavaScript assembly 104, JavaScript assembly 104 starts call back function corresponding to startup event, buffer_video108 is become to face_video107, start to play; Face_video107 is become to buffer_video108, new src is set, and hide and load on backstage.Due in face_video107 playing process, buffer_video108 loads data always on backstage, thereby this switching can be relatively smooth, do not have obvious video card and broadcast life.In the metadata information returning at index server, get all burst numbers of video, in playing process, these bursts of processed in sequence.If most end a slice has also been loaded, so just can stop loading procedure, wait for that having loaded burst finishes playing.
Technical solution of the present invention is ingenious utilizes two HTML5<video>, is called face_video and buffer_video108.Face_video plays a video slicing at front end, and while buffer_video108 is hidden in rear end follow-up burst is cushioned; In the time that face_video finishes playing, utilize ess to be switched to front end buffer_video108, state is converted into face_video.According to this practice, can guarantee in the time that burst switches picture smoothness; Again can with the seamless compatibility of many bursts video distribution present situation of main flow, thereby effectively save flow.In single burst situation, video is downloaded always, if network speed is better, this video has been downloaded soon so, and the half left and right that in fact the average viewing time of user only accounts for video, half is just equivalent to invalid download so below, 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.