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
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.