HTML5 practice and analysis of media elements (6, video examples)-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

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

黄舟

Feb 13, 2017 pm 02:11 PM

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>

Copy after login

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

Copy after login

JavaScript Code

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

Copy after login

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

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn