body{
background-color:white;
}

http://res/k_mur_video_16.js
http://res/videoclass.js

function mur_instance(){

var ob2=Object.create(k_mur_video);

ob2.nombre=8;
ob2.nb_hauteur=2,
ob2.angle_max=(Math.PI/4);
ob2.marge=-1.5;
ob2.bord=10;
ob2.ctn=document.getElementById(“ctn2″);
ob2.chemin=”http://scriptevol.free.fr/contenu/video_curve/video/”
ob2.video_nom=”Streamzilla.mp4″;
ob2.vivi=document.getElementById(“vivi”)
ob2.init_video();
}

window.addEventListener(‘load’,mur_instance, false);

charger

//————————————————————-
// Nom Document : video objet
// Auteur : kamel Atmani
// Objet : objet javascript 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.

function videoclass(largeur_video,ctn_control,ctn_video,image_attente,lui,ctx_createur){

this.interplay=’vide’;
this.total=0;
this.ctn_video=ctn_video;
this.ctn_controle=ctn_control;
this.image_attente=image_attente;
this.etat_pause=1;
this.elem=null;
this.progres=null;
this.vivi=”;
this.defile=null;
this.precharge=null;
this.contenant=null;
this.full_etat=false;
this.ma=function(){that.marchearret.call(that)};
this.mt=function(e){that.mute.call(that,e)};
this.stp=function(e){that.stop.call(that,e)};

this.ajevt=function(e){that.ajoutevent.call(that,e)};
this.retire=function(e){that.retireevent.call(that,e)};
this.rentcu=function(e){that.curent.call(that,e)};

this.metson=function(e){that.event_son.call(that,e)};
this.retson=function(e){that.no_event_son.call(that,e)};
this.sn=function(e){that.sonson.call(that,e)};

this.tpm=function(e){that.toto.call(that,e)};
this.att=function(e){that.attente.call(that,e)};
this.progre=function(e){that.progression.call(that,e)};
this.roule=function(e){that.saroule.call(that,e)};
this.lefou=function(e){that.full.call(that,e)};
this.lui=lui;
this.ctx_createur=ctx_createur;

/////////////////////////////////
//creation dynamique du player///
/////////////////////////////////

var that=this

var el_video=document.createElement(‘video’);
el_video.setAttribute(‘class’,’v1′);

if(largeur_video){
el_video.style.width=largeur_video+’px’;
}
el_video.addEventListener(“progress”, that.progre, false);
el_video.addEventListener(‘ended’, this.stp, false);
el_video.addEventListener(‘canplay’, that.roule, false);
el_video.addEventListener(‘waiting’, that.att, false);
el_video.addEventListener(‘dblclick’, that.lefou, false);
el_video.onerror=function(){alert(‘une erreur de lecture et survenue’)}

var cesour=document.createElement(‘source’);
cesour.setAttribute(‘type’,’video/webm’);
el_video.appendChild(cesour);

var cesour=document.createElement(‘source’);
cesour.setAttribute(‘type’,’video/ogg’);
el_video.appendChild(cesour);

var cesour=document.createElement(‘source’);
cesour.setAttribute(‘type’,’video/mp4′);
el_video.appendChild(cesour);

this.vivi=this.ctn_video.appendChild(el_video);

var contenant=document.createElement(‘div’);
contenant.setAttribute(‘class’,’conso’);

var defi=document.createElement(‘div’);
defi.setAttribute(‘class’,’defile’);
defi.addEventListener(‘mousedown’,this.ajevt, false);

var soudefi=document.createElement(‘div’);
soudefi.setAttribute(‘class’,’precharge’);
this.precharge=defi.appendChild(soudefi);
var soudefi=document.createElement(‘div’);
soudefi.setAttribute(‘class’,’suisbar’);
defi.appendChild(soudefi);

this.defile=contenant.appendChild(defi);

var touche=document.createElement(‘div’);
touche.addEventListener(“click”,this.ma, false);
touche.setAttribute(‘class’,’k_marche’);
this.marche=contenant.appendChild(touche);

var sous=document.createElement(‘div’);
sous.setAttribute(‘class’,’cont_son’);

var touche1=document.createElement(‘div’);
touche1.setAttribute(‘class’,’k_mute_off’);
touche1.addEventListener(‘click’,this.mt, false);
sous.appendChild(touche1);

var so=document.createElement(‘div’);
so.setAttribute(‘class’,’son’);
so.addEventListener(‘mousedown’,this.metson, false);
var souso=document.createElement(‘div’);
so.appendChild(souso);
this.son=sous.appendChild(so);

contenant.appendChild(sous);

var temp=document.createElement(‘span’);
temp.setAttribute(‘class’,’temp’);
temp.addEventListener(‘click’,that.tpm, false);
var txt=document.createTextNode(’00:00′);
temp.appendChild(txt);
this.temp=contenant.appendChild(temp);

var pro=document.createElement(‘img’);
pro.setAttribute(‘src’,’res/29.gif’);
pro.setAttribute(‘id’,’prog’);
this.progres=this.image_attente.appendChild(pro);

this.ctn_controle.appendChild(contenant);

this.contenant=contenant;

}

