Html 5 media player
Description
il s'agit d'un player fonctionnant avec la balise <video> du html 5 et utilisant ses méthodes et propriétés associe au Dhtml et css les possibilités son le réglage du son, le déplacement et le redimensionnement de la fenêtre play ,pause ,mute ...etc
fonctionne avec firefox opera ie9 et safari.
pour la demo c'est a cette adresse http://scriptevol.toile-libre.org/video5/video5.html
la revolution est en marche
fonctionne avec firefox opera ie9 et safari.
pour la demo c'est a cette adresse http://scriptevol.toile-libre.org/video5/video5.html
Source / Exemple :
tbplein=new Array()
var kplayer={
px:0,
py:0,
ggt:0,
ggs:0,
cons:null,
loto:false,
divgeneral:null,
divhd:null,
divivi:null,
divgg:null,
divdefile:null,
divcontrole:null,
divvol:null,
scr:function(azer,evt){
typeof this.prp == 'undefined' ? this.prp=false : null;
var el=kplayer.divivi;
if(arguments.length==1){
clearInterval(kplayer.ggs);
document.documentElement.removeEventListener("mousedown", kdiver.selecte, false);
document.documentElement.removeEventListener("mousemove", kdiver.souris, false);
document.documentElement.removeAttribute("onmouseup");
if(azer=='rd'){
this.prp=false;
}
if(azer=='defile' && this.prp==true){
this.prp=false;
el.play();
kplayer.ggt=setInterval(kplayer.def,50);
}
}
if(arguments.length==2){
var dde=(navigator.vendor) ? document.body : document.documentElement;
if(azer=='rd' && this.prp==true){
return false;
}
document.documentElement.addEventListener("mousemove", kdiver.souris, false);
document.documentElement.addEventListener("mousedown", kdiver.selecte, false);
document.documentElement.setAttribute("onmouseup", "kplayer.scr('"+azer+"')");
kdiver.setX=evt.clientX + dde.scrollLeft;
kdiver.setY=evt.clientY + dde.scrollTop;
kplayer.px=kdiver.setX;
kplayer.py=kdiver.setY;
if(azer=='rd'){
this.prp=true;
kplayer.ggs=setInterval('kplayer.redim("'+azer+'")',10);
}
if(azer=='vol' || azer=='defile'){
kplayer.cons=(azer=='vol' ? kplayer.divvol : kplayer.divdefile);
if(azer=='defile' && !el.paused){
el.pause();
this.prp=true;
}
kplayer.ggs=setInterval('kplayer.sps("'+azer+'")',10);
}
}
},
sps:function(azer){
var el=kplayer.divivi;
var ds1 =kplayer.cons;
var rcsb =ds1.getElementsByTagName('div')[0];
if((parseInt(getComputedStyle(rcsb, null).getPropertyValue('margin-left')))+kdiver.setX-kplayer.px<0){
rcsb.style.marginLeft=0+'px';
if(azer=='vol'){
el.volume=0;
}
else{
el.currentTime=0;
}
kplayer.scr(azer);
return false;
}
if((parseInt(getComputedStyle(rcsb, null).getPropertyValue('margin-left')))+rcsb.offsetWidth+kdiver.setX-kplayer.px>ds1.offsetWidth){
rcsb.style.marginLeft=ds1.offsetWidth-rcsb.offsetWidth+'px';
if(azer=='vol'){
el.volume=1;
}
else{
el.currentTime=el.duration;
}
kplayer.scr(azer);
return false;
}
rcsb.style.marginLeft=(parseInt(getComputedStyle(rcsb, null).getPropertyValue('margin-left')))+(kdiver.setX-kplayer.px)+'px';
if(azer=='vol'){
el.volume=parseInt(getComputedStyle(rcsb, null).getPropertyValue('margin-left'))/(kplayer.divvol.offsetWidth-rcsb.offsetWidth);
kplayer.divvol.getElementsByTagName('span')[0].style.width=rcsb.style.marginLeft;
}
else{
el.currentTime= parseInt(getComputedStyle(rcsb, null).getPropertyValue('margin-left'))*(el.duration/(kplayer.divdefile.offsetWidth-rcsb.offsetWidth));
kplayer.divdefile.getElementsByTagName('div')[3].style.width=parseInt(kplayer.divdefile.getElementsByTagName('div')[0].style.marginLeft)+5+'px';
kplayer.tpm();
}
kplayer.px=kdiver.setX;
},
odevi:function(choix){
var ell=kplayer.divivi;
if((choix=="pla" && ell.paused)){
ell.play();
kplayer.imvoil();
kplayer.ggt=setInterval(kplayer.def,50);
}
if(choix=="stp" && ell.currentTime){
clearInterval(kplayer.ggt);
ell.currentTime=0;
ell.pause();
kplayer.tpm('zero');
kplayer.divdefile.getElementsByTagName('div')[0].style.marginLeft=0+'px';
kplayer.divdefile.getElementsByTagName('div')[3].style.width=5+'px';
kplayer.imvoil();
}
if(choix=="pau"){
ell.pause();
kplayer.imvoil();
}
if(choix=="pos"){
ell.currentTime=0;
kplayer.tpm('zero');
if(ell.paused){
kplayer.divdefile.getElementsByTagName('div')[0].style.marginLeft=0+'px';
kplayer.divdefile.getElementsByTagName('div')[3].style.width=0+'px';
kplayer.imvoil();
}
}
if(choix=="mut"){
if(ell.muted){
kplayer.divvol.getElementsByTagName('img')[0].setAttribute('src','res/mute.png');
ell.muted=false;
}
else{
kplayer.divvol.getElementsByTagName('img')[0].setAttribute('src','res/mute2.png');
ell.muted=true;
}
}
},
redim:function(){
var dgtgn=kplayer.divdefile.getElementsByTagName('*');
var dico=kplayer.divgeneral;
if(arguments[0]=='plus'){
var dde=document.documentElement;
var ddl=(navigator.vendor) ? document.body : document.documentElement;
var deca=dde.clientWidth-parseInt(dico.offsetWidth);
var decy=dde.clientHeight-parseInt(dico.offsetHeight);
tbplein.push(dico.offsetTop);
tbplein.push(dico.offsetLeft);
tbplein.push(deca);
tbplein.push(decy);
dico.style.top=0+ddl.scrollTop+"px";
dico.style.left=0+ddl.scrollLeft+"px";
}
if(arguments[0]!='plus' && arguments[0]!='moins'){
var deca=(kdiver.setX-kplayer.px);
var decy=kdiver.setY-kplayer.py;
if(tbplein.length!=0){
tbplein.pop();
tbplein.pop();
tbplein.pop();
tbplein.pop();
}
}
if(arguments[0]=='moins'){
dico.style.top=tbplein[0]+"px";
dico.style.left=tbplein[1]+"px";
var deca=-(tbplein[2]);
var decy=-(tbplein[3]);
tbplein.pop();
tbplein.pop();
tbplein.pop();
tbplein.pop();
}
var el=kplayer.divivi;
var barre=kplayer.divdefile.getElementsByTagName('div')[0];
var defi=kplayer.divdefile;
dico.style.width=dico.offsetWidth+deca+'px';
defi.style.width=defi.offsetWidth+deca+'px';
el.style.width=el.offsetWidth+deca+'px';
el.style.height=el.offsetHeight+decy+'px';
kplayer.divgg.style.width=el.style.width;
kplayer.divgg.style.height=el.style.height;
if(loto==true){
kplayer.divdefile.getElementsByTagName('div')[2].style.width=defi.offsetWidth-barre.offsetWidth+'px';
}
if(loto==false){
kplayer.lolo();
}
if(el.paused){
barre.style.marginLeft=el.currentTime/(el.duration/(defi.offsetWidth-barre.offsetWidth))+'px';
kplayer.divdefile.getElementsByTagName('div')[3].style.width=parseInt(barre.style.marginLeft)+5+'px';
}
kplayer.px=kdiver.setX;
kplayer.py=kdiver.setY;
},
def:function(){
if(kplayer.divgeneral==null){
clearInterval(kplayer.ggt);
return false;
}
var el=kplayer.divivi;
var barre=kplayer.divdefile.getElementsByTagName('div')[0];
if(el.currentTime && el.readyState>=3){
barre.style.marginLeft=el.currentTime/(el.duration/(kplayer.divdefile.offsetWidth-barre.offsetWidth))+'px';
kplayer.divdefile.getElementsByTagName('div')[3].style.width=parseInt(barre.style.marginLeft)+5+'px';
kplayer.tpm();
}
if(el.ended){
kplayer.odevi('stp');
}
if(el.paused && el.readyState>=3){
clearInterval(kplayer.ggt);
}
},
clvol:function(evt){
var rcsb=kplayer.divvol.getElementsByTagName('div')[0];
var ell=kplayer.divgeneral;
var vovo=kplayer.divvol;
var valrs=evt.clientX-(kplayer.divcontrole.offsetLeft+ell.offsetLeft+vovo.offsetLeft)-(rcsb.offsetWidth/2);
if(valrs>=0 && valrs<=vovo.offsetLeft){
rcsb.style.marginLeft=valrs+'px';
kplayer.divvol.getElementsByTagName('span')[0].style.width=rcsb.style.marginLeft;
kplayer.divivi.volume=parseInt(rcsb.style.marginLeft)/(vovo.offsetWidth-(rcsb.offsetWidth/2));
}
},
tpm:function(oui){
typeof this.total == 'undefined' ? this.total=1 : null;
if (arguments.length==1 && oui=='dif'){
this.total=(this.total==0 ? 1 : 0);
}
var dura=(this.total==0 ? kplayer.divivi.currentTime : kplayer.divivi.duration-kplayer.divivi.currentTime);
var elem=kplayer.divcontrole.getElementsByTagName('div')[0];
if (oui=='zero' || isNaN(dura)) {
elem.firstChild.nodeValue='00:00:00';
}
else{
var min = Math.floor(dura / 60);
if (min < 10) {
min = '0' + min;
}
var sec = Math.floor(dura % 60);
if (sec < 10) {
sec = '0' + sec;
}
elem.firstChild.nodeValue='00:'+min+ ':'+sec;
}
},
imvoil:function(){
var ge=kplayer.divgg;
var el=kplayer.divivi;
if((!el.paused)){
kplayer.divcontrole.getElementsByTagName('img')[0].setAttribute('src','res/play2.png');
ge.setAttribute('onclick','kplayer.odevi("pau")');
}
else{
kplayer.divcontrole.getElementsByTagName('img')[0].setAttribute('src','res/play.png');
ge.style.width=el.style.width;
ge.style.height=el.style.height;
ge.setAttribute('onclick','kplayer.odevi("pla")');
}
},
pb:function(evt){
var ell=kplayer.divivi;
var le=kplayer.divgeneral;
var rcsb=kplayer.divdefile.getElementsByTagName('div')[0];
var rcml=evt.clientX-(le.offsetLeft+ell.offsetLeft)-rcsb.offsetWidth;
if(rcml>0){
ell.currentTime= rcml*(ell.duration/(kplayer.divdefile.offsetWidth-rcsb.offsetWidth));
rcsb.style.marginLeft=rcml+'px';
kplayer.divdefile.getElementsByTagName('div')[3].style.width=parseInt(rcsb.style.marginLeft)+5+'px';
}
},
attente:function() {
kplayer.divgg.getElementsByTagName('img')[0].style.visibility='visible';
return false;
},
saroule:function() {
kplayer.divgg.getElementsByTagName('img')[0].style.visibility='hidden';
return false;
},
changer:function(titre){
loto=false;
if(kplayer.divgeneral!=null){
var le=kplayer.divivi;
if(!le.paused){
kplayer.odevi('stp');
}
kplayer.divdefile.getElementsByTagName('div')[2].style.width=0+'px';
var version=navigator.userAgent.indexOf('Firefox',0);
if(navigator.userAgent.indexOf('Firefox',0)!=-1 && parseInt(navigator.userAgent.substring(version+8,version+9))<4){
le.setAttribute('src',titre+'.ogv');
}
else{
var elemensource=le.getElementsByTagName('source');
elemensource[0].setAttribute('src',titre+'.webm');
elemensource[1].setAttribute('src',titre+'.mp4');
elemensource[2].setAttribute('src',titre+'.ogv');
elemensource[3].setAttribute('src',titre+'.ogg');
}
le.load();
kplayer.odevi('pla');
kplayer.centrage(kplayer.divgeneral);
}
else{
kplayer.initplayer(titre);
}
},
lolo:function(evt){
var elem=kplayer.divivi;
var dura=elem.duration;
if(elem.buffered && elem.buffered.length>0){
var charge=elem.buffered.end(0);
kplayer.divdefile.getElementsByTagName('div')[2].style.width=(((charge/dura).toFixed(2))*(kplayer.divdefile.offsetWidth-kplayer.divdefile.getElementsByTagName('div')[0].offsetWidth))+'px';
if(((charge/dura).toFixed(2))>=0.96){
loto=true;
}
}
else{
kplayer.divdefile.getElementsByTagName('div')[2].style.width=((elem.loaded/elem.total)*(kplayer.divdefile.offsetWidth-kplayer.divdefile.getElementsByTagName('div')[0].offsetWidth))+'px';
if((elem.loaded/elem.total)>=0.96){
loto=true;
}
}
},
initplayer:function(titre){
kplayer.divgeneral=kdiver.creation('div','body','class','divico');
var divico=kplayer.divgeneral;
kplayer.divhd=kdiver.creation('div',divico,'class','hd','onmousedown','kdiver.sp(event)','onmouseup','kdiver.sp()','ondblclick','kplayer.pleinfin()');
var hd=kplayer.divhd;
kdiver.creation('div',hd,'class','bouge','onclick','kplayer.vivifin()');
kdiver.creation('div',hd,'class','plein','onclick','kplayer.pleinfin()');
kdiver.creation('span',hd,'class','ktxt','txt','K player');
kplayer.divgg=kdiver.creation('div',divico,'class','gg','onclick','kplayer.odevi("pla")','class','ghh');
var version=navigator.userAgent.indexOf('Firefox',0);
if(navigator.userAgent.indexOf('Firefox',0)!=-1 && parseInt(navigator.userAgent.substring(version+8,version+9))<4){
kplayer.divivi=kdiver.creation('video',kplayer.divgg,'class','vivi','src',titre+'.ogv','oncanplay','kplayer.saroule()','poster','res/kp.png','onwaiting','kplayer.attente()','autobuffer','true','preload','auto','onprogress','kplayer.lolo(event)');
}
else{
kplayer.divivi=kdiver.creation('video',kplayer.divgg,'class','vivi','oncanplay','kplayer.saroule()','poster','res/kp.png','onwaiting','kplayer.attente()','autobuffer','true','preload','auto','onprogress','kplayer.lolo(event)');
kdiver.creation('source',kplayer.divivi,'src',titre+'.webm','type','video/webm');
kdiver.creation('source',kplayer.divivi,'src',titre+'.mp4','type','video/mp4');
kdiver.creation('source',kplayer.divivi,'src',titre+'.ogv','type','video/ogg');
kdiver.creation('source',kplayer.divivi,'src',titre+'.ogg','type','video/ogg');
}
kdiver.creation('img',kplayer.divgg,'class','imwait','src','res/29.gif');
kdiver.creation('div',divico,'class','dr');
kdiver.creation('div',divico,'class','gc');
kplayer.divdefile=kdiver.creation('div',divico,'class','defile');
var defile=kplayer.divdefile;
kdiver.creation('div',defile,'class','scroll1','onmousedown','kplayer.scr("defile",event)');
kdiver.creation('div',defile,'class','clique','onclick','kplayer.pb(event)');
kdiver.creation('div',defile,'class','prech');
kdiver.creation('div',defile,'class','suis');
kplayer.divcontrole=kdiver.creation('div',divico,'class','controle');
var controle=kplayer.divcontrole;
kdiver.creation('img',controle,'src','res/play.png','onclick','kplayer.odevi("pla")');
kdiver.creation('img',controle,'src','res/pause.png','onclick','kplayer.odevi("pau")');
kdiver.creation('img',controle,'src','res/stop.png','onclick','kplayer.odevi("stp")');
kdiver.creation('img',controle,'src','res/raz.png','onclick','kplayer.odevi("pos")');
kdiver.creation('div',controle,'class','tmp','txt','00:00:00','onclick','kplayer.tpm("dif")','onmousedown','kdiver.selecte(event)');
kplayer.divvol=kdiver.creation('div',kplayer.divcontrole,'class','vol');
var vol=kplayer.divvol;
kdiver.creation('img',vol,'class','temu','src','res/mute.png','onclick','kplayer.odevi("mut")');
kdiver.creation('span',vol,'class','suivol');
kdiver.creation('span',vol,'class','clicvol','onclick','kplayer.clvol(event)');
kdiver.creation('div',vol,'class','scrolvol','onmousedown','kplayer.scr("vol",event)');
kdiver.creation('div',divico,'class','rd','onmousedown','kplayer.scr("rd",event)');
kplayer.zidex(divico);
kplayer.odevi('pla');
kplayer.centrage(kplayer.divgeneral)
},
zidex:function(elem){
var allElements = document.getElementsByTagName('*');
var vaval=0;
var vaz=0;
for (var i = 0; i< allElements.length; i++){
if(allElements[i].parentNode==document.body){
vaz =parseInt(navigator.appName.substring(0,5)=="Micro" ? allElements[i].currentStyle.zIndex : getComputedStyle(allElements[i],null).getPropertyValue('z-index'));
if(vaz>vaval){
vaval=vaz;
}
}
}
elem.style.zIndex=vaval+1;
},
vivifin:function(){
kplayer.divivi.pause();
kplayer.divivi.removeAttribute("onprogress");
kplayer.divgeneral.parentNode.removeChild(kplayer.divgeneral);
kplayer.divgeneral=null;
if(tbplein.length!=0){
tbplein.pop();
tbplein.pop();
tbplein.pop();
tbplein.pop();
}
},
pleinfin:function(){
if(tbplein.length==0){
kplayer.redim('plus');
return false;
}
if(tbplein.length>=3){
kplayer.redim('moins');
return false;
}
},
centrage:function(quoi){
var dde=document.documentElement;
var ddl=(navigator.vendor) ? document.body : document.documentElement;
quoi.style.left=((dde.clientWidth-quoi.offsetWidth)/2)+ddl.scrollLeft+'px';
quoi.style.top=50+ddl.scrollTop+"px";
},
}
Conclusion :
la revolution est en marche
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.