Html5 player

Soyez le premier à donner votre avis sur cette source.

Vue 7 443 fois - Téléchargée 754 fois

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

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
3
Date d'inscription
vendredi 10 juin 2011
Statut
Membre
Dernière intervention
18 août 2011

Merci de l'info, c'est bon à savoir !
Messages postés
1764
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
10 juillet 2020
83
il serait possible d'ajouter un "overlay image" pour déclarer le fait que le player doit être démarrer !

il existe l'attribut poster a mettre dans la balise video qui permet d'avoir une image avant le démarrage de la video
Messages postés
3
Date d'inscription
vendredi 10 juin 2011
Statut
Membre
Dernière intervention
18 août 2011

Je viens aussi de pense qu'il serait bon ,en plus de l'overlay "PLAY" que j'ai proposé, que la "bottom bar" soit visible en ouverture avec l'overlay pour vraiment afficher la possibilité de lecture et ensuite se "Autohide" dès le début de la lecture comme elle le fait déjà...

Des idées qui me traverse l'esprit pour ce bon petit HTML5 Player !

Cordialemen.
Utilisateur anonyme
super source
je l'ai personnalisé un peut et l'ai intégré a mon site
un grand merci a toi kazma !!!
Messages postés
3
Date d'inscription
vendredi 10 juin 2011
Statut
Membre
Dernière intervention
18 août 2011

très sympa, je le garde sous le coude... il serait possible d'ajouter un "overlay image" pour déclarer le fait que le player doit être démarrer !

une simple image PLAY fera l'affaire !

çà semble logique mais sans visuel apparent, j'ai cru que çà ne fonctionnait pas au début car je voyais un cadre noir uniquement !

Cordialement.
Afficher les 14 commentaires

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.