videoclass.prototype.ajoutevent=function(e){

e.stopPropagation();
var that=this;
e.preventDefault();

this.vivi.paused ? this.etat_pause=1 : null;
this.vivi.pause();
clearInterval(this.interplay);

that.curent(e);

document.documentElement.addEventListener(“mousemove”, that.rentcu, false);
document.documentElement.addEventListener(“mouseup”, that.retire, false);

}

videoclass.prototype.retireevent=function(){

var that=this;

if(this.etat_pause==0){

this.vivi.play();
this.interplay=setInterval(function() {that.posivi()},100);
}

document.documentElement.removeEventListener(“mousemove”, that.rentcu, false);
document.documentElement.removeEventListener(“mouseup”, that.retire, false);

}

videoclass.prototype.event_son=function(e){

e.stopPropagation();
var that=this;
e.preventDefault(); //evite la selection d’element dans le document
that.sonson(e);
document.documentElement.addEventListener(“mousemove”, that.sn, false);
document.documentElement.addEventListener(“mouseup”, that.retson, false);

}

videoclass.prototype.no_event_son=function(){
var that=this;
document.documentElement.removeEventListener(“mousemove”, that.sn, false);
document.documentElement.removeEventListener(“mouseup”, that.retson, false);

}

videoclass.prototype.sonson=function(e){ //definition du niveau de son et de la position du curseur du son

var coords_left= this.son.getBoundingClientRect().left;

var setX =e.clientX;

var distance=this.son.offsetWidth;

var valeur=(setX-coords_left);

valeur=valeur/distance;

if(valeur>1){

this.vivi.volume=1;
this.son.getElementsByTagName(‘div’)[0].style.width=distance+’px’;

}
else if(valeur1){

this.vivi.currentTime=this.vivi.duration*0.9999999;
this.defile.getElementsByTagName(‘div’)[1].style.width=distance+”px”;
}

else if(valeur<0){

this.vivi.currentTime=0;
this.defile.getElementsByTagName('div')[1].style.width=0+"px";
}

else{

this.vivi.currentTime=this.vivi.duration*valeur; //conversion par rapport a la video
this.defile.getElementsByTagName('div')[1].style.width=(distance*valeur)+"px";
}

this.tmp();

}

videoclass.prototype.posivi=function(){ //definition de la position de la barre de defilement

var valeur=(this.vivi.currentTime/this.vivi.duration).toFixed(6); //retourne une valeur compris entre 0 et 1

var distance=this.defile.offsetWidth //la distance total a parcourir de la barre

this.defile.getElementsByTagName('div')[1].style.width=(distance*valeur)+"px";
this.tmp();
}

videoclass.prototype.attente=function() {
this.progres.style.visibility='visible';
}

videoclass.prototype.saroule=function() {
this.progres.style.visibility='hidden';
}

