Media elements of HTML5 practice and Analysis (6. Video instances)

The video tags in HTML5 and the effects of imitating video players are widely used on some mobile phones. Because the mobile phone basically abolished the exclusive flash and made HTML5 the master, video support is better. So today we will provide you with a small example of simulating a video player with HTML5 video tags, so that you can better understand HTML5 and its effective application in the project.

　　HTML code

　　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; // pause aInput [0]. onclick = function () {if (oV. paused) {this. value = 'stopped'; oV. play (); toShow (); timer = setInterval (toShow, 1000);} else {this. value = 'player'; 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; oDiv3.style. left = scale * (oDiv2.offsetWidth-oDiv3.offsetWidth) + 'px';} // mute aInput [3]. onclick = function () {if (oV. muted) {this. value = 'silent'; oV. muted = false; oDiv5.style. left = oV. volume * (oDiv4.offsetWidth-oDiv5.offsetWidth) + 'px';} else {this. value = 'cancel muting '; 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; document. 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; toShow () ;}; document. onmouseup = function () {aInput [0]. value = 'stopped'; 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 ();};};

Media elements of HTML5 practice and Analysis (5. Video instances) are introduced here. small examples of simulated video players use almost common small functions. This small example can only be played in a browser that supports HTML5 video tags. More HTML5-related knowledge can be found in the HTML5 practice and Analysis Section of Menglong xiaostation. Thank you for your support.