Html5 player

Télécharger le projet
Commenter

Description

c'est un player en html5 j'ai mis deux source il y a deux sources

pour la premiere source j'ai essayé de faire le plus simple possible avec un code facilement compréhensible il a les options habituelles play pause stop mute le reglage du son le plein ecran par double clic sur la video et une petite option en plus quand on clic sur le timer on a soit la duree ecoulé soit la duree restante il est paramétrable via le css

pour la deuxième source j'ai fait un objet afin de pouvoir mettre plusieurs lecteurs sur une page par instanciation, la source a les memes options que la premiere mais est plus simple a mettre en oeuvre ca il suffit de mettre dans la partie js une ligne par player afin de l'instancier en precisant le div qui le contiendra et l'adresse de la video ,le html ne contiendra que le div conteneur de chaque lecteurs accompagné de sa partie csse css afin de preciser la taille,la position et autres du div conteneur

Source / Exemple : 


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

Conclusion :


pas trop long mais totalement fonctionnel
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (@karamel)