videoclass.prototype.marchearret=function(){ // fonction marche arret pour la lecture

var elem=this.vivi;

elem.paused==true ? this.f_marche(): this.f_arret()

}

videoclass.prototype.f_marche=function(){ // fonction marche pour la lecture

var elem=this.vivi;

var lui=this.marche;

elem.play();
var that=this;
this.etat_pause=0;
this.interplay=setInterval(function() {that.posivi()},100);
lui.className='k_pause';
this.ctx_createur.vivi_courant=this
}

videoclass.prototype.f_arret=function(){ // fonction arret pour la lecture

var elem=this.vivi;

var lui=this.marche;
elem.pause();
this.etat_pause=1;
clearInterval(this.interplay);
lui.className='k_marche';
}

videoclass.prototype.mute=function(e){ // fonction mute pour le son

var lui=e.currentTarget;
var elem=this.vivi;

if (elem.muted==true) {
elem.muted=false;
lui.className='k_mute_off';
}
else{
elem.muted=true;
lui.className='k_mute_on';
}
}

videoclass.prototype.stop=function(){ // fonction pour gérer la touche stop

this.vivi.pause();
this.etat_pause=1;
clearInterval(this.interplay);
this.marche.className='k_marche';
}

videoclass.prototype.toto=function(){ //sert a deteminer si le temp sera celui ecoule ou le temp restant.
this.total==0 ? this.total=1 : this.total=0;
}

videoclass.prototype.tmp=function(){ //le timer

var dura=(this.total==0 ? this.vivi.currentTime : this.vivi.duration-this.vivi.currentTime);
var min = Math.floor(dura / 60);
if (min < 10) {
min = '0' + min;
}
var sec = Math.floor(dura % 60);
if (sec 0){

var charge=elem.buffered.end(0);
var valeur=(charge/elem.duration).toFixed(2); //retourne une valeur compris entre 0 et 1
}
this.precharge.style.width=(valeur*100)+’%’;
}

videoclass.prototype.changer_local=function(la_video,nom){ //modification du src et reload

var le=this.vivi;

if(le.paused==false){
this.marchearret();
}

var elemensource=le.getElementsByTagName(‘source’);

var extention=nom.substring(nom.lastIndexOf(“.”)).toLowerCase();

if(extention==’.webm’){

elemensource[0].setAttribute(‘src’,la_video);
elemensource[1].setAttribute(‘src’,”);
elemensource[2].setAttribute(‘src’,”);
}

if(extention==’.ogg’|| extention==’.ogv’){

elemensource[1].setAttribute(‘src’,la_video);
elemensource[0].setAttribute(‘src’,”);
elemensource[2].setAttribute(‘src’,”);
}

if(extention==’.mp4′){

elemensource[2].setAttribute(‘src’,la_video);
elemensource[0].setAttribute(‘src’,”);
elemensource[1].setAttribute(‘src’,”);
}

le.load();

this.charge(this);
}

videoclass.prototype.changer=function(la_video){ //modification du src et reload

var le=this.vivi;

if(le.paused==false){
this.marchearret();
}
var elemensource=le.getElementsByTagName(‘source’);

la_video=la_video.substr(0,la_video.lastIndexOf(“.”));

elemensource[0].setAttribute(‘src’,la_video+’.webm’);
elemensource[1].setAttribute(‘src’,la_video+’.ogv’);
elemensource[2].setAttribute(‘src’,la_video+’.mp4′);

le.load();

this.charge(this);
}

videoclass.prototype.charge=function(lui,tour){ //gestion du chargement de la video

if(arguments.length==1){
var tour=0;
}

var etat=lui.vivi.readyState;

if(tour>=15 && etat==0){
alert(‘le chargement du fichier a echoué’);
lui.ctx_createur.quit_video(lui);
return false;
}

if(etat>=2){

lui.ctx_createur.video_valid(lui);
return false;
}

tour++
setTimeout(lui.charge,200,lui,tour);
}

.v1{
cursor:pointer;
width:inherit;
height:inherit;
display:none;
}

