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

标签：html5实战与剖析   html5媒体元素   video标签   html5   

　　HTML5中的视频标签和及其模仿视频播放器的效果在一些手机端应用比较多。因为手机端基本上废除了flash的独断，让HTML5当家做主人，所以对视频支持的比较好。所以今天专门为大家奉上HTML5视频标签模拟视频播放器的小例子，让大家更好的理解HTML5和有效的应用在项目中。

　　HTML代码

<!-- src中放上本地的ogv的音频 -->
<video id="v1" src="Intermission-Walk-in.ogv"></video>
<div id="div1">
	<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="全屏" />
</div>
<div id="div2">
	<div id="div3"></div>
</div>

<div id="div4">
	<div id="div5"></div>
</div>

　　CSS代码

#div2{ width:300px; height:30px; background:#666666; position:relative;}
#div3{ width:30px; height:30px; background:red; position:absolute; left:0; top:0;}
#div4{ width:300px; height:20px; background:#666666; position:relative; top:10px;}
#div5{ width:20px; height:20px; background:yellow; position:absolute; right:0; top:0;}

　　JavaScript代码

window.onload = function(){
	var oV = document.getElementById(‘v1‘);
	var oDiv = document.getElementById(‘div1‘);
	var aInput = oDiv.getElementsByTagName(‘input‘);
	
	var oDiv2 = document.getElementById(‘div2‘);
	var oDiv3 = document.getElementById(‘div3‘);
	var oDiv4 = document.getElementById(‘div4‘);
	var oDiv5 = document.getElementById(‘div5‘);
	
	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;
		
		oDiv3.style.left = scale * (oDiv2.offsetWidth - oDiv3.offsetWidth) + ‘px‘;
		
	}
	
	//静音
	aInput[3].onclick = function(){
		if(oV.muted){
			this.value = ‘静音‘;
			oV.muted = false;
			oDiv5.style.left = oV.volume*(oDiv4.offsetWidth - oDiv5.offsetWidth) + ‘px‘;
		}
		else{
			this.value = ‘消除静音‘;
			oV.muted = true;
			oDiv5.style.left = 0;
		}
	};
	
	var disX = 0;
	
	//进度调整
	oDiv3.onmousedown = function(ev){
		var ev = ev || window.event;
		disX = ev.clientX - oDiv3.offsetLeft;
		
		document.onmousemove = function(ev){
			var ev = ev || window.event;
			
			var L = ev.clientX - disX;
			
			if(L<0){
				L = 0;
			}
			else if(L>oDiv2.offsetWidth - oDiv3.offsetWidth){
				L = oDiv2.offsetWidth - oDiv3.offsetWidth;
			}
			
			oDiv3.style.left = L + ‘px‘;
			
			var scale = L/(oDiv2.offsetWidth - oDiv3.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;
	
	//声音
	oDiv5.onmousedown = function(ev){
		var ev = ev || window.event;
		disX2 = ev.clientX - oDiv5.offsetLeft;
		
		document.onmousemove = function(ev){
			var ev = ev || window.event;
			
			var L = ev.clientX - disX2;
			
			if(L<0){
				L = 0;
			}
			else if(L>oDiv4.offsetWidth - oDiv5.offsetWidth){
				L = oDiv4.offsetWidth - oDiv5.offsetWidth;
			}
			
			oDiv5.style.left = L + ‘px‘;
			
			var scale = L/(oDiv4.offsetWidth - oDiv5.offsetWidth);	
			
			oV.volume = scale;
			
		};
		document.onmouseup = function(){
			document.onmousemove = null;
			document.onmouseup = null;
		};
		return false;
	};
	
	//全屏
	aInput[4].onclick = function(){
	
		oV.webkitRequestFullScreen();
	
	};
	
};

　　HTML5实战与剖析之媒体元素(5、视频实例)就为大家介绍到这里，模拟视频播放器的小例子几乎把常用的小功能。这个小例子仅仅能在支持HTML5的视频标签的浏览器中播放。更多有关HTML5的相关知识尽在梦龙小站的HTML5实战与剖析部分，感谢大家的支持。

HTML5实战与剖析之媒体元素(6、视频实例),布布扣,bubuko.com

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

标签：html5实战与剖析   html5媒体元素   video标签   html5   

原文地址：http://blog.csdn.net/lee_magnum/article/details/17922487