Media zoomer Zoomer et se positionner dans une video

Soyez le premier à donner votre avis sur cette source.

Vue 4 192 fois - Téléchargée 477 fois

Télécharger le projet
Commenter

Description

la source est repris en partie par une autre de mes source qui effectuait un zoom sur une image a l'aide de la molette sauf que la il s'agit d'une video elle fonctionne toujour a vec les images j'y est adjoint un player personalisé que j'ai aussi developpé en creant une classe javascript

on vas donc pouvoir zoomer avec le scroll sourie et deplacer avec la souris la video mais on vas aussi pouvoir zoomer la barre de defilement du player afin de pouvoir affiner les seqences que l'on veut visionner j'usqu'a un affichage image par images.

hormis une utilisation sur le web on peut aussi l'utiliser pour visionner des video en local pour ce faire j'utilise URL.createObjectURL et si c'est pas possible on passe par FileReader qui contrairement a URL.createObjectURL impose de devoir charger la video en memoire ca concerne les version inferieur a ie 10 firefox 4 chrome 23 safari 7 opera 15 .

le script fonctionne aussi avec la webcam mais por l'heure cela concerne uniquement firefox et chrome et normalement opera. ie 11 et safarie ne le supporte pas et pour chrome et opera le script doit etre mis en ligne

dans le genre cette source est peut etre la seul, j'ai fait une recherche sur le net avec bing et google et j'ai rien vu de similaire de pres comme de loin.

au niveau compatibilité et performances elle est compatible avec Internet explorer firefox chrome et opera quand aux performance j'ai pas testé a fond mais il ressort que les meilleurs on ete obtenus avec Internet explorer et le mp4 ou la fluidité est de loin la meilleur vient apres firefox qui se debrouille pas mal quand a chrme et opera c'est tres moyen.


page teste 


//-------------------------------------------------------------
//  Nom Document : media zoom
//  Auteur       : kamel Atmani
//  Objet        : zoom dirigé sur image et video http://codes-sources.commentcamarche.net/
//  Création     : 14.12.2014
//-------------------------------------------------------------
//  Mise à Jour  : 
//  Objet        : 
//-------------------------------------------------------------
//-(*)------------------

//licence: Creative commons

// Paternité : Vous devez citer le nom de l'auteur original et inclure la mention de bas de page faisant référence à la présente licence et comportant un lien hypertexte vers http://codes-sources.commentcamarche.net/.

// Pas d'utilisation commerciale : Vous n'avez pas le droit d'utiliser cette création à des fins commerciales à moins d'obtenir une autorisation préalable.

// Partage des Conditions Initiales à l'Identique : Si vous modifiez, transformez ou adaptez cette création, vous n'avez le droit de distribuer la création qui en résulte que sous un contrat identique à celui-ci.


// A chaque réutilisation ou distribution, vous devez faire apparaître clairement aux autres les conditions contractuelles de mise à disposition de cette création.
// Chacune de ces conditions peut être levée si vous obtenez l'autorisation du titulaire des droits.