.clasvid_total{

position:absolute;
width:inherit;
height:100px;
margin-top:-200px;
}

.conso{
position:absolute;
height:50px;
width:100%;
margin:auto;
bottom:0px;
left:-1px;

opacity:0;
border: 1px outset YELLOW;
background-image:url(‘data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QCkRXhpZgAASUkqAAgAAAAFABoBBQABAAAASgAAABsBBQABAAAAUgAAACgBAwABAAAAAgAAADEBAgARAAAAWgAAAGmHBAABAAAAbAAAAAAAAABgAAAAAQAAAGAAAAABAAAAUGFpbnQuTkVUIHYzLjUuNAAAAQCGkgIAHQAAAH4AAAAAAAAATEVBRCBUZWNobm9sb2dpZXMgSW5jLiBWMS4wMQAA/9sAQwABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEB/9sAQwEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEB/8AAEQgALgAMAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A/LuaYlppEdT+9lWQq6suS0jIMIMq5O5ScBSCuVO0KIYpFKlij/McjdNATjauOikDpgDAI7gEnNG48tZLhpNojlkcNImQ6ZkYjBj2uRu3Medqu75yxzSLchBtWJiMk5DTOWBPDFlh5JGM5AYdDnG5gChJKshnTzdjsZyQAYyxErIC6sAgHKyKpJyAyspYnFKW4haRycSnK5kEwVWJjQkqFidRycMA2A4YVXS4ilvbiOQTRsJW2gGONCjrIHEkeXZpPM2MpQhSocOWLKagvWVLhsWkk4ZY23g7B9xQQAIJAcFTkhuSSMcUAc4JljX5mmb1HmAjg9CCoz7E9ep462VuY2UMDAAc4EhUvwSOc4PJBI4HBB75rmRLOT9/PGMEIwwSB0MZHXHb1+hsxnKAumWyclZCo4YjoEA7cnAz1PPNJNNXQH//2Q==’);
background-size: 100% 100%;
-moz-transition-property: opacity;
-moz-transition-duration: 0.3s;
-moz-transition-timing-function: ease-out;
-o-transition-property: opacity;
-o-transition-duration: 0.3s;
-o-transition-timing-function: ease-out;
-webkit-transition-property: opacity;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-ms-transition-property: opacity;
-ms-transition-duration: 0.3s;
-ms-transition-timing-function: ease-out;
transition-property: opacity;
transition-duration: 0.3s;
transition-timing-function: ease-out;

}

.conso:hover{
opacity:1;
}

.defile{
height:6px;
display:block;
background-color:#cc5865;
width:90%;
margin:auto;
margin-top:5px;
background-image: url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAASCAYAAACaV7S8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuND6NzHYAAAA7SURBVBhXLczBCQBRCEPBNGujX0UFu7CQLCtehpdLICLEzBCZSVTV1c6IONydWMzsUFViee8d3U38px8xVTm7nVQ7AgAAAABJRU5ErkJggg==”);
cursor: pointer;
}

.precharge {
display: block;
height: 6px;
margin-bottom: 6px;
width: 0px;
background-image:url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAASCAYAAACaV7S8AAAABGdBTUEAALGPC/xhBQAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuND6NzHYAAAA4SURBVBhXLcfBCQBACAPBFGIXgsqpjdpsDsTPsAsRIRZ3J8zsajcijvcesWTmUVXE0t2HqhIzww/1ih5zm7+i/AAAAABJRU5ErkJggg==”);
}

.suisbar {
display: block;
height: 4px;
width: 0px;
background-image: url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAKCAYAAACXDi8zAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuND6NzHYAAADaSURBVBhXFYo9S8NgFEZvmrxpovixOEndHDqI4P8VJxGRjiJZtEm01Uaj1pZU00JL8sbfoKDH63A4PDzHmURHiCtCaATjivPzK/L1LTKPuywGXcr8gI/XQ8pMnewjNtvFjpVZh7rYw+YdqnQHaV42aYoNmnf12zafD1s0yTpST4yWHlZtR21sGig+Uk0d/qmf9Ew1ipWhhyzHDqu8RX1nqK4Nq8RjmbWQ2b1LGXssIp+5UvQ9pkM9Rpc+ea/N83nAYy9goPs2Mkj/LCA9WSM9Drk5DYkuAq40/AMN1ZikwvYxhgAAAABJRU5ErkJggg==”);
margin-top: -11px;
}

