Base minimum pour adapter en vidéo interactive une présentation powerpoint ou libre office

Director: Abadie joris (born Juillet 17, 1990)
Homme et Temps joris Abadie


Code d'un défilement sur une seule vidéo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Base minimum adaptateur presentation powerpoint</title>

<script>


	var persistanceretinienne = 5;
	var nbimg = null;
	var nbboucle = 70;
    	var mua1 = 0;
	var vitesseDuVent = 2020;
	var ouioui;
	var joueur = 'fleur';
	var joueur1;
	var joueur2;
	var version = 1;
	var joueur3 = 'bisfleur';
	var joueur4;
	var joueur5 = 'bis';
	var joueur7;
	var joueur8;




function acelereLeVent(){

  if(vitesseDuVent>123){
  clearInterval(nbimg);
vitesseDuVent = vitesseDuVent -40;
nbboucle = 70;
lancertout();
  }

}

function diminuLeVent(){
  clearInterval(nbimg);
vitesseDuVent = vitesseDuVent + 300;
nbboucle = 70;
lancertout();
}

function decoupe2(joueur4){//1
  document.getElementById(joueur4).className = 'cachemoi';
}//3

function decoupe1(joueur2){//1
  document.getElementById(joueur2).className = 'cachemoi';
}//3

function decoupe3(joueur1){//1
  document.getElementById(joueur1).className = 'sortdutrou';
}//3

function restecalme(joueur1,joueur8,ouioui){//1



  if(version == 1){//2

for (var placier = 1; placier < ouioui; placier++) {//3


	joueur2 = joueur + placier;
  document.getElementById(joueur2).className = 'cachemoi';

}//3

for (var placier = ouioui+1; placier < 7; placier++) {//3


	joueur2 = joueur + placier;
  document.getElementById(joueur2).className = 'cachemoi';

}//3

for (var placier = 1; placier < ouioui; placier++) {//3


	joueur4 = joueur3 + placier;
  document.getElementById(joueur4).className = 'cachemoi';

}//3

for (var placier = ouioui+1; placier < 7; placier++) {//3

	joueur4 = joueur3 + placier;
  document.getElementById(joueur4).className = 'cachemoi';


}//3


  document.getElementById(joueur1).className = 'sortdutrou';
  document.getElementById(joueur8).className = 'cachemoi';

}//2



  if(version == 2){//2



for (var placier = 1; placier < ouioui; placier++) {//3


	joueur4 = joueur3 + placier;
  document.getElementById(joueur4).className = 'cachemoi';

}//3

for (var placier = ouioui+1; placier < 7; placier++) {//3

	joueur4 = joueur3 + placier;
  document.getElementById(joueur4).className = 'cachemoi';


}//3

for (var placier = 1; placier < ouioui; placier++) {//3


	joueur2 = joueur + placier;
  document.getElementById(joueur2).className = 'cachemoi';

}//3

for (var placier = ouioui+1; placier < 7; placier++) {//3


	joueur2 = joueur + placier;
  document.getElementById(joueur2).className = 'cachemoi';

}//3


  document.getElementById(joueur8).className = 'sortdutrou';

  document.getElementById(joueur1).className = 'cachemoi';


}

}



function change(persistanceretinienne)
{

  switch (persistanceretinienne) {

    	case 0:
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
	joueur8 = joueur3 + ouioui;
	restecalme(joueur1,joueur8,ouioui);
JoueLeSon6();
   	break;
    	case 1:
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
	joueur8 = joueur3 + ouioui;
	restecalme(joueur1,joueur8,ouioui);
JoueLeSon5();
   	break;
    	case 2:
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
	joueur8 = joueur3 + ouioui;
	restecalme(joueur1,joueur8,ouioui);
JoueLeSon4();
   	break;
    	case 3:
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
	joueur8 = joueur3 + ouioui;
	restecalme(joueur1,joueur8,ouioui);
JoueLeSon3();
   	break;
    	case 4:
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
	joueur8 = joueur3 + ouioui;
	restecalme(joueur1,joueur8,ouioui);
JoueLeSon2();
   	break;
    	case 5:
	ouioui = persistanceretinienne + 1;
	joueur1 = joueur + ouioui;
	joueur8 = joueur3 + ouioui;
	restecalme(joueur1,joueur8,ouioui);
JoueLeSon1();
   	break;

  }

}



