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

- 日理万妓 2022-09-20 08:31 183阅读 0赞

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

***HTML代码***

<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实战与剖析部分，感谢大家的支持。

发表评论取消回复

表情：

评论列表（有 0 条评论，183人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5的学习之媒体元素

HTML5的学习之媒体元素前几篇博客我们将HTML5中的canvas画布元素进行了讲解，接下来开始学习其他的HTML5新元素。这篇就博文主要讲解HTML5中的媒体元素

淩亂°似流年/ 2023年02月17日 14:28/ 0 赞/ 11 阅读

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

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

- 日理万妓/ 2022年09月20日 08:31/ 0 赞/ 184 阅读

相关 HTML5实战与剖析之媒体元素(5、音频实例)

　　之前已经介绍过了HTML5中媒体元素的相关小概念，和一些事件方法。光有一些理论基础，没有实践实例是不能充分理解的，更不太可能靠小概念来进行实际操作的。所以今天为大家奉上一个

青旅半醒/ 2022年09月20日 08:30/ 0 赞/ 175 阅读

相关 HTML5实战与剖析之媒体元素(4、检测编解码器的支持和Audio构造函数)

　　HTML5媒体元素检测编解码器的支持情况　　虽然媒体元素可以实现音频和视频功能，但是并不是所有浏览器都支持video标签和audio标

骑猪看日落/ 2022年09月20日 06:11/ 0 赞/ 180 阅读

相关 HTML5实战与剖析之媒体元素(3、媒体元素的事件及方法)

　　HTML5中的媒体元素除了拥有很多的属性之外，video标签和audio标签还可以出发很多事件和方法。这些方法监控着不同的属性的变化，这些变化有可能是媒体播放的结果，也可能

冷不防/ 2022年09月20日 06:05/ 0 赞/ 174 阅读

相关 HTML5实战与剖析之媒体元素(2、媒体元素的属性)

　　提到HTML5中的媒体元素，那咱们可有的聊了，刚刚介绍完媒体元素的用法与简介，还没介绍有关媒体元素的相关属性呢，所以今天就为大家介绍一些有关HTML5中媒体元素的相关属性。

喜欢ヅ旅行/ 2022年09月20日 06:05/ 0 赞/ 190 阅读

相关 HTML5实战与剖析之媒体元素(1、video标签和audio标签简介)

　　随着HTML5的到来，flash在手机端全部不能得到支持，这就使一项以flash制作的音乐播放和视频播放只能用HTML5中的媒体标签video标签和audio标签来制作了。

ゞ浴缸里的玫瑰/ 2022年09月20日 06:04/ 0 赞/ 194 阅读

相关 HTML5实战与剖析之剪贴板事件

　　很多网站当复制粘贴的时候，都会出现有关剪贴板的相关提示，在刚刚入行前端工程师的时候，我还在一直纳闷，这是怎么实现的呢。如今，咱们再也不用纳闷了，因为已经有浏览器把剪贴板相关

青旅半醒/ 2022年09月19日 15:29/ 0 赞/ 339 阅读

相关 HTML5实战与剖析之classList属性

　　前面为大家介绍了一些有关HTML5新添加的选择器，分别是querySelector()，querySelectorAll()和getElementsByClassName(

红太狼/ 2022年09月19日 12:23/ 0 赞/ 199 阅读

相关 HTML5实战与剖析之延迟脚本

　　什么是延迟脚本呢?HTML5实战与剖析之延迟脚本是帮大家解决一些JavaScript加载问题的。有了HTML5实战与剖析之延迟脚本这个功能，我们可以不再为了JavaScri

绝地灬酷狼/ 2022年09月18日 12:53/ 0 赞/ 215 阅读