.k_marche,.k_pause {

display:block;
cursor:pointer;
background-image:url(“https://www.stickpng.com/assets/images/580b57fcd9996e24bc43c4f9.png&#8221;);
width:36px;
height:36px;
margin-top:3px;
margin-left:7%;
border-radius:18px;
}

.k_marche{

background-position:0px 0px;
}

.k_pause {

background-position:0px 36px;
}

.k_marche:hover,.k_pause:hover{
opacity:0.9;
}

.cont_son{

display:block;
position:relative;
max-width:25%;
height:16px;
margin-top:-30px;
margin-left:25%;
background-image: url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAASCAYAAACaV7S8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuND6NzHYAAAA7SURBVBhXLczBCQBRCEPBNGujX0UFu7CQLCtehpdLICLEzBCZSVTV1c6IONydWMzsUFViee8d3U38px8xVTm7nVQ7AgAAAABJRU5ErkJggg==”);
}

.son {
height: 10px;
width: 70%;
background-image: url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ0AAAAKCAYAAACuRVwtAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuND6NzHYAAAILSURBVFhH7VZtj4IwDB6Jn/07KpcgyCAC+v9/x/nd9CyXXpqm22BOMOZMGrf16dNXYFn+lcPt+2bu97tZ4wcAa7hN7jPLMiNzwT2eaz8NL7For3FotuiD/Gs8FAPX+XC+Arn8aza8JpvNxmy3W2PKqoA8P8B+v39L2e128IwsldfhoNcQz0lCsczBhrjW0vMccM17h/uiKMA0bQXW1lDX/xJTA2vtWDv5T1x4TjqO03xJrMRwvYYN2cfkF2NDcfC8iaeqKjBte4KmaT5W2raFpQTriL589XTpeYwue8LE6qf2OZTDVB6JwyEsy/IxdLaE5rGJJfpUu6mDSvk/06jQMC1RYxwInssz+bjiRR/H45GG7vfzECNLFGRNH77hSxUXHzre/FT8viGQPae3tWvoOH5ufH9vuqYuxztdzMB9uk2oqFPy5xxag/mQ8XthiJt4Q7iQXrs3TuWmO2rIB79rjp/X06kCvNy9QtDBO0uKnF35ubgJr+k1LsThOeFxjZ8oucczzj237tI+FD/n51jXOY/X2Ma+ZOCoWHOTT41PMVghDtlsidcGjQ8SrxVvjraWQ6jZuvzL2k6J0/Vw+M59Dxa+Hc0wdDAM/UOG5NL3PSwhvtgvlwu8WmSOGA/61OKic7ThmK7rAIViJQ4Xz5R+Xa9XQPHFImvDeVHHObQ6anrkwPyIi6/P5zP8AMqTAEP3zvN2AAAAAElFTkSuQmCC”);
margin-left: 25px;
margin-top: -14px;
cursor: pointer;
}

.son div {
display: inline-block;
height: 8px;
width: 100%;
background-image: url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuND6NzHYAAACRSURBVBhXDcq9DsFQGIDh72h7KK7A3124VrtEwkpiqL8aWERoIqGNhOg5Ee3O1leHZ3tUNO+jFFI0qlJoRyqIyPcnkh3a5LcW2bPD59Elv/R4b5tIGnmYWJUczNHDbqrYUCPmKrxiwR5c7Epj17oMDpKcFM+diwk06UJz3yuSsyDLkU84aJR8gmGd2cRnOq7xB8i0WGE8lhwrAAAAAElFTkSuQmCC”);
margin-bottom: 6px;
}

