JQuery TML5 player Continuous playback segmented video method

The first Multiple player window, in addition to a display:none, the general requirements of two is enough. And then listen to whether the end (about listening, and later to send a talk about JavaScript listening), listening to this p play after the end of the next link assigned to the hidden, alternating display, the progress bar of course need to redo, here will need to count the total time long.

Of course, theoretically very good thinking, actually in use when still encountered some problems:
Recently because the work needs to study HTML5 's player, HTML5 actually has already been very full, but when we need to cut the video integration to play the time to encounter the trouble, here I thought of a thought, just found on the net also mentioned many this kind of mentality:

The first Multiple player window, in addition to a display:none, the general requirements of two is enough. And then listen to whether the end (about listening, and later to send a talk about JavaScript listening), listening to this p play after the end of the next link assigned to the hidden, alternating display, the progress bar of course need to redo, here will need to count the total time long.

Of course, theoretically very good thinking, actually in use when still encountered some problems:

First, let's take a look at what happens in turn during the loading process:
When audio/video is in the process of loading, the following events occur sequentially:

Loadstart
Durationchange
Loadedmetadata
Loadeddata
Progress
Canplay
Canplaythrough

And all of these steps are not instantaneous, the test speed is determined, because of this so I then test the replacement url-acquisition time-replace the URL only then failed. The result is a string of NULL, and the right thing to do is to listen and perform the above actions.

If you need to buffer in advance, you need to listen for timeupdate and return the value, and then with the total time look minus, based on the conditions to judge and load on the line ^ ^

In addition, some of the function, the reason to play the jquery tag, is because lazy ... ：
The URL uses the fly donkey to obtain, the timeliness is very short needs to test please replace the array contents

The code is as follows

Copy Code