function durermax()
{
  clearInterval(nbimg);
/*   lancerChange4();	*/
}
function seance()
{



change(persistanceretinienne);
  persistanceretinienne--;
if ((nbboucle>1)&&(persistanceretinienne<0))
{ 
/* selection du nombre d'image*/

persistanceretinienne = 5;
nbboucle = nbboucle-1;
}


}
function lancertout()
{
  nbimg = setInterval(seance, vitesseDuVent);
  setTimeout(durermax, persistanceretinienne * 81000);
change(persistanceretinienne)
}	



  function JoueLeSon1(){
  var multib1 = document.getElementById("1awav");
  multib1.play();
  }
  function JoueLeSon2(){
  var multic1 = document.getElementById("2awav");
  multic1.play();
  }
  function JoueLeSon3(){
  var multic1 = document.getElementById("3awav");
  multic1.play();
  }
  function JoueLeSon4(){
  var multic1 = document.getElementById("4awav");
  multic1.play();
  }
  function JoueLeSon5(){
  var multic1 = document.getElementById("5awav");
  multic1.play();
  }
  function JoueLeSon6(){
  var multic1 = document.getElementById("6awav");
  multic1.play();
  }


function action1Press(){
	version = version + 1;
	if(version>2){
        version = 1;
  	}
  }


</script>
<style>

div.img {
    margin: 1%;
    border: 0.5px solid #bbbccc;
    float: left;
    width: 180px;
}

div.img:hover {
    border: 1%; solid #bbb555;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 2%;
    text-align: center;
    color:blue;
}



body {
  position: absolute;
  margin-left: 2px;
  margin-top: 5px;
}
.indique{cursor:pointer;}
.cachemoi {display: none;}
.sortdutrou {display: inline;}
.volumelogo {position:absolute; margin-left:85%; margin-top:3%; width:9%; height:9%;}
.sousligne{text-decoration: underline;}
.coucheletexte{ -webkit-transform: perspective( 50px ) rotateX( -20deg ); 
    -moz-transform: perspective( 50px ) rotateX( -20deg ); 
    -o-transform: perspective( 50px ) rotateX( -20deg );
    transform: perspective( 50px ) rotateX( -20deg );}



/*******/

.menu
{
 background-color:blue;

    margin: 0;
font-weight: bold;
font-size: 15px;
color: #fff;
text-align:center;
}
.menu ul
{
    height: 23px;
    margin: 0;
font-weight: bold;
font-size: 15px;
color: #fff;
text-align:center;
}
.menu li
{
	display: inline;
	list-style: none;
}


.menu a
{
color: #fff;
   text-decoration: none;
}
}
</style>

<style>
@media (max-width: 480px) {
    * {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }


    


    img,
    table,
    td,
    blockquote,
    code,
    pre,
    textarea,
    input,
    iframe,
    object,
    embed,
    video {
        max-width: 100%;
    }
    


    img {
        height: auto;
    }
    


    textarea,
    table,
    td,
    th,
    code,
    pre,
    samp {
        -webkit-hyphens: auto; 
        -moz-hyphens: auto;
        hyphens: auto;
        word-wrap: break-word; 
    }
    
    code,
    pre,
    samp {
        white-space: pre-wrap; 
    }
    
   

    element1,
    element2 {
        float: none;
        width: auto;
    }
    
    

    .hide_mobile {
        display: none !important;
    }
    
    

    body:before {
        content: "Version mobile";
        display: block;
        text-align: center;
        font-style: italic;
        color: #777;
    }

    }

</style>
</head>

<body onload="javascript:lancertout();">



<div><audio id="1awav" src="http://www.letime.net/PianoBaul/a1.wav" preload></audio></div>

<div><audio id="2awav" src="http://www.letime.net/PianoBaul/e1.wav" preload></audio></div>

<div><audio id="3awav" src="http://www.letime.net/PianoBaul/t1.wav" preload></audio></div>

<div><audio id="4awav" src="http://www.letime.net/PianoBaul/u1.wav" preload></audio></div>

<div><audio id="5awav" src="http://www.letime.net/PianoBaul/o1.wav" preload></audio></div>

<div><audio id="6awav" src="http://www.letime.net/PianoBaul/q1.wav" preload></audio></div>




 <div id="fleur1" class="cachemoi" >

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/sanglier.jpg">
    <img src="http://www.letime.net/epistemologie/sanglier.jpg" alt="sanglier" width="33%" height="auto">
  </a>
  <div class="desc">sanglier</div>
</div>

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/soie.jpg">
    <img src="http://www.letime.net/epistemologie/soie.jpg" alt="soie" width="33%" height="auto">
  </a>
  <div class="desc">soie</div>
</div>

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/sorgho.jpg">
    <img src="http://www.letime.net/epistemologie/sorgho.jpg" alt="sorgho" width="33%" height="auto">
  </a>
  <div class="desc">sorgho</div>