.k_mute_on,.k_mute_off {

background-image:url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAASCAYAAAA31qwVAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAAOcwAADnMBOWAVqQAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuND6NzHYAAAHtSURBVEhL7ZW9igIxEICNclccB9fcPZovIdhZrGtn6d8rWNqpiGAjyIJipYiCighWitY+wN7M4OSSXGQT74orTghZ3WTy+WUySaX+P18GCoWCqFQqmYecrNfr51wuF2PLZrPUq4H2+73wCXw+nxEmxgZg1PvMp7HT6VQwlA1MfecS/HA4ZBjKC2w+n8t/3+v1NKhms/lqGkOwVqslx61WK83e6XSS3/GdCrVcLoWzMdWA+gxQtIANrF6vp2ezmYRTzVWr1VhtDIZQOM4ZjBc2oGRy8vvRaCTa7bYGMxgMXnDeeDyWlsIwJDCApx7BAOqd4b3BcCIsQguzLdOYaXe3232zViwWCQjnoiV8Zlt3jPFB0A+EYSx9DwxOqpZ/fFIZlo0EQSC3En9jyARj8fV61U+6AeZl7GZZKycPgCUay8C/x+a8lTYw3kooE2+OW2mvOneSX2rl91EUiW63S1uNbTgcCkh+MjyZTJ44eqlUooTnxL8lv4znnPw+5aLT6RBIuVymhcz84pz6lXKxWCwE1iRs/X5fGuEttdWxRqOhFtgP214cj0cBByZdq9XIIJtzNmYG9bmSNptN4p0JuaZV/4fBEHS73Uojtkvc5Y5Ux1wul59f4mpALLgAJvL5fKIZF1jYTorDvcucPzXmE93lhzQYmNZcAAAAAElFTkSuQmCC”);
cursor:pointer;
max-width:18px;
height:18px;
margin_left:10px;
background-position:0px 0px;
}

.k_mute_on {

background-position:-57px 0px;
}

.k_mute_off {

background-position:0px 0px;
}

.temp {
display: inline-block;
font-size: 16px;
margin-top: -20px;
float: right;
cursor: pointer;
margin-right: 10%;
color: gray;
}

#prog {
bottom: 20px;
height: 11px;
width: 98px;
display: inline-block;
position: absolute;
margin-left: -130px;
visibility: hidden;
}
body{
background-color:#85D4E3;
}

.container2{
width: 65%;
margin:auto;
margin-top:20px;
position:relative;
box-shadow: 0px 0px 15px #854D54;
background-color:black;
/* perspective : 1000px;*/

}

.sctn{
box-shadow: 10px 10px 5px #9D8E58;
margin:auto;

background-color:SILVER;
}

//————————————————————-
// Nom Document : k_mur
// Auteur : kamel Atmani
// Objet : video incurvé http://codes-sources.commentcamarche.net/
// Création : 07.08.2015
//————————————————————-
// Mise à Jour : 17 01 2017
// Objet : amélioration des calcules
//————————————————————-
//-(*)——————

