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

　　HTML代码

<!-- 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>

　　CSS代码

#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;}

　　JavaScript代码

window.onload = function(){
	var oV = document.getElementById('v1');
	var op = document.getElementById('p1');
	var aInput = op.getElementsByTagName('input');
	
	var op2 = document.getElementById('p2');
	var op3 = document.getElementById('p3');
	var op4 = document.getElementById('p4');
	var op5 = document.getElementById('p5');
	
	var timer = null;
	
	//播放暂停
	aInput[0].onclick = function(){
	
	if(oV.paused){
	this.value = '暂停';
	oV.play();
	toShow();
	timer = setInterval(toShow,1000);
	}
	else{
	this.value = '播放';
	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;
	
	op3.style.left = scale * (op2.offsetWidth - op3.offsetWidth) + 'px';
	
	}
	
	//静音
	aInput[3].onclick = function(){
	if(oV.muted){
	this.value = '静音';
	oV.muted = false;
	op5.style.left = oV.volume*(op4.offsetWidth - op5.offsetWidth) + 'px';
	}
	else{
	this.value = '消除静音';
	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 + 'px';
	
	var scale = L/(op2.offsetWidth - op3.offsetWidth);
	
	oV.currentTime = scale * oV.duration;
	
	toShow();
	
	};
	document.onmouseup = function(){

	aInput[0].value = '暂停';
	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 + 'px';
	
	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();
	
	};
	
};