HTML5 actual combat and analysis of the Media Elements (6, video examples)

Video tags in HTML5 and their effects on video players are more widely used on some mobile phones. Because the mobile phone side basically abolished the arbitrary of Flash, let HTML5 the boss, so the video support is better. So today is dedicated to the HTML5 video tag analog video player Small example, so that everyone better understand the HTML5 and effective application in the project.

　　HTML code

<!--src to place local OGV audio--><video id= "v1" src= "INTERMISSION-WALK-IN.OGV" ></video><div id= "Div1" ><input type= "button" value= "Play"/><input type= "button" value= "00:00:00"/><input type= "button" Value= "00:00:00"/><input type= "button" value= "Mute"/><input type= "button" value= "fullscreen"/></div> <div id= "Div2" ><div id= "Div3" ></div></div><div id= "div4" ><div id= "DIV5" ></ Div></div>

　　CSS Code

#div2 {width:300px; height:30px; background: #666666; position:relative;} #div3 {width:30px; height:30px; background:red; position:absolute; left:0; top:0;} #div4 {width:300px; height:20px; background: #666666; position:relative; top:10px;} #div5 {width:20px; height:20px; background:yellow; position:absolute; right:0; top:0;}

　　JavaScript code

Window.onload = function () {var OV = document.getElementById (' v1 '); var odiv = document.getElementById (' Div1 '); var ainput = Odiv.getelementsbytagname (' input '); var oDiv2 = document.getElementById (' div2 '); var oDiv3 = document.getElementById ( ' Div3 '); var oDiv4 = document.getElementById (' div4 '); var oDiv5 = document.getElementById (' div5 '); var timer = null;// Play Pause Ainput[0].onclick = function () {if (ov.paused) {this.value = ' pause '; Ov.play (); toshow (); timer = SetInterval (Toshow, 1000);} Else{this.value = ' play '; Ov.pause (); clearinterval (timer);}}; Ainput[2].value = Timechange (ov.duration); function Timechange (iall) {Iall = Math.floor (Iall); var hours = Tozero ( parseint (iall/3600)), var mintus = Tozero (parseint (IALL%3600/60)), var sends = Tozero (parseint (iall%60)), return hours + " : "+ mintus +": "+ Sends;} function Tozero (num) {if (num<10) {return ' 0 ' + num;} Else{return "+ num;}} function Toshow () {ainput[1].value = Timechange (ov.currenttime); var scale = Ov.currenttime/ov.duration;o Div3.style.left = scale * (ODIV2.Offsetwidth-odiv3.offsetwidth) + ' px ';} Mute Ainput[3].onclick = function () {if (ov.muted) {this.value = ' mute '; ov.muted = False;odiv5.style.left = ov.volume* ( odiv4.offsetwidth-odiv5.offsetwidth) + ' px ';} Else{this.value = ' Remove mute '; ov.muted = True;odiv5.style.left = 0;}}; var disx = 0;//Progress Adjustment odiv3.onmousedown = function (EV) {var ev = EV | | window.event;disx = ev.clientx-odiv3.offsetleft;docum Ent.onmousemove = function (EV) {var ev = EV | | Window.event;var l = ev.clientx-disx;if (l<0) {L = 0;} else if (l>odiv2.offsetwidth-odiv3.offsetwidth) {L = Odiv2.offsetwidth-odiv3.offsetwidth;} ODiv3.style.left = l + ' px ', var scale = l/(odiv2.offsetwidth-odiv3.offsetwidth), ov.currenttime = scale * Ov.duration;tos how ();}; Document.onmouseup = function () {ainput[0].value = ' pause '; Ov.play (); toshow (); timer = setinterval (toshow,1000); Document.onmousemove = Null;document.onmouseup = null;}; return false;}; var disX2 = 0;//Sound Odiv5.onmousedown = function (EV) {var ev = EV | | window.event;disx2 = EV.CLIENTX-ODIV5.OFfsetleft;document.onmousemove = function (EV) {var ev = EV | | Window.event;var l = ev.clientx-disx2;if (l<0) {L = 0;} else if (l>odiv4.offsetwidth-odiv5.offsetwidth) {L = Odiv4.offsetwidth-odiv5.offsetwidth;} ODiv5.style.left = l + ' px ', var scale = l/(odiv4.offsetwidth-odiv5.offsetwidth), ov.volume = scale;}; Document.onmouseup = function () {document.onmousemove = Null;document.onmouseup = null;}; Return false;};/ /Full Screen Ainput[4].onclick = function () {Ov.webkitrequestfullscreen ();};};

HTML5 actual combat and analysis of the Media Elements (5, video examples) for everyone to introduce here, analog video player's small example of almost the use of small functions. This small example can only be played in browsers that support HTML5 's video tags. More about HTML5 in the Dream Dragon Station HTML5 actual combat and analysis part, thank you for your support.