Didacticiel - PAGEot
Généralités
Pour encapsuler un film QuickTime sur une page Web :
- Faites un glisser-déposer de votre film sur l'icone de l'application PAGEot ou sur la fenêtre de PAGEot.
Vous pouvez aussi par le menu 'File' de PAGEot sélectionner l'item Open movie... et dans le sélecteur de fichier choisir le fichier QuickTime de votre choix.
Vous pouvez aussi bien évidemment entrer directement le nom ou/et l'url de votre film dans le champ 'Main Movie'. - Tous vos fichiers doivent être dans le même dossier, il faut savoir que les adresses relatives sont relatives au film Main Movie et non à votre page html.
Donc le plus simple est de placer tous les éléments dans le même dossier. - Les icones brisées :
Si votre navigateur affiche l'icone brisée du plug-in QuickTime, la plupart du temps cette erreur provient d'une erreur d'adresse de fichier ou d'un film qui n'est pas optimisé pour internet.
Vous pouvez télécharger l'application Lillipot pour optimiser vos films pour internet.
- Respectez les règles de base du WEB dans la dénomination de vos fichiers et servez vous de la fonction 'enregistrez sous ...' de QuickTime Player pro en validant l'option 'démarrage rapide' pour produire des films prêt pour internet.
Vos fichiers QuickTime doivent aussi être compressés avec des codecs préconisés pour le Web (Sorenson, mpeg4, H264).
Une simple vidéo
Si vous ouvrez le film via le sélecteur de fichiers ou à l'aide d'un glisser-déposer, PAGEot récupère les dimensions de votre film et dans le cas d'un fichier vidéo traditionnel, valide 'CONTROLLER' (affiche la barre de commande de QuickTime) et 'AUTOPLAY' (le film démarre automatiquement), vous pouvez aussi valider 'KIOSKMODE' si vous voulez protéger votre film de la copie.
Modification des dimensions de votre film :
Cliquez sur la chaine afin de protéger les proportions de votre film, augmentez la valeur de WIDTH (largeur) et la hauteur (HEIGHT) devrait automatiquement s'incrémenter de manière proportionnelle.
Vous n'avez en fait modifier que les dimensions d'affichages du plug in QuickTime, votre film s'affiche toujours à sa taille originale.
Pour vous en assurer validez 'BGCOLOR' et choisissez une couleur differente de celle du fond de votre page.
Si vous voulez que le film occupe toute la zone d'affichage vous devez valider 'SCALE' et choisir 'TOFIT' dans le menu déroulant.
Voici un exemple de réglage permettant d'afficher une bordure autour du film :
N'hésitez pas faire une 'Preview' pour visualiser les différents règlages.
Faites des essais en jouant avec les différentes options disponibles.
Toutes ces options se révèlent très utiles si vous enchaînez à l'aide de QTNEXT des films de taille différentes.
Et n'oubliez pas de tester vos films en ligne.
Jouer des fichiers reconnus par QT à l'aide du plug-in de QuickTime.
Vous voulez faire jouer par QuickTime des fichiers qui ne sont pas .mov mais des formats de fichiers reconnus par QuickTime (mp4, mp3, gif, flc, avi, etc...).
Exemple:
Vous voulez jouer un fichier mp4 à l'aide du plug in QuickTime.
Création d'un fichier .mov de même dimension que votre fichier mp4 :
Pour ce faire créer une image jpeg (ou tout autre format reconnu par QuickTime) ouvrez cette image dans QuickTime Player Pro et choisissez 'enregistrez sous...' en validant séquence autonome.
Cette image ne sera jamais affichée aussi créez un fichier léger : un à plat noir par exemple est largement suffisant. Vous aurez ainsi un film qui ne contient qu'une image, ce film est indispensable au navigateur pour activer le plug-in.
Entrez le nom de votre .mov dans le champ main movie, ou glisser /déposer votre fichier sur la fenêtre de PAGEot, validez les options comme ci-contre pour une simple vidéo :
Le controleur est affiché
Le film démarrera automatiquement
Le menu permettant d'enregistrer le film sera désactivé.
Cliquez sur l'onglet 'ADVANCED', Validez 'QTSRC' et entrez le nom de votre fichier mp4.
Puis choisissez de valider ou non les options :
- 'QTSRCDONTUSEBROWSER' utilise la mémoire cache du plug-in plutôt que celle du navigateur.
- 'QTSRCCHOKESPEED' bride la vitesse de transfert des données.
Si vous n'avez pas entré d'url fixe, assurez vous que tous les médias :
.mov , .mp4 et la page html sont situés dans le même dossier.
Si votre fichier un est fichier de stream (protocole rtsp), vous devrez entrez dans le champ QTSRC l'adresse complète de votre flux vidéo.
Création d'un Stamp Movie
Vous avez sans doute remarqué que sur le site Movie Trailers d'Apple, quand vous chargez une page html pour voir une vidéo, dans la plupart des cas un Stamp Movie est encapsulé à la place du film réel.
Si vous cliquez sur ce stamp movie ce dernier est remplacé par le film cible et ce sans avoir à charger une nouvelle page html.
Grace à cette technique la page s'affiche vite, le film étant très léger et le choix est laissé au visiteur de visionner le film cible.
Cette technique permet aussi d'ouvrir un film dans QuickTime player, permettant entre autre de le jouer en plein écran, ou d'ouvrir un film dont on a changé l'aspect grace à un fichier Skin.
Exemple:
Vous créez comme précédemment un Stamp movie, mais comme celui ci sera vu par le visiteur et attendra un click de sa part songer à faire une belle image et écrivez sur cette image une phrase du style :
'cliquez moi pour voir le film'.
Cette image doit au moins avoir la même taille que le film cible plus 16 pixels en hauteur pour que le controlleur du film cible soit pris en compte dans la hauteur d'affichage du plug-in.
Si votre Stamp movie est plus grand, le film cible s'affichera centré dans la zone d'affichage.
Ouvrez cette image dans QTPlayer, choisissez 'Enregistrez sous...' en tant que document autonome, revenez sur PAGEot et entrez le nom de ce film dans le champ Main movie :
Désactivez 'AUTOPLAY' et 'CONTROLLER'
Cliquez sur l'onglet 'Advanced'. Validez 'HREF', entrez le nom (l'url) ou faites un glisser déposer de votre fichier vidéo sur champ 'HREF', choisissez ensuite dans le menu déroulant 'TARGET' l'item 'MYSELF'.
Enfin validez les balises 'EXTEND', 'AUTOPLAY' et 'CONTROLLER' afin de faire apparaitre le controleur et de démarrer automatiquement le film cible.
Le tour est joué, si vous désirez que votre film s'ouvre dans QuickTime player choisissez 'Quicktimeplayer' à la place de 'myself' dans le menu target.
Dans l'exemple ci-dessous, le film stamp (à gauche) est au double de la taille du film cible (à droite)
Un panorama plein écran
A partir de la version 1.8.2 de PAGEot vous pouvez exporter des pages HTML qui s'ouvriront en plein écran (fullscreen) présentant un film QTVR lui aussi en plein écran.
Pour ce faire :glisser déposer un fichier QuickTime VR sur la fenêtre de PAGEot et cochez la case Full Screen.
PAGEot passe les dimensions de votre film à 100%, active l'option SCALE et le réglage TOFIT.
Décochez AUTOPLAY et si vous le désirez désactiver le Controller.
Ouvrez la fenêtre Code et désactivez External Javascript si l'option est coché.
Vous pouvez choisir la couleur de fond de la page HTML, celle-ci sera visible autour de votre film.
Choisissez Export as HTML ... dans le menu 'File' et enregistrez votre page au même niveau que votre Film QuickTime VR.
PAGEot exporte une page HTML incluant un script JavaScript qui passe la page en plein écran au chargement, comme les dimension du film QuickTime sont à 100% de la page, votre film occupe la quasi totalité de l'écran.
Allez donc admirer un exemple en cliquant sur l'image ci-contre
Un panorama avec HotSpots
Glisser déposer un fichier QuickTime VR sur la fenêtre de PAGEot, désactivez AUTOPLAY et cliquez sur l'onglet VR.
Si votre panorama contient des Hotspots ceux ci s'affichent dans la fenêtre VR, vous pouvez alors modifier les urls de ces Hotspots à partir de PAGEot.
Exemple :
Vous vous servez d'un film QuickTime VR pour donner accès à différents sites, les adresses que vous avez encapsulées dans votre fichier VR peuvent être modifiées par PAGEot et ce sans besoin de recalculer le fichier QuickTime VR.
Vous pouvez aussi dynamiquement modifier ces urls avec un script PHP puisqu'il suffit de générer un fichier texte.
L'exemple qui suit présente un panorama avec 4 HotSpots. Grace à PAGEot nous allons modifier le comportement des hotspots.
Effectuons un glisser déposer de notre film VR sur PAGEot. Cliquez sur l'onglet VR. Les quatre HotSpots apparaissent dans la liste, pour pouvoir modifier ces urls activez HotSpotn en cliquant sur la case à cocher HotSpot.
Nous allons ouvrir une adresse de site internet dans une nouvelle page html :
Sélectionnez le premier HotSpot et cliquez sur le bouton Edit. Vous pouvez aussi double-cliquer sur la ligne du premier Hotspot.
Entrez l'url de votre choix et choisissez _blank dans le pop-up.
Validez
Nous allons faire jouer un film QuickTime à l'aide l'application QuickTime Player.
Editez le deuxième HotSpot, entrez l'url de votre film et sélectionnez l'item 'quicktimeplayer' dans le pop-up Target.
Pour le troisième hotspot, nous allons entrer une instruction javascript permettant d'ouvrir la page web mode01.html dans une fenêtre :Tout d'abord ajoutez à votre page HTML dans le Header la fonction suivante :
<script><!--
function newWindow(adresse) {
VR = window.open(adresse,'VR','width=520,height=400,
toolbar=no,location=no,scrollbars=no');
VR.focus()
}
// --></script>
Puis entrez pour le node 3 l'instruction suivante :
javascript:newWindow('node01.html')
Choisissez none ou _self comme Target, et créez une page html de votre choix nommée node01.html. Placez cette page dans le même dossier.
Nous allons terminer par remplacer le film QuickTime VR par un autre film sur la même page:Entrez l'url du nouveau film et choisissez myself dans le pop-up.
Et voilà, il ne vous reste plus qu'à enregistrer votre page web dans le même dossier que les autres éléments et savourer le résultat.
Cliquez ici pour voir un exemple.