var kmage={

 chemin:"",   /////////////////repertoire ou se trouves les images et videos////////////////////::
 hou:0,
 rar:true,
 setX:0,
 setY:0,
 imag:new Image(),
 elem_video:false,
 elem_image:'',
 imadiv:'',
 media:false,
 voile:false,
 ima_preload:'',
 elem_en_cour:'',

 //fonction pour la creation du voile et de l'image de precharge avec leur attributs ainsi que le prechargement

precharge:function(media){

 this.init_voile();
 this.init_preload();
 
 
 var extention=media.substring(media.lastIndexOf("."));
 
 if(extention=='.ogg' || extention=='.mp4' || extention=='.webm' || extention=='.ogv'){
 
  !this.media ? this.inideo() : null;
  
  var nom=media.substr(0,media.lastIndexOf("."));
  
  this.element_video.changer(this.chemin+nom);
  
 }
 
 else{
  this.image_prepare(media);
 }
 

},



init_voile:function(){

 if(this.voile==false){
  
  this.voile=document.createElement('div');
  
  with (this.voile.style){
   position='absolute';
   top=0+"px";
   left=0+"px";
   backgroundColor="black";
   position='fixed';
   height='100%';
   width='100%';
   cursor='pointer';
   typeof window.addEventListener == 'undefined' ? filter = 'alpha(opacity=0)' : opacity =0;
  }
  this.zidex(this.voile);
  this.fade(this.voile,0,0.5);
  
  document.body.appendChild(this.voile);
 }
 
 else{
  this.voile.style.display='block';
 }
},



init_preload:function(){
 
 this.ima_preload=document.createElement('img');
 
 document.body.appendChild(this.ima_preload);
 
 this.ima_preload.setAttribute("src", "data:image/gif;base64,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");
 
 typeof window.addEventListener == 'undefined' ?  this.ima_preload.style.filter='alpha(opacity=100)' : this.ima_preload.style.opacity =100;
 
 this.ima_preload.style.position='absolute';
 this.ima_preload.style.width=150+"px";
 this.zidex(this.ima_preload);
 this.sscro(this.ima_preload);
},


 

image_prepare:function(media){
  
  if(this.imag.getAttribute("src")==this.chemin+media){
   this.inimage();
   return false;
  }
  
  this.imag.setAttribute("src", this.chemin+media);
  
  if(navigator.oscpu||navigator.vendor){
   
   this.imag.onload=function(){kmage.inimage()}
  } 
  else{
   this.complet();
  }

},


complet:function(){

  if(kmage.imag.complete==true){
   kmage.inimage();
   return false;
  }
  setTimeout(kmage.complet,100);
 },

 
 
 
 
dragenter:function(e) {
 e.stopPropagation();
 e.preventDefault();
},



drop:function(e) {


 if (!e) {
  var fichier = document.getElementById('fileinput').files;
 }
 else {
   
  e.preventDefault();
  var fichier = e.dataTransfer.files;
 }
 this.chacharge(fichier);
},



chacharge:function(fichier) {

 if (fichier[0].type.match('image.*') || fichier[0].type.match('video.*')) {
 
  
  var nom=fichier[0].name;

  var charge=new FileReader();
  
  charge.readAsDataURL(fichier[0]);
  
  charge.onloadend = function(e,nom){
  
  fichier[0].type.match('image.*') ? kmage.inimage(e.target.result) : kmage.video_local(e.target.result,fichier[0].name);

  }
 }
},

 

video_local:function(resultat,nom){

 this.init_voile();
 this.init_preload();
 !this.media ? this.inideo() : null;
 this.element_video.changer_local(resultat,nom);
 
},
 
 

inideo:function(la_video){

   var controle=document.createElement('div');
   controle.style.position='absolute';
   controle.style.top='20px';
   controle.style.width=(screen.availWidth*0.3)+"px";
   controle.setAttribute("onmousemove","kmage.souris(event)");
   controle.setAttribute("onmousedown","kmage.sp(event)");
   controle.setAttribute("onmouseup","kmage.sp()");
   
   if (navigator.userAgent.indexOf("Firefox") != -1){
    controle.addEventListener('DOMMouseScroll', this.taille_controle, false);
    controle.addEventListener("DOMMouseScroll", this.selecte, false);
   }
   else{
    controle.addEventListener('mousewheel', this.taille_controle, false);
    controle.addEventListener("mousewheel", this.selecte, false);
   }
   
   this.element_video=new videoclass(200,controle,document.body,document.body,document.body,this);
      
   this.div_controle=document.body.appendChild(controle);
   
   this.media=this.element_video.vivi;
   
   this.zidex(this.media);
   this.media.style.position='absolute';
   
   var taille=Math.round((screen.availWidth)*(screen.availHeight/screen.availWidth))
   
   this.media.style.width=taille+"px";
   
   this.zidex(controle);
   
   this.initevent(this.media);
   
   this.voile.onclick=kmage.quit_video;

  
  var play=document.createElement('div')
   play.style.position='absolute';
   play.style.top='130px';
   play.style.width="100px";
   play.style.height="100px";
   play.style.borderRadius="30px";
   play.style.backgroundImage='url("res/preview2.jpg")';
   play.style.backgroundSize='100% 100%';
   play.style.border='1px outset black';
   this.zidex(play);
   play.setAttribute("onmousemove","kmage.souris(event)");
   play.setAttribute("onmousedown","kmage.sp(event)");
   play.setAttribute("onmouseup","kmage.sp()");
   
   var bouton_play=document.createElement('div');
   bouton_play.style.position="relative";
   bouton_play.style.width="60px";
   bouton_play.style.height="60px";
   bouton_play.style.marginTop="20px";
   bouton_play.style.marginLeft="20px";
   bouton_play.style.cursor="pointer";
   bouton_play.style.backgroundImage='url("res/lecture.png")';
   
   
   bouton_play.addEventListener('click',function(e){
   kmage.element_video.marchearret();
   
   if(kmage.element_video.vivi.paused){
   
   kmage.div_play.firstChild.style.backgroundPosition="0px 0px";
   
   }
   else{
   kmage.div_play.firstChild.style.backgroundPosition="60px 0px";
   }
   
   } ,false);
   
   play.appendChild(bouton_play);
   
   kmage.div_play=document.body.appendChild(play);

},
   

   
recharger:function(){

 this.media.style.height=90+"%";
 this.media.style.display='block';
 this.div_controle.style.display='block';
 this.div_play.style.display='block';
 
 document.addEventListener("mouseup", kmage.selecte, false);

 this.sscro(this.media);
 this.voile.onclick=this.quit_video;
 this.elem_en_cour=this.media;
},
 
 

video_valid:function(){

 
 this.recharger();
 
 this.ima_preload.parentNode.removeChild(this.ima_preload);
 
 kmage.element_video.marchearret();
 
 kmage.div_play.firstChild.style.backgroundPosition="60px 0px";

},


 //fonction pour l'initialisation de l'image et des evenements

inimage:function(image){

  this.ima_preload.parentNode.removeChild(this.ima_preload);
  
  this.elem_image=document.createElement('img');
  document.body.appendChild(this.elem_image);
  
  var elem=this.elem_image;
  
  elem.src = arguments.length == 0 ? this.imag.getAttribute('src') : arguments[0];
  
  typeof window.addEventListener == 'undefined' ?  elem.style.filter='alpha(opacity=0)' : elem.style.opacity =0;
  this.zidex(elem);
  elem.style.position='absolute';
  elem.style.height=90+"%";
  elem.style.cursor=  'zoom-in';

  this.sscro(this.elem_image);

  this.fade(this.elem_image,0,1)
  
  this.elem_en_cour=elem;
  this.initevent(elem)
  
  this.voile.onclick=kmage.quit;
 },


 
 
initevent:function(elem){
  
  if(typeof window.addEventListener == 'undefined'){
   
   elem.attachEvent('onmousedown',function(){kmage.sp(event)});
   elem.attachEvent('onmouseup',function(){kmage.sp()});
   elem.attachEvent('onmousewheel',kmage.dirizoom);
   elem.attachEvent("onmousemove",kmage.souris);
   elem.attachEvent('onmousewheel', kmage.selecte);
  }
  else{
   elem.setAttribute("onmousemove","kmage.souris(event)");
   elem.setAttribute("onmousedown","kmage.sp(event)");
   elem.setAttribute("onmouseup","kmage.sp()");
   document.addEventListener("mouseup", kmage.selecte, false);

   if (navigator.userAgent.indexOf("Firefox") != -1){
    elem.addEventListener('DOMMouseScroll', kmage.dirizoom, false);
    elem.addEventListener("DOMMouseScroll", kmage.selecte, false);
   }
   else{
    elem.addEventListener('mousewheel', kmage.dirizoom, false);
    elem.addEventListener("mousewheel", kmage.selecte, false);
   }
  }
  
 },



 
quit_video:function(){

 if(this.ima_preload){
  this.ima_preload.parentNode.removeChild(this.ima_preload);
 }

 document.removeEventListener("mouseup", kmage.selecte, false);
 
 kmage.voile.style.display='none';
 typeof window.addEventListener == 'undefined' ? filter = 'alpha(opacity=0)' : opacity =0;
 
 kmage.element_video.stop();
 kmage.media.style.display='none';
 kmage.div_controle.style.display='none';
 kmage.div_play.style.display='none';
 kmage.div_play.firstChild.style.backgroundPosition="0px 0px";
},


 //fonction de suppression de l'image du voile et des evenement lie au document

quit:function(){

  if(typeof window.addEventListener != 'undefined'){
   document.removeEventListener("mouseup", kmage.selecte, false);
  }
  kmage.voile.style.display='none';
  kmage.elem_image.parentNode.removeChild(kmage.elem_image);
 },



fade:function(elem,progression,valeur_fin){

  
  var elem=elem;
  
  if(progression<=valeur_fin){
   progression+=0.15;
   typeof window.addEventListener == 'undefined' ? elem.style.filter = 'alpha(opacity='+(progression*100)+')' : elem.style.opacity=progression;
  }
  
  else{
   return false
  }
  setTimeout(function(){kmage.fade(elem,progression,valeur_fin)},40);
 },



 //fonction pour le positionne de l'image et du voile

sscro:function(elem){

  var dde=document.documentElement;
  
  elem.style.left=((dde.clientWidth-elem.offsetWidth)/2)+'px';
  if(navigator.vendor){
   elem.style.top=(dde.clientHeight-elem.offsetHeight)/2+dde.lastChild.scrollTop+"px";
   
  } 
  else{
   elem.style.top=(dde.clientHeight-elem.offsetHeight)/2+dde.scrollTop+"px";
   
  }
 },




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;
 },
 
            //fonction pour la detection du mouvement de souris
 
