HTML5-Übung und Analyse von Medienelementen (6, Videobeispiele)

Das Video-Tag in HTML5 und sein Effekt, den Videoplayer zu imitieren, werden auf einigen Mobiltelefonen häufig verwendet. Da die mobile Version die Diktatur von Flash im Grunde abgeschafft hat und HTML5 als Master zugelassen hat, bietet sie eine bessere Unterstützung für Videos. Deshalb werde ich Ihnen heute ein kleines Beispiel eines HTML5-Video-Tags geben, das einen Videoplayer simuliert, damit Sie HTML5 und seine effektive Anwendung in Projekten besser verstehen können.

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

Das Obige ist der Inhalt des tatsächlichen HTML5-Kampfes und der Analyse von Medienelementen (6. Videobeispiele, bitte). Achten Sie auf die chinesische PHP-Website (www.php.cn)!