var videos = new Array (' Video 1 ', ' Video 2 ', ' video 3 '); var timeline = new Array (0); Record the time. var nowvideolocation = 0; Current Location var playernum = 0; The location of the video tag currently in use var str; Output information var totaltime = 0; Video Total time length var currentvideotime = 0; var i = 0; Initializing counters var targettime = 0; Target time var targetplayer = 0; Record target player var loadnextsource = false; Whether the next URL has been written to SRC $ (' document '). Ready (function () { Inittimeline (); Running the initialization function $ ('. Video:eq (' + playernum + ') '). attr (' src ', videos[i]); /* SetInterval (function () { str = $ (' #video-meta '). html (); $ (' #video-meta '). html (str + ' current time ') }, 100) */ /* $ ('. Video ') [Playernum].addeventlistener (')]; */ $ (' #btn-play '). Click (function () { if ($ ('. Video ') [playernum].paused) $ ('. Video ') [Playernum].play (); Else $ ('. Video ') [Playernum].pause (); }); $ (' #set-time '). Click (function () { Settotime ($ (' #time '). Val ()); }) }); function Inithandler () { Timeline[i] = $ ('. Video ') [1].duration; TotalTime + = Timeline[i]; if (I < videos.length-1) { $ ('. Video ') [1].SRC = Videos[++i] } else { $ ('. Video ') [1].SRC = '; $ ('. Video ') [1].removeeventlistener (' Loadedmetadata ', Inithandler, true); } } function Currenttimehandler () { Currentvideotime = $ ('. Video ') [Playernum].currenttime; if (Timeline[nowvideolocation]-currentvideotime < &&!loadnextsource) { Loadnextvideo (nowvideolocation + 1); Loadnextsource = true; } Console.log (Currentvideotime); Regularly return to monitoring time } function Inittimeline () { $ ('. Video ') [1].preload = ' auto '; $ ('. Video ') [1].SRC = Videos[i]; $ ('. Video ') [0].SRC = Videos[i]; $ ('. Video ') [1].addeventlistener (' Loadedmetadata ', Inithandler, true); $ ('. Video ') [0].addeventlistener (' Timeupdate ', Currenttimehandler, true); $ ('. Video ') [0].addeventlistener (' ended ', Switchnextvideo, true); } function Loadnextvideo (nextlocation) { var nextplayer = number (!playernum); if (Nextlocation < videos.length) { $ ('. Video ') [nextplayer].preload = ' auto '; $ ('. Video ') [NEXTPLAYER].SRC = Videos[nextlocation]; } } function Settotime (time) { var videochapter; var nextplayer = number (!playernum); if (time >= totaltime) { Videochapter = videos.length-1; Time = TotalTime; } else { for (videochapter = 0; videochapter < videos.length-1; videochapter++) { if (Time-timeline[videochapter] < 0) { Break } else { Console.log (' videotime: ' + time); Time = Timeline[videochapter]; } } } Console.log (' Videochapter: ' +videochapter); if (Videochapter = = nowvideolocation) { $ ('. Video ') [playernum].currenttime = time; } else { Loadnextvideo (Videochapter); Console.log (time); Targettime = time; /*$ ('. Video ') [nextplayer].currenttime = time;*/ Targetplayer = Nextplayer; $ ('. Video ') [Targetplayer].addeventlistener (' Durationchange ', jumptotime, true); Switchtovideo (); Nowvideolocation = Videochapter; Console.log (' nowvideolocation: ' +nowvideolocation); } } function Jumptotime () { $ ('. Video ') [targetplayer].currenttime = Targettime; Console.log (' Hello '); $ ('. Video ') [Targetplayer].removeeventlistener (' Durationchange ', jumptotime, true); } function Switchnextvideo () { var nextplayer = number (!playernum); Loadnextsource = false; Console.log (' switchnow! '); if (Nowvideolocation < videos.length-1) { $ ('. Video:eq (' + Nextplayer + ')]. CSS (' Display ', '); $ ('. Video:eq (' + Playernum + ')]. CSS (' Display ', ' none '); $ ('. Video ') [Playernum].pause (); $ ('. Video ') [Playernum].removeeventlistener (' Timeupdate ', Currenttimehandler, true); $ ('. Video ') [Playernum].removeeventlistener (' ended ', Switchnextvideo, true); $ ('. Video ') [PLAYERNUM].SRC = '; $ ('. Video ') [Nextplayer].addeventlistener (' Timeupdate ', Currenttimehandler, true); $ ('. Video ') [Nextplayer].addeventlistener (' ended ', Switchnextvideo, true); $ ('. Video ') [Nextplayer].play (); nowvideolocation++; Playernum = Nextplayer; } else { $ ('. Video ') [Playernum].removeeventlistener (' ended ', Switchnextvideo, true); } } function Switchtovideo () { var nextplayer = number (!playernum); Console.log (' switchnow! '); Loadnextsource = false; $ ('. Video:eq (' + Nextplayer + ')]. CSS (' Display ', '); $ ('. Video:eq (' + Playernum + ')]. CSS (' Display ', ' none '); $ ('. Video ') [Playernum].pause (); $ ('. Video ') [Playernum].removeeventlistener (' Timeupdate ', Currenttimehandler, true); $ ('. Video ') [Playernum].removeeventlistener (' ended ', Switchtovideo, true); $ ('. Video ') [PLAYERNUM].SRC = '; $ ('. Video ') [Nextplayer].addeventlistener (' Timeupdate ', Currenttimehandler, true); $ ('. Video ') [Nextplayer].addeventlistener (' ended ', Switchtovideo, true); $ ('. Video ') [Nextplayer].play (); }

PostScript: Later here to see similar ideas, loading point slightly different, the test seems to be in advance in the situation of poor speed performance will be so bad, or this is good, progress bar needs to use the Settotime function to rewrite, please help yourself

PS: You can use Jplayer,jplayer to encapsulate the <audio> and <video> tags in HTML5 well. Use the HTML5 tag when the browser supports HTML5, and replace it with Flash when the browser does not support HTML5. More importantly, Jplayer provides complete customization of the player interface to ensure that the player's appearance is consistent regardless of the browser. Because you can customize the player interface, your request can be satisfied.
The following is a code snippet for my own project, which I have streamlined. You look for Timeupdate:function (event) {This line of code, which has the code to update the progress bar