Pas facile d'afficher plusieurs films QuickTime sur la même page HTML !
Il faut éviter que tous les fichiers se chargent à l'ouverture de la page ni qu'ils démarrent tous ensemble, etc.

D'autre part de nombreuses instances du plug-in peuvent avoir une influence néfaste sur les performances du navigateur.

Dans ce didacticiel je vais vous décrire plusieurs solutions vous permettant de présenter plusieurs fichiers sur une même page à l'aide du Plug-in QuickTime.
Comme d'habitude en informatique plusieurs solutions sont possibles :
Dans tous les cas il va falloir exécuter plusieurs opérations pour arriver à nos fins.

a. Création d'un STAMP movie.

Créez une image à l'aide de votre logiciel graphique préféré.

Sachant que cette image sera remplacée par le contrôleur de QuickTime, pour éviter les changements de mise en page dans votre page HTML, la hauteur de l'image devra être de 16 pixels. La largeur importe peu.
Faites en sorte de créer une image incitant l'utilisateur à cliquer dessus.
Un message du genre : Click me to play , à incorporer dans l'image est indispensable.

Moi j'ai créé cette image play.gif de 180x16 que j'utilise sur mon site assezvu.com

Enregistrez cette image au format gif, jpeg ou png. (si vous utilisez une image jpeg, n'utilisez pas l'option d'affichage progressif)

Ouvrez cette image à l'aide de QuickTime Player pro puis enregistrez comme séquence autonome ce nouveau fichier QuickTime sous le nom de play.mov.

b. Création de la page html et du code d'encapsulation.

Ouvrez l'application PAGEot (si vous ne l'avez pas : téléchargez la en cliquant ici)..
L'utilisation de PAGEot n'est pas obligatoire mais fortement conseillé par l'auteur, une erreur dans un script est vite arrivée et la moindre faute de syntaxe peut empêcher le bon déroulement d'une encapsulation.

Importez ou faites un glisser-déposer de votre fichier play.mov dans PAGEot

Entrez sur la première page de l'application les réglages comme sur l'image de gauche ci-dessous.

On désactive :
controller
et AutoPlay

(L'option showLogo peut être activée ou désactivée, c'est juste une option cosmétique)

Cliquez sur l'onglet Advanced , validez HREF, l'utilisateur pourra grâce à cette option cliquer sur le lien pour lancer la lecture du fichier audio cible.

Entrez le chemin relatif et le nom (pathname) du fichier audio cible.
Le chemin est relatif au fichier play.mov.
Ici : music/dario.mp3

La page web et le fichier play.mov sont au même niveau dans le dossier et mes fichiers audio sont dans un sous-dossier dénommé music.

À l'aide du menu déroulant, choisissez pour Target: l'option 'myself'

Validez les réglages Extend comme ci-contre, soit :
Autoplay : le fichier audio démarrera automatiquemernt
Controller : le contrôleur remplacera l'image

Ouvrez la fenêtre "Code & Options" et vérifiez que l'option : External javascript est bien validé.

Choisissez vos couleurs de fond de page et de texte.

Allez dans le menu File et choisissez l'item Export as html...

Créez un nouveau dossier ou choisissez un dossier vide, enregistrez la page HTML sous le nom de stamp.html.

Votre dossier devrait comporter:
la page html et le fichier javascript AC_QuickTime.js

Ajouter dans ce dossier le fichier QuickTime play.mov et créez aussi un dossier music dans lequel vous placerez vos fichiers audio.
Dans mon cas j'ajoute les fichiers audio suivants :

dario.mp3
explain.m4a
smileplease.m4a

Testez votre page avec le navigateur de votre choix, cliquez sur le film play.mov et ... miracle ! il est remplacé par le fichier audio cible et la musique démarre. cliquez ici pour pour l'exemple

Nous allons opérer une petite modification pour supprimer le menu permettant la sauvegarde du fichier audio :
Ajoutez comme indiquée ci-dessous à l'endroit indiquée : kioskmode=true