</div>

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/usine a vapeur.jpg">
    <img src="http://www.letime.net/epistemologie/usine a vapeur.jpg" alt="usine a vapeur" width="33%" height="auto">
  </a>
  <div class="desc">usine a vapeur</div>
</div>

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/vendanges.jpg">
    <img src="http://www.letime.net/epistemologie/vendanges.jpg" alt="vendanges" width="33%" height="auto">
  </a>
  <div class="desc">vendanges</div>
</div>
<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/vers.jpg">
    <img src="http://www.letime.net/epistemologie/vers.jpg" alt="vers" width="33%" height="auto">
  </a>
  <div class="desc">vers</div>
</div>
<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/volaille.jpg">
    <img src="http://www.letime.net/epistemologie/volaille.jpg" alt="volaille" width="33%" height="auto">
  </a>
  <div class="desc">volaille</div>
</div>

 </div>

<!--bis-->
 <div id="bisfleur1" class="cachemoi" >

 </div>
<!--fin bis-->


 <div id="fleur2" class="cachemoi" >

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/manoir.jpg">
    <img src="http://www.letime.net/epistemologie/manoir.jpg" alt="manoir" width="33%" height="auto">
  </a>
  <div class="desc">manoir</div>
</div>

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/navire.jpg">
    <img src="http://www.letime.net/epistemologie/navire.jpg" alt="navire" width="33%" height="auto">
  </a>
  <div class="desc">navire</div>
</div>

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/oleagineuses.jpg">
    <img src="http://www.letime.net/epistemologie/oleagineuses.jpg" alt="oleagineuses" width="33%" height="auto">
  </a>
  <div class="desc">oleagineuses</div>
</div>

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/plante textile.jpg">
    <img src="http://www.letime.net/epistemologie/plante textile.jpg" alt="plante textile" width="33%" height="auto">
  </a>
  <div class="desc">plante textile</div>
</div>

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/pont aux changes.jpg">
    <img src="http://www.letime.net/epistemologie/pont aux changes.jpg" alt="pont aux changes" width="33%" height="auto">
  </a>
  <div class="desc">pont aux changes</div>
</div>
<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/porcherie.jpg">
    <img src="http://www.letime.net/epistemologie/porcherie.jpg" alt="porcherie" width="33%" height="auto">
  </a>
  <div class="desc">porcherie</div>
</div>
<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/roses.jpg">
    <img src="http://www.letime.net/epistemologie/roses.jpg" alt="roses" width="33%" height="auto">
  </a>
  <div class="desc">roses</div>
</div>


 </div>

<!--bis-->
 <div id="bisfleur2" class="cachemoi" >



</div>


 </div>
<!--fin bis-->

 <div id="fleur3" class="cachemoi">
<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/ivraie.jpg">
    <img src="http://www.letime.net/epistemologie/ivraie.jpg" alt="ivraie" width="33%" height="auto">
  </a>
  <div class="desc">ivraie</div>
</div>

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/jument.jpg">
    <img src="http://www.letime.net/epistemologie/jument.jpg" alt="jument" width="33%" height="auto">
  </a>
  <div class="desc">jument</div>
</div>

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/laboure.jpg">
    <img src="http://www.letime.net/epistemologie/laboure.jpg" alt="laboure" width="33%" height="auto">
  </a>
  <div class="desc">laboure</div>
</div>

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/la moisson.jpg">
    <img src="http://www.letime.net/epistemologie/la moisson.jpg" alt="la moisson" width="33%" height="auto">
  </a>
  <div class="desc">la moisson</div>
</div>

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/lapins.jpg">
    <img src="http://www.letime.net/epistemologie/lapins.jpg" alt="lapins" width="33%" height="auto">
  </a>
  <div class="desc">lapins</div>
</div>
<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/les alpes.jpg">
    <img src="http://www.letime.net/epistemologie/les alpes.jpg" alt="les alpes" width="33%" height="auto">
  </a>
  <div class="desc">les alpes</div>
</div>
<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/locomotive.jpg">
    <img src="http://www.letime.net/epistemologie/locomotive.jpg" alt="locomotive" width="33%" height="auto">
  </a>
  <div class="desc">locomotive</div>
</div>

 </div>

<!--bis-->
 <div id="bisfleur3" class="cachemoi" >

 </div>
<!--fin bis-->

 <div id="fleur4" class="cachemoi">

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/drapeaux.jpg">
    <img src="http://www.letime.net/epistemologie/drapeaux.jpg" alt="drapeaux" width="33%" height="auto">
  </a>
  <div class="desc">drapeaux</div>
