HTML5 practice and analysis of media elements (6, video examples)

The video tag in HTML5 and its effect of imitating a video player are widely used on some mobile phones. Because the mobile version has basically abolished the dictatorship of flash and allowed HTML5 to be the master, it has better support for videos. So today I will give you a small example of HTML5 video tag simulating a video player, so that you can better understand HTML5 and its effective application in projects.

　HTML code

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

#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 Code

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 &#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();
	
	};
	
};

The above is the content of HTML5 actual combat and analysis of media elements (6. Video examples). For more related content, please pay attention to the PHP Chinese website (www.php.cn )!