HTML5实战与剖析之媒体元素(6、视频实例)

<!-- src中放上本地的ogv的音频 --><video id="v1" src="Intermission-Walk-in.ogv"></video><p id="p1"><input type="button" value="播放" /><input type="button" value="00:00:00" /><input type="button" value="00:00:00" /><input type="button" value="静音" /><input type="button" value="全屏" /></p><p id="p2"><p id="p3"></p></p><p id="p4"><p id="p5"></p></p>

#p2{ width:300px; height:30px; background:#666666; position:relative;}#p3{ width:30px; height:30px; background:red; position:absolute; left:0; top:0;}#p4{ width:300px; height:20px; background:#666666; position:relative; top:10px;}#p5{ width:20px; height:20px; background:yellow; position:absolute; right:0; top:0;}

window.onload = function(){var oV = document.getElementById(&#39;v1&#39;);var op = document.getElementById(&#39;p1&#39;);var aInput = op.getElementsByTagName(&#39;input&#39;);var op2 = document.getElementById(&#39;p2&#39;);var op3 = document.getElementById(&#39;p3&#39;);var op4 = document.getElementById(&#39;p4&#39;);var op5 = document.getElementById(&#39;p5&#39;);var timer = null;//播放暂停aInput[0].onclick = function(){	if(oV.paused){		this.value = &#39;暂停&#39;;		oV.play();		toShow();		timer = setInterval(toShow,1000);	}	else{		this.value = &#39;播放&#39;;		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 &#39;0&#39; + num;	}	else{		return &#39;&#39; + num;	}}function toShow(){	aInput[1].value = timeChange(oV.currentTime);		var scale = oV.currentTime/oV.duration;		op3.style.left = scale * (op2.offsetWidth - op3.offsetWidth) + &#39;px&#39;;	}//静音aInput[3].onclick = function(){	if(oV.muted){		this.value = &#39;静音&#39;;		oV.muted = false;		op5.style.left = oV.volume*(op4.offsetWidth - op5.offsetWidth) + &#39;px&#39;;	}	else{		this.value = &#39;消除静音&#39;;		oV.muted = true;		op5.style.left = 0;	}};var disX = 0;//进度调整op3.onmousedown = function(ev){	var ev = ev || window.event;	disX = ev.clientX - op3.offsetLeft;		document.onmousemove = function(ev){		var ev = ev || window.event;var L = ev.clientX - disX;if(L<0){			L = 0;		}		else if(L>op2.offsetWidth - op3.offsetWidth){			L = op2.offsetWidth - op3.offsetWidth;		}op3.style.left = L + &#39;px&#39;;var scale = L/(op2.offsetWidth - op3.offsetWidth);oV.currentTime = scale * oV.duration;toShow();			};	document.onmouseup = function(){		aInput[0].value = &#39;暂停&#39;;		oV.play();		toShow();		timer = setInterval(toShow,1000);		document.onmousemove = null;		document.onmouseup = null;	};	return false;};var disX2 = 0;//声音op5.onmousedown = function(ev){	var ev = ev || window.event;	disX2 = ev.clientX - op5.offsetLeft;		document.onmousemove = function(ev){		var ev = ev || window.event;var L = ev.clientX - disX2;if(L<0){			L = 0;		}		else if(L>op4.offsetWidth - op5.offsetWidth){			L = op4.offsetWidth - op5.offsetWidth;		}op5.style.left = L + &#39;px&#39;;var scale = L/(op4.offsetWidth - op5.offsetWidth);	oV.volume = scale;			};	document.onmouseup = function(){		document.onmousemove = null;		document.onmouseup = null;	};	return false;};//全屏aInput[4].onclick = function(){	oV.webkitRequestFullScreen();};};