</div>

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/etable.jpg">
    <img src="http://www.letime.net/epistemologie/etable.jpg" alt="etable" width="33%" height="auto">
  </a>
  <div class="desc">etable</div>
</div>

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/foire.jpg">
    <img src="http://www.letime.net/epistemologie/foire.jpg" alt="foire" width="33%" height="auto">
  </a>
  <div class="desc">foire</div>
</div>

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/fontaine.jpg">
    <img src="http://www.letime.net/epistemologie/fontaine.jpg" alt="fontaine" width="33%" height="auto">
  </a>
  <div class="desc">fontaine</div>
</div>

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/guadeloupe.jpg">
    <img src="http://www.letime.net/epistemologie/guadeloupe.jpg" alt="guadeloupe" width="33%" height="auto">
  </a>
  <div class="desc">guadeloupe</div>
</div>
<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/insectes.jpg">
    <img src="http://www.letime.net/epistemologie/insectes.jpg" alt="insectes" width="33%" height="auto">
  </a>
  <div class="desc">insectes</div>
</div>
<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/instruction.jpg">
    <img src="http://www.letime.net/epistemologie/instruction.jpg" alt="instruction" width="33%" height="auto">
  </a>
  <div class="desc">instruction</div>
</div>

 </div>

<!--bis-->
 <div id="bisfleur4" class="cachemoi" >




 </div>
<!--fin bis-->


 <div id="fleur5" class="cachemoi">

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/cane.jpg">
    <img src="http://www.letime.net/epistemologie/cane.jpg" alt="8" width="33%" height="auto">
  </a>
  <div class="desc">cane</div>
</div>

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/cereales.jpg">
    <img src="http://www.letime.net/epistemologie/cereales.jpg" alt="9" width="33%" height="auto">
  </a>
  <div class="desc">cereales</div>
</div>

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/cheval.jpg">
    <img src="http://www.letime.net/epistemologie/cheval.jpg" alt="10" width="33%" height="auto">
  </a>
  <div class="desc">cheval</div>
</div>

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/chien.jpg">
    <img src="http://www.letime.net/epistemologie/chien.jpg" alt="11" width="33%" height="auto">
  </a>
  <div class="desc">chien</div>
</div>

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/cochonchine.jpg">
    <img src="http://www.letime.net/epistemologie/cochonchine.jpg" alt="12" width="33%" height="auto">
  </a>
  <div class="desc">cochonchine</div>
</div>
<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/coq.jpg">
    <img src="http://www.letime.net/epistemologie/coq.jpg" alt="13" width="33%" height="auto">
  </a>
  <div class="desc">coq</div>
</div>
<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/coq 2.jpg">
    <img src="http://www.letime.net/epistemologie/coq 2.jpg" alt="14" width="33%" height="auto">
  </a>
  <div class="desc">coq2</div>
</div>

 </div>

<!--bis-->
 <div id="bisfleur5" class="cachemoi" >



 </div>
<!--fin bis-->


 <div id="fleur6" class="cachemoi" >

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/ane-charge.jpg">
    <img src="http://www.letime.net/epistemologie/ane-charge.jpg" alt="1" width="33%" height="auto">
  </a>
  <div class="desc">ane-charge</div>
</div>

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/anes.jpg">
    <img src="http://www.letime.net/epistemologie/anes.jpg" alt="2" width="33%" height="auto">
  </a>
  <div class="desc">anes</div>
</div>

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/autruche.jpg">
    <img src="http://www.letime.net/epistemologie/autruche.jpg" alt="3" width="33%" height="auto">
  </a>
  <div class="desc">autruche</div>
</div>

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/bateau.jpg">
    <img src="http://www.letime.net/epistemologie/bateau.jpg" alt="4" width="33%" height="auto">
  </a>
  <div class="desc">bateau</div>
</div>

<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/belier.jpg">
    <img src="http://www.letime.net/epistemologie/belier.jpg" alt="5" width="33%" height="auto">
  </a>
  <div class="desc">belier</div>
</div>
<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/boeuf.jpg">
    <img src="http://www.letime.net/epistemologie/boeuf.jpg" alt="6" width="33%" height="auto">
  </a>
  <div class="desc">boeuf</div>
</div>
<div class="img">
  <a target="_blank" href="http://www.letime.net/epistemologie/cafeier.jpg">
    <img src="http://www.letime.net/epistemologie/cafeier.jpg" alt="7" width="33%" height="auto">
  </a>
  <div class="desc">cafeier</div>
</div>




</div>
<!--bis-->
 <div id="bisfleur6" class="cachemoi" >

 </div>
<!--fin bis-->

</body>

</html>