var k_mur_video={

nombre:9,
nb_hauteur:5,
angle_max:Math.PI/4,
marge:1,
bord:10,
chemin:”,

crc:[],
ctn:null,
sous_ctn:false,
inter:””,

init_video:function(that){

var conteneur=this.ctn;

this.ctx_vivi=new videoclass(false,conteneur,conteneur,conteneur,false,this);
this.ctx_vivi.changer(this.chemin+this.video_nom);

document.getElementById(“btr”).onchange=this.local.bind(this);

this.vivi=this.ctx_vivi.vivi;

this.ctx_vivi.contenant.style.zIndex=10;

},

quit_video:function(){
},

video_valid:function(){

if(this.sous_ctn){

clearTimeout(this.inter);
this.sous_ctn.parentNode.removeChild(this.sous_ctn);
this.sous_ctn=null;
this.crc.splice(0,this.crc.length);
}

this.largeur_vivi=Math.round(this.vivi.videoWidth/this.nombre);
this.hauteur_vivi=Math.round(this.vivi.videoHeight/this.nb_hauteur);

this.prepare()

},

local:function() {

var fichier = document.getElementById(‘btr’).files;

if (fichier[0].type.match(‘video.*’)) {

var nom=fichier[0].name;

var extension=nom.substr(nom.lastIndexOf(‘.’)+1).toLowerCase();

if (extension==”mp4″ || extension==”webm” || extension==”ogg”) {

if (window.URL || window.webkitURL) {

window.URL = window.URL || window.webkitURL;

this.objet_url=URL.createObjectURL(fichier[0]) ;

this.ctx_vivi.changer_local(this.objet_url,fichier[0].name);
}

else{
alert(‘URL.createObjectURL not supported’);
}
}

else{
alert(“fichier non pris en charge les fichiers reconnu sont mp4 webm et ogg “);
}
}

else{
alert(“fichier non pris en charge”);
}
},

decoupe:function(){

var dec=0;

for(var i= 0; i< this.nb_hauteur; i++){

for(var j= 0; j< this.nombre; j++){

var ctx = this.crc[dec].getContext("2d");

ctx.drawImage(this.vivi,this.largeur_vivi*j,this.hauteur_vivi*i, this.largeur_vivi, this.hauteur_vivi,0,0, this.crc[dec].width,this.crc[dec].height);

dec++;
}
}

this.inter=setTimeout(this.decoupe.bind(this),35);

},

prepare:function(sens){

var vivi = document.getElementById('vivi');

var largeur_ctn=(this.ctn.clientWidth/2)-this.bord;

//this.largeur_rectangle=(this.ctn.offsetWidth/this.nombre)-this.marge

//var rayon=(this.largeur_rectangle*(this.nombre/2))/this.angle_max

var rayon=largeur_ctn/Math.sin(this.angle_max);

this.largeur_rectangle=((rayon*this.angle_max*2)/(this.nombre))-(this.marge);

var z=rayon*Math.cos(this.angle_max);

var hauteur_rectangle=((this.vivi.videoHeight/this.vivi.videoWidth)*(this.largeur_rectangle*this.nombre))/this.nb_hauteur;

var hauteur_total=((hauteur_rectangle+this.marge)*this.nb_hauteur)-this.marge+this.bord*2;

this.ctn.style.height=hauteur_total+'px';

var sous_ctn=document.createElement('div');

this.sous_ctn=this.ctn.appendChild(sous_ctn);

this.sous_ctn.style.marginLeft=this.ctn.offsetWidth/2-this.largeur_rectangle/2+'px';

this.sous_ctn.className="sctn"

var qt_pi=((this.angle_max) / (this.nombre/2));

var translation_x=this.bord;
var profondeur_r=0;
var hauteur=this.bord;

for (var h =0;h<this.nb_hauteur; h++){

var angle=qt_pi*((this.nombre+1)/2);

for (var i =0; i< (this.nombre); i++){

var el=document.createElement('canvas');

el.style.height=hauteur_rectangle+'px';
el.style.width=this.largeur_rectangle+'px';

el.style.position='absolute';
el.style.margin='0px';
el.style.padding='0px';
el.style.border='none';
el.setAttribute("data-repere",this.crc.length);
el.onclick=que_faire;

this.crc.push(el);

angle-=qt_pi;

profondeur_r=Math.round(Math.cos(angle)*rayon)-z;

translation_x=Math.sin(angle)*(rayon+this.marge*(this.nombre-1));

var angle_degre=180 * angle / Math.PI;

el.style.transform='perspective(1000px)translateX('+-translation_x+'px)translateZ('+(-profondeur_r)+'px)rotateY('+angle_degre+'deg)translateY('+(hauteur)+'px)';

this.sous_ctn.appendChild(el);

}

angle=0;
hauteur+=hauteur_rectangle+this.marge;
}
this.ctx_vivi.marchearret();
this.decoupe(this);
}

}

function que_faire(e){

alert(e.currentTarget.getAttribute("data-repere"));

}
Proverbes

Source: Why were we Created? – SunnahOnline.com