souris:function(s){

  var dde=(navigator.vendor) ? document.body : document.documentElement;
  
  s = !s ? event : s;
  
  kmage.setX = s.clientX + dde.scrollLeft;
  kmage.setY = s.clientY + dde.scrollTop;
  
  return false;
 },

 //fonction pour annuler l'action  par default du navigateur

 
selecte:function(ev){
  typeof window.addEventListener == 'undefined' ? event.returnValue = false : ev.preventDefault();
 },


 //fonction pour le zoom directionnel

dirizoom:function(e){

  var delta = 0;
  if (!e) e = window.event;
  if (e.wheelDelta) {
   delta = e.wheelDelta/120; 
  } else if (e.detail) {
   delta = -e.detail/3;
  }
  var val = delta < 0 ? -0.15 : 0.15;
  
  var elem=kmage.elem_en_cour;
  
  var dirle=(elem.offsetWidth/2)-(kmage.setX-(elem.parentNode.offsetLeft+elem.offsetLeft));
  var dirto=(elem.offsetHeight/2)-(kmage.setY-(elem.parentNode.offsetTop+elem.offsetTop));
  var lf=elem.offsetWidth;
  var rf=elem.offsetHeight;
  elem.style.width=lf+(lf*val)+'px';
  elem.style.height=rf+(rf*val)+'px';
  elem.style.left=elem.offsetLeft-((elem.offsetWidth-lf)/2)+(dirle*val)+'px';
  elem.style.top=elem.offsetTop-((elem.offsetHeight-rf)/2)+(dirto*val)+'px';
 },


 