<!-- Start of movie embed -->
<script language="JavaScript" type="text/javascript"><!--
QT_WriteOBJECT('play.mov', '180', '16', '',' controller', 'false','autoplay', 'false', 'showlogo', 'true', 'cache', 'false', 'href',' <music/dario.mp3> E <autoplay=true controller=true loop=false kioskmode=true>', 'target', 'myself');
// --></script>
<!-- End of movie embed -->

Enregistrez votre page : cliquez ici pour pour l'exemple

c. Ajout d'autre fichiers et amélioration de notre page

C'est un bon début mais l'objectif est d'encapsuler plusieurs fichiers QuickTime sur une même page.
Ouvrez votre page HTML , sélectionnez et copiez la partie d'encapsulation du code QuickTime (en violet).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="generator" content="Pageot">
<title>Made with Pageot - play</title>
<meta name="keywords" content="QuickTime">
<meta name="description" content="QuickTime">
<meta name="MSSmartTagsPreventParsing" content="TRUE">
<script src="AC_QuickTime.js" language="JavaScript" type="text/javascript"></script>
</head>
<body bgcolor="#FFFFFF" text ="#000000" link="#cc9966" vlink="#cc9966">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr><td valign="middle" align="center">
<!-- Start of movie embed -->
<script language="JavaScript" type="text/javascript"><!--
QT_WriteOBJECT('play.mov', '180', '16', '', 'controller', 'false', 'autoplay', 'false', 'showlogo', 'true', 'cache', 'false', 'href', '<music/dario.mp3> E<autoplay=true controller=true loop=false kioskmode=true>', 'target', 'myself');
// --></script>
<!-- End of movie embed -->
</td></tr>
</table>
</body>
</html>

Dupliquez 2 fois le code d'encapsulation du fichier QuickTime et modifiez le nom des fichiers cibles (indiqué en gras).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="generator" content="Pageot">
<title>Made with Pageot - play</title>
<meta name="keywords" content="QuickTime">
<meta name="description" content="QuickTime">
<meta name="MSSmartTagsPreventParsing" content="TRUE">
<script src="AC_QuickTime.js" language="JavaScript" type="text/javascript"></script>
</head>
<body bgcolor="#FFFFFF" text ="#000000" link="#cc9966" vlink="#cc9966">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr><td valign="middle" align="center">
<!-- Start of movie embed -->
<script language="JavaScript" type="text/javascript"><!--
QT_WriteOBJECT('play.mov', '180', '16', '', 'controller', 'false','autoplay', 'false', 'showlogo', 'true', 'cache', 'false', 'href','<music/dario.mp3> E<autoplay=true controller=true loop=false kioskmode=true>', 'target', 'myself');
// --></script>
<!-- End of movie embed -->
<!-- Start of movie embed -->
<script language="JavaScript" type="text/javascript"><!--
QT_WriteOBJECT('play.mov', '180', '16', '', 'controller', 'false', 'autoplay', 'false','showlogo', 'true', 'cache', 'false', 'href','<music/explain.m4a> E<autoplay=true controller=true loop=false kioskmode=true>', 'target', 'myself');
// --></script>
<!-- End of movie embed -->
<!-- Start of movie embed -->
<script language="JavaScript" type="text/javascript"><!--
QT_WriteOBJECT('play.mov', '180', '16', '', 'controller', 'false', 'autoplay', 'false', 'showlogo', 'true', 'cache', 'false', 'href','<music/smileplease.m4a> E<autoplay=true controller=true loop=false kioskmode=true>', 'target', 'myself');
// --></script>
<!-- End of movie embed -->
</td></tr>
</table>
</body>
</html>

Enregistrez votre page et testez là.

La mise en page laisse un peu à désirer mais l'essentiel est là : les fichiers audio sont chargés à la demande de l'utilisateur ...

Une dose de CSS (mise en page) et voici un exemple plus présentable : cliquez ici.

Si vous désirez afficher des vidéos plutôt que des fichiers audio, la démarche est la même.
Les seules modifications concerneront la taille de l'image :
Choississez une image de même dimensions que le film cible et ajoutez 16 pixels à la hauteur de l'image si vous désirez afficher le contrôleur.

À suivre