Javascript Image Player

Le déplacement des continents de -150.10⁶ans à aujourd'hui.
Version utilisant des images au format svg et l'interface "expert").
Les tempêtes de 1999.
Illusion d'optique: cube virtuel.
Lascaux: la construction du Cheval chinois.
Les cycles sexuels de la femme (auteur des images: Jean-François Madre);
source: svt.ac-amiens.fr (pages disparues).
Ce player permet de réaliser des animations à partir d'une série d'image fixes; son emploi est plus souple que de passer par le format gif animé ou png animé (arrêt sur image, avance et recul, modification de la vitesse de l'animation) et tout format d'image géré par le navigateur est accepté (en particulier: GIF (déconseillé), JPEG, PNG, SVG).
Le code suivant figure dans l'en-tête du document :

<script type= "text/javascript">

//============================================================
//                >> jsImagePlayer 1.0 << 
//            for Netscape3.0+, September 1996
//============================================================
//              by (c)Martin Holecko 1996-98
//           and et netera s.r.o. (www.etnetera.cz)
//             Praha, Czech Republic, Europe
//
// feel free to copy and use as long as the credits are given
//          by having this header in the code
//
//             contact: martin@etnetera.cz
//          http://sgi.felk.cvut.cz/~xholecko
//  
//
//============================================================
// Thanx to Karel & Martin for beta testing and suggestions!
//============================================================

// changes made by Michel Racine 2001-2012
// http://didac-tic.fr

// DESCRIPTION: preloads number of images named in format 
//   "imagename#.ext" (where "#" stands for number and "ext"
//   for file extension of given filetype (gif, jpg, ...))
//   into cache and then provides usual movie player controls 
//   for managing these images (i.e. frames). A picture 
//   (loading.gif) is displayed while loading the movie.
//   To make it work just set up the variables below.
//   An image "loading.gif" is expected in the directory
//   where the images are located (it asks user to wait while
//   the animation is being downloaded).
//   Enjoy! BASTaRT. (it's spelled with a "T" ! :) 
//  KNOWN BUG:  when page is located on a WWW Server that
//   cannot handle the POST form submit method, pressing Enter
//   after changing the frame number in the little input field
//   causes the page to reload and an alert window to appear.
//   This can be avoided by clicking with the mouse somewhere 
//   outside the input field rather than hitting the Enter to
//   jump to the desired frame.
//
// no need to change anything in the code
// appearance defined in jplayer.css

// ----------------------------------- could be redefined in the page
var theImages = new Array();
var normal_delay = 400;  
var delay = normal_delay;  //delay between frames in 1/100 seconds
var delay_step = 10;
var delay_max = 1000;
var delay_min = 10; 
var timeID = null;
var status = 0;            // 0-stopped, 1-playing
var play_mode = 0;         // 0-normal, 1-loop, 2-swing
var size_valid = 0;
loading="loading.gif";
// ----------------------------------- must be redefined in the page
var path_name = "";  // the base path of the image set terminated with /
var image_name = "";  // the name of the image set without the numbers
var image_type = "";  // "gif" or "jpg" or whatever your browser can display
var first_image = 0;     // first image number
var last_image = 0;     //last image number
var current_image= 0;
var animation_height = 0; // height of the images in the animation
var animation_width = 0; // width of the images in the animation
// --------------------------------------------------------------------

function animate_fwd() {
// displays image depending on the play mode in forward direction

   current_image++;
   if(current_image > last_image) { 
      if (play_mode == 0) { //NORMAL
         current_image = last_image; 
         status=0;
         return;
      };                           
      if (play_mode == 1)  {
         current_image = first_image; //LOOP
      };
      if (play_mode == 2) {
         current_image = last_image; 
         animate_rev();
         return; 
      };
   };                             
   document.animation.src = theImages[current_image].src;
   document.control_form.frame_nr.value = current_image;
   timeID = setTimeout("animate_fwd()", delay);
}

function animate_rev() {
// displays image depending on the play mode in reverse direction

   current_image--;
   if(current_image < first_image) { 
      if (play_mode == 0) {
         current_image = first_image; 
         status=0;
         return;
      };                           //NORMAL
      if (play_mode == 1) {
         current_image = last_image; //LOOP
      };
      if (play_mode == 2) {
         current_image = first_image; 
         animate_fwd();
         return; 
      };
   };                             
   document.animation.src = theImages[current_image].src;
   document.control_form.frame_nr.value = current_image;
   timeID = setTimeout("animate_rev()", delay);
}

function change_speed(dv) {
// changes playing speed by adding to or substracting from the delay between frames

   delay+=dv;
   if(delay > delay_max) delay = delay_max;
   if(delay < delay_min) delay = delay_min;
	document.control_form.delai.value = delay;
}

function stop() {
// stop the movie

   if (status == 1) clearTimeout (timeID);
   status = 0;
}

function fwd() {
// play forward

   stop();
   status = 1;
   animate_fwd();
}

function gotoimage(number) {
// jumps to a given image number

   stop();
   if (number > last_image) number = last_image;
   if (number < first_image) number = first_image;
   current_image = number;
   document.animation.src = theImages[current_image].src;
   document.control_form.frame_nr.value = current_image;
}

function rev() {
// play reverse

   stop();
   status = 1;
   animate_rev();
}

function change_mode(mode) {
// changes play mode (normal, loop, swing)

   play_mode = mode;
   document.control_form.play_mode_selection.selectedIndex = mode;
}

function launch(how) {
// sets everything once the whole page and the images are loaded : onLoad handler in <body> (forward, reverse, loop_forward, loop_reverse, swing)
   stop();
   switch(how) {
     case 'forward': {
       gotoimage(first_image);
       change_mode(0);
       status = 1;
       animate_fwd();
       return;
       }
     case 'reverse' : {
       gotoimage(last_image);
       change_mode(0);
       status = 1;
       animate_rev();
       return;
       }
     case 'loop_forward': {
       gotoimage(first_image);
       change_mode(1);
       status = 1;
       animate_fwd();
       return;
       }
     case 'loop_reverse': {
       gotoimage(last_image);
       change_mode(1);
       status = 1;
       animate_rev();
       return;
       }
     case 'swing': {
       gotoimage(first_image);
       change_mode(2);
       status = 1;
       animate_fwd();
       return;
       }
     default : gotoimage(first_image);
   }
}

function animate() {
// writes the interface into the code where you want it

   var loading_image= path_name + "loading.gif";
   document.write('<img name="animation" src="', loading_image, '" height=', animation_height, ' width=', animation_width, '" alt="iPlayer"><br />');
   document.write('<form method="POST" name="control_form"><br />');
document.write('<table cellpadding="4" cellspacing="0" align="center"><tr><td class= "jplayer" align="center">');
   document.write('<a href= "javascript: gotoimage(first_image);" class="jplayer" title="première image"> << </a> ');
   document.write('<a href= "javascript: gotoimage(--current_image);" class= "jplayer"> -1 </a> ');
   document.write('<a href= "javascript: rev();" class= "jplayer"> < </a> ');
   document.write('<a href= "javascript: stop();" class= "jplayer"> [ ] </a> ');
   document.write('<a href= "javascript: fwd();" class= "jplayer"> > </a> ');
   document.write('<a href= "javascript: gotoimage(++current_image);" class="jplayer"> +1 </a> ');
   document.write('<a href= "javascript: gotoimage(last_image);" class="jplayer" title="dernière image"> >> </a> ');
   document.write('</td></tr>');
   document.write('<tr><td class= "jplayer">');
   document.write('<select name= "play_mode_selection" onChange= "play_mode= this.selectedIndex;">');
   document.write('<option selected value= "0">une fois');
   document.write('<option value= "1">en boucle');
   document.write('<option value= "2">va et vient');
   document.write('</select> ');
   document.write('image <input type= "text" name= "frame_nr" value="0" size="4"');
   document.write('onFocus="this.select()" onChange="gotoimage(this.value);"> ');
   document.write('délai : <a href="javascript: change_speed(delay_step);" class="jplayer"> + </a>');
   document.write('<input type="text" name= "delai" size="5" value=', delay, ' onFocus="this.select();" onChange="change_speed(this.value-delay)">');
   document.write('<a href="javascript: change_speed(-delay_step);" class="jplayer"> - </a></div>');
   document.write('</td></tr></table>');
   document.write('</form>');

// preload the images 
for (var i = first_image; i <= last_image; i++) {
   theImages[i].src = path_name + image_name + i + "." + image_type;
   //theImages[i].onerror = alert("\nError loading ",image_name,i,image_type,"!");
   //theImages[i].onabort = alert("\nLoading of ",image_name,i,image_type," aborted!");
};

}

function simple() {
// writes the interface into the code where you want it
var loading_image= path_name + loading;
document.write('<div class= "jplayer">');
document.write('<img name="animation" src="', loading_image, '" height=', animation_height, ' width=', animation_width, '" alt="iPlayer"><br />');
document.write('<form method="POST" name="control_form"><br />');
document.write('<input type="hidden" name= "play_mode_selection" value=',play_mode,'>');
document.write('<input type="hidden" name= "delai" value=',delay,'>');
document.write(' image: <input type= "text" class="transparent" name= "frame_nr" value="0" size="4" onFocus="this.select()" onChange="gotoimage(this.value);">');
document.write('<div style="text-align:center;">');
document.write('<a href= "javascript: rev();" > < </a> ');
document.write('<a href= "javascript: stop();" > ‖ </a> ');
document.write('<a href= "javascript: fwd();" > > </a> ');
document.write('</div>');
document.write('</form>');
document.write('</div>');

// preload the images 
for (var i = first_image; i <= last_image; i++) {
	theImages[i].src = path_name + image_name + i + "." + image_type;
	   //theImages[i].onerror = alert("\nError loading ",image_name,i,image_type,"!");
	   //theImages[i].onabort = alert("\nLoading of ",image_name,i,image_type," aborted!");
	};
}
</script>
Le code suivant figure dans le corps du document :

Références

Javascript Image Player d'après Martin Holecko
Adresse de cette page: http://www.didac-tic.fr/web/javascript/iplayer/index.php