QT bridge - Plusieurs instances de QuickTime sur un même page

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

 <script language="JavaScript" type="text/javascript"></script> 

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">  <script language="JavaScript" type="text/javascript"></script>  </td></tr> </table> </body> </html>

Dupliquez 2 fois le code d'encapsulation du fichier QuickTime et modifier 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"> <script language="JavaScript" type="text/javascript"></script>  <script language="JavaScript" type="text/javascript"></script>   <script language="JavaScript" type="text/javascript"></script>  </td></tr> </table> </body> </html>

Enregistrez votre page et testez la : cliquez ici pour l'exemple.

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 pour l'exemple.

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.

a. Utilisation d'une image

Ici pas besoin de Stamp movie, on cliquera directement sur un lien et le code javascript pilotera le lecteur, qui jouera le fichier demandé. Donc un seul lecteur, moins de ressources utilisées et contrairement à l'exemple précédent, un seul fichier audio peut être joué. Ce qui peut être un avantage pour l'utilisateur.

J'utiliserai la même image que dans l'exemple précédent. (play.gif de 180x16 que j'utilise sur mon site assezvu.com)

b. Création du lecteur

La première chose à faire est de créer un lecteur QuickTime.
Le code :

dans le header de la page n'oubliez pas de faire un lien vers le fichier javascript :
<script src="AC_QuickTime.js" language="JavaScript" type="text/javascript"></script>

Dans le body:

<div id="player"> <script language="JavaScript" type="text/javascript"></script> </div>

En gras les modifications du script : activation du pilotage via javascript et nom du lecteur. (indispensable pour pouvoir piloter le lecteur QuickTime à l'aide de Javascript). La fonction autoplay est désactivé. Le fichier audio 'silent.mp3' est un fichier de quelques secondes de silence.

b. javascript

Dans le corps de la page intégrons notre image play.gif et ajoutons un href avec le code suivant :

<a href="javascript:document.QTPlayerObj.SetResetPropertiesOnReload(false); document.QTPlayerObj.SetURL('dario.mp3'); document.QTPlayerObj.SetAutoPlay(true); document.QTPlayerObj.Play();"> <img src="play.gif" alt="" border="0"></a>

La syntaxe des instructions est toujours :
document.ObjetName.Instruction()

la première instruction 'SetResetPropertiesOnReload(false) force le lecteur QuickTime a utilisé les réglages précisés dans l'encapsulation du lecteur et non les réglages de chaque film ou les réglages par défaut de QuickTime.
La deuxième instruction 'SetURL()' précise l'adresse du fichier à jouer.
Attention le chemin est relatif au lecteur QuickTime et non à la page HTML.
La troisième instruction 'SetAutoPlay()' réactive le démarrage automatique du fichier.
La quatrième instruction 'Play()' démarre la lecture.

Voici une page illustrant cette technique : cliquez ici pour l'exemple.

c. DHTML

On peut grace à DHTML afficher le titre du fichier selectionné par exemple :

Tout d'abord ajoutons dans la page une zone ou le titre s'affichera, je la nomme 'info'':

<div id="player"> <div id="infos"></div> <script language="JavaScript" type="text/javascript"></script> </div>

Pour ne pas alourdir chaque encapsulation nous allons intégrer dans le header de la page une zone de script et y écrire deux fonctions :


                    
                    
                  <script type="text/javascript"><!--

                  function changeMovie(whichMovie,whichTitle){

document.QTPlayerObj.SetResetPropertiesOnReload(false);

document.QTPlayerObj.SetURL(whichMovie);

document.QTPlayerObj.SetAutoPlay(whichMovie);

document.QTPlayerObj.Play();



                    insertTitle(whichTitle);

                    }

                    

          function insertTitle(whichTitle){

          if (document.getElementById)

          document.getElementById('infos').innerHTML= 'currently playing: ' + whichTitle;

          }

          //-->

</script>

La première fonction accepte deux paramètres : L'url et le titre du morceau
Elle reprend les instructions javascript/QuickTime vues précédement et appelle la fonction insertTitle() qui comme son nom l'indique se charge d'afficher le titre de la pièce dans le div infos.

Grace à ces fonctions l'encapsulation des fichiers audio se résument désormais à :

<a href="javascript:changeMovie('dario.mp3','Si tu vas à Rio');"><br> <img src="play.gif" alt="" border="0"></a>

On appelle la fonction changeMovie( ) en lui passant en paramètre l'url du fichier et le titre à afficher.
Pour la chaîne du titre attention aux caractères non ASCII, dans l'exemple suivant, l'apostrophe du titre Can't explain est précédé d'un antislash afin de pas être interpreté comme un séparateur de chaîne de carctères.

<a href="javascript:changeMovie('explain.m4a','Can\'t Explain');"><br> <img src="play.gif" alt="" border="0"></a>

cliquez ici pour visualiser l'exemple.

d. Les pochettes

On peut aussi très bien utiliser un lecteur invisible et afficher une image différente pour chaque fichier audio.

On cache le lecteur :

<script language="JavaScript" type="text/javascript"><!--
 			          QT_WriteOBJECT('music/dario.mp3', '160', '16','',

		              'hidden','true','controller','true','autoplay','false',

		            'kioskmode','true','cache','false',

		            'enablejavascript','true','name','QTPlayerObj');
 		            // --></script>

En attendant la suite, je vous laisse découvrir le reste du code source de la page en espérant que cela vous donnera des idées pour présenter vos fichiers.

cliquez ici pour visualiser l'exemple.

QuickTutor

Plusieurs instances de QuickTime sur un même page

I. Utilisation d'un stamp movie

II. Un lecteur unique