A HTML5-based video player

HTML5 's video tag makes loading videos a lot easier, and doing a little demo in the morning, including some very basic features. Play, progress these. The main is to understand the relevant API.

Html:

                <!--Video 1 -                <Divclass= "Vsb-container"Containerid= "1"Columns= "1">                    <Divclass= "Vsb-space sec_side_10 mb15 Fluid Clear"Columns= "1">                        <Divclass= "Sec_23">                            <Divclass= "Sec_23_video mb15">                                <!-- -                                <Videowidth= ' 100% 'Height= "100%"preload= "Auto"Poster= "Images/videobg_03.jpg">                                    <Sourcesrc= "Video/12143.mp4"type= "Video/mp4">                                </Video>                            </Div>                            <Divclass= "sec_23_progress psr Ml25 MB10">                                <imgclass= "Progress"src= "Images/ico/sec_side_10_1_03.jpg"/>                                <imgclass= "Progress_btn"style= "left:0;"src= "Images/ico/sec_side_10_07.jpg"/>                                                            </Div>                            <Divclass= "Sec_23_control">                                <imgclass= "IMG1"src= "Images/ico/sec_side_10_11.jpg"/>                                <imgclass= "Img2"src= "Images/ico/sec_side_10_17.jpg"/>                                <imgclass= "IMG3"src= "Images/ico/sec_side_10_14.jpg"/>                                <imgclass= "Img4"src= "Images/ico/sec_side_10_20.jpg"/>                                <imgclass= "Img5"src= "Images/ico/sec_side_10_22.jpg"/>                            </Div>                        </Div>                    </Div>                </Div>                <!--Video 1 End -<style>. Sec_23_video{width:180px;Height:108px;Overflow:Hidden;}. Sec_23_progress{width:131px;Height:8px;}. sec_23_progress. progress_btn{position:Absolute;Top:0;}. Sec_23_control img{float: Left;cursor:Pointer;}. Sec_23_control. IMG1{margin:0 18px 0 23px;}. Sec_23_control. Img2{Margin-right:16px;Margin-top:7px;}. Sec_23_control. IMG3{Margin-right:15px;Margin-top:2px;cursor:default;}. Sec_23_control. Img4{Margin-right:10px;Margin-top:8px;}. Sec_23_control. Img5{Margin-top:7px;}</style>
<script>

var osec=$ ('. sec_23 ');//Large chunk var video=osec.find (' video ') [0];//video file var obtn=osec.find ('. Sec_23_control img ');// Controls button var Oprogress=osec.find ('. Progress ');//progress bar var oprogressbtn=osec.find ('. progress_btn ');//progress bar block Videodemo (Video,obtn.eq (0) [0],obtn.eq (1) [0],obtn.eq (3) [0],oprogress[0],oprogressbtn[0]);
The parameters are: Video file, play button, stop button, rewind button, progress bar background, progress bar button functionVideodemo (video,btnplay,btnrestart,btnrewind,progress,btnprogress) {var inowtime=0;//the current video playback event, starting from 0 seconds to play Var iScale= (progress.offsetwidth-btnprogress.offsetwidth)/video.duration//The ratio of the progress bar length to the video length Btnplay.onclick=function() {if(video.paused)                           {Video.play (); }else {video.pause (); }} btnrestart.onclick=function  () {video.currenttime=0 ; Video.pause ();} Btnrewind.onclick=function () {inowtime=video.currenttime-10 ; video.currenttime=  inowtime;} bind (Video, ' Timeupdate ', function  () {Btnprogress.style.left=math.floor (Video.currenttime*iscale) + ' px ' ;}); Drag (btnprogress,{l:0  , r:progress.offsetwidth- btnprogress.offsetwidth, t:0 , b:0 },function  (site) { btnprogress.style.left=site.left+ ' px ' ; inowtime=  parseint (btnprogress.style.left); video.currenttime=  inowtime;});} function  bind (obj, Ev, FN) {if  (obj.addeventlistener) {obj.addeventlistener (EV, FN, false );} Else
                          
                            {obj.attachevent (' on ' + EV, function 
                            () {Fn.call (obj)});}  
                                

</script>

PS: Some of the parameters used in this function are as follows:
Video Object-related properties:
The CurrentTime property sets or returns the current position (in seconds) of audio/video playback, which jumps to the specified position when the property is set.
The Duration property returns the length of the current audio/video in seconds.
Video Object-related methods:
Play () playback
Pause () pauses
The events of the video object (the video object has many events, here only one, according to the JS authoritative guide 21.2.4, these events can only be AddEventListener () method registration processing function, not tested under IE is valid);
Timeupdate The video playback process, triggered 4~60 times per second, here to refresh the play event change progress bar

I can't seem to upload attachments. The picture will not be uploaded. CSS style can be changed

A HTML5-based video player