taille_controle:function(e){

  var delta = 0;
  if (!e) e = window.event;
  if (e.wheelDelta) {
   delta = e.wheelDelta/120; 
  } else if (e.detail) {
   delta = -e.detail/3;
  }
  var val = delta < 0 ? -0.15 : 0.15;
  var elem=kmage.div_controle;
  var dirle=(elem.offsetWidth/2)-(kmage.setX-(elem.parentNode.offsetLeft+elem.offsetLeft));
  var lf=elem.offsetWidth;
  
  elem.style.width=lf+(lf*val)+'px';
  elem.style.left=elem.offsetLeft-((elem.offsetWidth-lf)/2)+(dirle*val)+'px';
  
  var distance=kmage.element_video.son.offsetWidth;
  var son=kmage.element_video.vivi.volume
  kmage.element_video.son.getElementsByTagName('div')[0].style.width=son*distance+'px';
  
  if(kmage.element_video.vivi.paused){

  kmage.element_video.posivi()
  
  }
  
 },


 //partie drag

sp:function(evt){

  if(kmage.rar && arguments.length!=0){
   
   var dde=(navigator.vendor) ? document.body : document.documentElement;
   var cen=typeof window.addEventListener == 'undefined' ? event.srcElement : evt.currentTarget;
   typeof window.addEventListener != 'undefined' ? document.addEventListener("mousedown", kmage.selecte, false) : null;
   kmage.setX=evt.clientX + dde.scrollLeft;
   kmage.setY=evt.clientY + dde.scrollTop;
   var px=kmage.setX-cen.offsetLeft;
   var py=kmage.setY-cen.offsetTop;
   dragval=setInterval(function(){kmage.posi(px,py,cen)},20);
   kmage.rar=false;
  }
  
  if(kmage.rar==false && arguments.length==0){
   typeof window.addEventListener != 'undefined' ? document.removeEventListener("mousedown", kmage.selecte, false) : null;
   clearInterval(dragval);
   kmage.rar=true;
  }
 },

 
posi:function(decx,decy,elem){
  elem.style.left=(kmage.setX-decx)+"px";
  elem.style.top=(kmage.setY-decy)+"px";
 }
}
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)