Maison > interface Web > Tutoriel H5 > le corps du texte

Pratique HTML5 et analyse des éléments multimédias (6, exemples vidéo)

黄舟
Libérer: 2017-02-13 14:11:08
original
1364 Les gens l'ont consulté

La balise vidéo en HTML5 et son effet d'imitation du lecteur vidéo sont largement utilisés sur certains téléphones mobiles. Parce que la version mobile a fondamentalement aboli la dictature du flash et permis au HTML5 d'être le maître, elle prend mieux en charge les vidéos. Alors aujourd'hui, je vais vous donner un petit exemple de balise vidéo HTML5 simulant un lecteur vidéo, afin que vous puissiez mieux comprendre HTML5 et son application efficace dans les projets.

 Code HTML

<!-- 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>
Copier après la connexion


  Code CSS

#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;}
Copier après la connexion




  Code JavaScript

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();
	
	};
	
};
Copier après la connexion

Ce qui précède est le contenu du combat réel HTML5 et de l'analyse des éléments multimédias (6. Exemples vidéo Pour plus de contenu connexe, veuillez). faites attention au site Web PHP chinois (www.php.cn) !




Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!