HTML5 PLAYER

//-------------------------------------------------------------
//  Nom Document : player 4
//  Auteur       : kazma (Kamel.A)
//  Objet        : player de video utilisant la balise video html5   http://www.javascriptfr.com/
//  Création     : 07.08.2011
//-------------------------------------------------------------

var playe4={

interplay:'vide',
elfull:null,
total:0,

ajoutevent:function(e){

		e.preventDefault();   //evite la selection d'element dans le document
		playe4.curent(e);
		document.documentElement.addEventListener("mousemove", playe4.curent, false);
		document.documentElement.addEventListener("mouseup", playe4.retireevent, false);
		document.getElementById('v1').removeAttribute('onended');
	},

retireevent:function(){
		
		document.documentElement.removeEventListener("mousemove", playe4.curent, false);
		document.documentElement.removeEventListener("mouseup", playe4.retireevent, false);
		document.getElementById('v1').setAttribute('onended','playe4.stop()');
	},

progression:function(evt){		//progression du chargement de la video
		
		var elem=evt.currentTarget;
		
		if(evt.lengthComputable && evt.total) {
			
			var valeur=(evt.loaded/evt.total);	//retourne une valeur compris entre 0 et 1
		}
		else if(elem.buffered && elem.buffered.length>0){
			
			var charge=elem.buffered.end(0);
			var valeur=(charge/elem.duration).toFixed(2);	//retourne une valeur compris entre 0 et 1
		}
		document.getElementById("defile").getElementsByTagName('div')[0].style.width=(valeur*100)+'%';
	},

curent:function(e){		//positionnement de la barre de defilement et de la video par la souris
		
		var setX =e.clientX-document.getElementById("defile").parentNode.offsetLeft;
		
		var distance=document.getElementById("defile").offsetWidth-document.getElementById("defile").getElementsByTagName('div')[2].offsetWidth; //distance reel de la barre de defilement
		
		var valeur=(setX-document.getElementById("defile").offsetLeft);	//position du curseur de la sourie dans la barre de defilement
		
		valeur=valeur/distance; //valeur comprise entre 0 et 1
		
		document.getElementById('v1').currentTime=document.getElementById('v1').duration*valeur; //conversion par rapport a la video

		if (document.getElementById('v1').paused==true) {
			playe4.posivi();
		}
	},

posivi:function(){		//definition de la position de la barre de defilement
		
		var bar=document.getElementById("defile").getElementsByTagName('div')[2];
		
		var valeur=(document.getElementById('v1').currentTime/document.getElementById('v1').duration).toFixed(6);		//retourne une valeur compris entre 0 et 1
		
		var distance=document.getElementById("defile").offsetWidth-bar.offsetWidth;		//la distance total a parcourir de la barre<
		
		bar.style.marginLeft=(distance*valeur)+"px";
		
		document.getElementById("defile").getElementsByTagName('div')[1].style.width=(distance*valeur)+(bar.offsetWidth/2)+"px";
		playe4.tmp();
	},

sonson:function(e){		//definition du niveau de son et de la position du du curseur du son
		
		var setX =e.clientX-document.getElementById("defile").parentNode.offsetLeft;
		
		var distance=document.getElementById("son").offsetWidth;
		
		var valeur=(setX-document.getElementById("son").offsetLeft);
		
		valeur=valeur/distance;
		
		document.getElementById('v1').volume=valeur;
		document.getElementById("son").getElementsByTagName('div')[0].style.width=(valeur*distance)+'px';
	},

marchearret:function(){

		var elem=document.getElementById('v1');
		var lui=document.getElementById('ma');
		
		if(elem.paused==true){
			elem.play();
			interplay=setInterval(playe4.posivi,100);
			lui.style.cssText='background-position:40px 20px;';
		}
		else{
			elem.pause();
			clearInterval(interplay);
			lui.style.cssText='background-position:0px 20px;';
		}
	},

mute:function(lui){

		var elem=document.getElementById('v1');
		
		if (elem.muted==true) {
			elem.muted=false;
			lui.style.cssText='background-position:0px 0px;';
		}
		else{
			elem.muted=true;
			lui.style.cssText='background-position:40px 1px;';
		}
	},

stop:function(){

		document.getElementById('v1').currentTime=0;
		document.getElementById("defile").getElementsByTagName('div')[2].style.marginLeft=0+"px";
		document.getElementById("defile").getElementsByTagName('div')[1].style.width=0+"px";
		if (document.getElementById('v1').paused==false) {
			document.getElementById('v1').pause();
			clearInterval(interplay);
			document.getElementById('ma').style.cssText='background-position:0px 20px;';
		}
	},

tmp:function(){		//le timer

		var dura=(this.total==0 ? document.getElementById('v1').currentTime : document.getElementById('v1').duration-document.getElementById('v1').currentTime);
		var min = Math.floor(dura / 60);
		if (min < 10) {
			min = '0' + min;
		}
		var sec = Math.floor(dura % 60);
		if (sec < 10) {
			sec = '0' + sec;
		}
		document.getElementById('temp').firstChild.nodeValue=min+ ':'+sec;
	},
	
toto:function(){		//sert a deteminer si le temp sera celui ecoule et le temp restant.
this.total==0 ? this.total=1 : this.total=0;
},


full:function(){		//fonction pour le plein ecran

		var stl=document.getElementById('genediv');
		var vv1=document.getElementById('v1');
		
		if(vv1.parentNode==stl){
			var elem = document.createElement('div');
			elem.style.height=document.documentElement.clientHeight+'px';
			elem.style.width=document.documentElement.clientWidth+'px';
			elem.setAttribute('class','bfull');
			this.elfull=document.body.appendChild(elem);
			this.elfull.appendChild(vv1);
			this.elfull.appendChild(document.getElementById('defile').parentNode);
			vv1.setAttribute('class','fulle');
		}

		else{
			stl.appendChild(vv1);
			stl.appendChild(document.getElementById('defile').parentNode);
			vv1.setAttribute('class','v1');
			document.body.removeChild(this.elfull);
		}
		this.marchearret();
	}
}