 |
Ajouter des Films à votre page Web faites tourner le popcorn, SVP ! |
|
Ajouter des Films à votre page Web faites tourner le popcorn, SVP ! |
Après cette leçon, vous pourrez :
Accusez la télévision, Hollywood, MTV, etc, mais notre société est axée sur la vidéo. Et, avec le web, nous pouvons également inclure des informations en format vidéo.
Mais si vous pouvez ne veut pas dire que vous devez. Pourquoi ? Très simple. La vidéo comporte beaucoup, énormément de données à envoyer sur internet, et vos expériences vraisemblables à ce jour se résument à ces "minuscules" carrés de segments vidéo où les voix semblent totatement désynchronisées de l'action. Quand on y réfléchit, faire un "film" suppose l'envoi de nombreuses images statiques (comme les images des anciens films) pour créer l'illusion du mouvement, sans même mentionner l'ajout d'une couche d'information audio.
Donc, jusqu'à ce que l'accés internet haut débit devienne la norme (et ça le sera un jour), nous usons de la technologie pour compenser grâce à de savantes techniques qui "compressent" la vidéo pour réduire les tailles de fichiers, et d'autres techniques permettant à l'information vidéo de "couler" (stream) vers nous (cela signifie que nous voyons le contenu au fur et à mesure de sa réception, sans attendre le chargement d'un gtos fichier).
| type de média : | vidéo digitale | |
| ce qu'il fait bien : | information liée au temps, séquences, évènements historiques, endroits impossibles ou dangereux à visiter | |
| problème à considérer | évaluation | commentaires |
|---|---|---|
| inconvénient pour la création du média | faible important |
Equipement spécial nécessaire pour convertir la source vidéo au format digital. Il existe des solutions bon marché, mais elles demandent encore du matériel spécial, beaucoup d'espace disque et un logiciel d'édition vidéo. |
| "largeur" de l'audience pouvant voir le média | petite grande |
Pour voir de la vidéo, vous aurez sûrement besoin d'un "plug-in" , mais les nouveaux navigateurs en intègrent déjà un. |
| consommation de bande passante | faible forte |
Peut être assez importante. La Vidéo représente une quantité considérable d'informations et perd de sa qualité sur des débits tels que ceux des modems. Il existe des options pour "fluidifier" le contenu ("streaming") mais cela peut nécessiter des serveurs spéciaux. |
Nous vous recommandons de penser à la video sans essayer de la comparer à la télévision ou au cinéma. Les pires des utilisations sont celles que l'on appelle les "Têtes Parlantes", une personne figée qui vous parle. La vidéo n'a que très peu de valeur ajoutée et, comme nous le verrons plus tard, vous pouvez faire passer une information équivalente en utilisant un support moins consommateur de bande passante consistant à combiner des images fixes et du son.
Quand peut-il être important d'utiliser de la vidéo dans votre page web ? Principalement pour montrer quelque chose qui change dans le temps, comme on le voit avec l'animation, mais ayant un aspect plus "réel" que le dessin. Cela peut être un évènement historique (l'assassinat de John F Kennedy). La vidéo peut être utile pour nous montrer des choses difficilement accessibles du fait de leur position (alunissage d'Apollo, les cratères de Mars), de limitations physiques ou de considérations de sécurité (exploration des profondeurs sous-marines, intérieur d'un réacteur nucléaire). Elle peut également être cruciale lors de la démonstration d'une procédure (chirurgie, soudure d'une poutre en acier).
Vous pouvez utiliser un film "digitalisé" tout simplement pour regarder une vidéo non-stop du début à la fin. Mais vous pouvez aussi ajouter un "ascenseur" pour sauter directement à n'importe quel endroit du film. Cela peut permettre d'explorer les "instantanés" d'un processus qui se déroule dans le temps.
Changeons de sujet et parlons de technologie vidéo. Historiquement, Les films étaient enregistrés selon le processus de la photographie (pensez aux bobines de films) et visionnés à l'aide d'un projecteur. Pour utiliser de la vidéo sur un ordinateur, l'information doit être digitalisée ou convertie en fichier de données (essentiellement une série d'images) qui, quand un le joue à la vitesse appropriée, donne l'illusion du mouvement. Ceci est généralement atteint quand on voit à peu près 30 images chaque seconde (ou "images/secondes").
Pour créer un clip vidéo, vous avez besoin d'un équipement spécial en entrée (une source comme un magnétoscope, une télévision ou une caméra vidéo) pour la création magique d'un fichier vidéo. Si cela était considéré comme très "high-tech" il y a quelques années, il existe maintenant de nombreux outils (bon marché) pour le réaliser. Il vous faudra également un logiciel spécial d'édition vidéo une fois les clips dans votre ordinateur, dont les prix varient, une fois encore, de peu cher (simple) à très onéreux (complexe, professionnel).
Quand on commence à parler de vidéo digitale, on entre dans une région de soupe d'acronymes pour les différents types de fichiers vidéo. Les formats les plus couramment utilisés sont probablement le QuickTime d'Apple et le Moving Picture Experts Group (MPEG) - Groupe des experts des images animées. Il y en a, évidemment, bien d'autres et nous ne pouvons pas tous les détailler ici. Pour plus d'informations, visitez le Guide Vidéo de About.com. Dans ce didacticiel, nous présenterons le code pour inclure un film QuickTime dans votre page web. Bien que d'autres formats vidéo puissent être utilisés (comme le MPEG, AVI, etc), QuickTime est le format supporté par la majorité des navigateurs web.
Pour plus d'informations sur la vidéo, consultez la Bibliothèque Virtuelle des Développeurs Web.
A l'époque où le web émergea, les clips vidéo étaient rarement utilisés car pour les visionner, l'internaute devait télécharger complètement le fichier vidéo (d'une taille de plusieurs mégaoctets, même pour des petits clips) avant de pouvoir voir quoi que ce soit. Plus récemment, avec l'évolution des technologies autour du web, des solutions ont été inventées pour permettre de "fluidifier" la vidéo ; c'est-à-dire que, quand vous demandez de la vidéo (cliquez sur un lien de page web), vous commencez à voir le clip dès que suffisament d'information est arrivée dans votre navigateur, et le reste continue à se télécharger pendant que vous regardez le début. La technologie la plus au point s'appelle RealNetworks ; la limitation pour vous, humble développeur de page web, est que RealVideo nécessite des serveurs spécifiques pour transmettre les données. Vous pouvez trouver d'excellents exemples de RealVideo sur le Site d'Informations de CNN.
Il faudra également des "additifs" spéciaux sur les navigateurs web des internautes pour voir de la vidéo digitale. RealVideo et QuickTime ont besoin de "plug-ins" pour fonctionner. Heureusement, de nos jours, la majorité des navigateurs web intègrent déjà ces technologies, mais il faut parfois les mettre à jour. Pourtant, ne comptez pas sur le fait que tout le monde est prêt à visionner de la vidéo !
Compte tenu du fait que la vidéo est un média pour une bande passante importante, vous devez par principe placer la vidéo "à un clic", c'est-à-dire que vous proposez la vidéo en option pour votre visiteur : il sera informé par un message et devra cliquer pour y accéder. Nous allons expliquer cela dans notre leçon.
Pour inclure un clip vidéo dans une page web, nous utilisons le tag <EMBED> (ENCAPSULER) qui, d'une certaine manière, est similaire au tag <IMG) dans le sens où vous spécifiez un fichier source et les dimensions du média à insérer dans la page :
<EMBED src="video.mov" width="320" height="240"></embed>
Il existe d'autres options à ajouter à ce tag pour contrôler la relecture :
| option du tag embed | valeurs | notes |
|---|---|---|
| src | chemin vers le nom du fichier film | peut être un URL relatif ou absolu |
| width height | dimensions du fichier film | |
| autoplay | true/false (vrai/faux) | détermine si le film doit démarrer automatiquement ou attendre que l'utilisateur clique sur le bouton Lecture |
| controller | true/false (vrai/faux) | détermine si le film affiche une barre de contrôle |
| href | URL | lien où envoyer le visiteur si il clique sur le film |
| target | window name (nom de fenêtre) | permet à href de s'afficher dans une autre fenêtre de navigateur |
| loop | true/false (vrai/faux) | spécifie si le film tourne en boucle (loop) |
| pluginspage | URL | envoie le visiteur où il peut récupérer le plug-in QuickTime |
Pour plus de détails sur les paramètres du tag EMBED, consultez le Site QuickTime d'Apple.
Note : Si vous n'avez pas les documents des leçons précédentes, téléchargez-les maintenant.
Dans cette leçon, nous allons ajouter un film QuickTime à notre site Web Volcan. Le clip QuickTime que nous utilisons ici a été créé dans un format qui lui permet de démarrer avant que le fichier soit complètement téléchargé.
Ce film a été généré par un ordinateur à partir d'une modélisation de l'éruption du Vésuve qui détruisit la ville de Pompei en 79 avant J.C. Nous avons obtenu l'autorisation d'utiliser cette vidéo de son créateur -- voir notre demande.
<html>
<head>
<title>Simulation du Vésuve</title>
</head>
<BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666>
<center>
<embed src="../movies/vesuvius.mov" width="301" height="191"
autoplay="false" controller="true"
href="http://tribeca.ios.com/~dobran/" target="_blank"
loop="false"
pluginspage="http://www.apple.com/quicktime/download/">
</embed>
<p>
<h2>Simulation par Ordinateur de l'Eruption de Pompei en 79 avant J.C</h2>
Cette séquence animée simule une éruption de type <b>Plinienne</b>
où la chute d'une grande colonne éruptive génère un flot pyroclastique très rapide
se propageant sur le sol.
Regardez la séquence entière plusieurs fois, puis utilisez la barre de défilement
pour identifier le moment où le flot pyroclastique commence.
<p>
<i>avec l'aimable autorisation de Flavio Dobran</i><br>
<a href="http://tribeca.ios.com/~dobran/">http://tribeca.ios.com/~dobran/</a>
<p>
<font face="verdana,arial,helvetica" size=2>
Note : si le clip ne s'affiche pas dans cette page, essayez d'aller
directement au <a href="../movies/vesuvius.mov">clip</a></font>
<form>
<input type=button value="Retour à la Terminologie des Volcans" onClick="self.close()">
</form>
</center>
</body>
</html>
NOTE : Nous avons défini un URL (href="http://tribeca.ios.com/~dobran/", target="_blank") afin que chaque clic dans la zone du clip déclenche une connexion vers le site web du Vésuve (contenant la source originale) dans une nouvelle fenêtre de navigateur. Dans ce film, le clip ne démarrera pas automatiquement au chargement de la page (autoplay=false) car nous voulons que le visiteur puisse utiliser la barre de contrôle à n'importe quel endroit du film. Cela lui permet d'étudier le clip en tant que séquence d'évènements dans le temps. Si il le souhaite, il peut cliquer sur le bouton lecture et regarder le film entier.
Nous avons également ajouté un hyperlien au bas de la page pour les cas où l'internaute n'a pas le plug-in approprié pour visionner la vidéo proposée sur la page web. Un lien direct pourra l'aider en ouvrant un programme externe pour visionner la vidéo.
A ce stade, vous devriez avoir une page web incluant un clip QuickTime. Nous allons maintenant modifier une de nos pages existantes, "Terminologie des Volcans", afin d'y relier cette nouvelle page et de l'ouvrir dans une nouvelle fenêtre en utilisant du JavaScript. Pour cela, nous allons utiliser la même méthode que dans la précédente leçon pour l'ouverture de la fenêtre avec un GIF animé.
<h3>Les Volcans en Action</h3>
<a href="vesuvius.html" onClick="window.open('vesuvius.html', 'plinien',
'width=400,height=550,status,menubar'); return false"
onMouseOver="window.status='voir l'animation par ordinateur d'une éruption Plinienne';
return true"><img src="../pictures/projector.gif" alt="lumières !"
width="46" height="32" align="left" border=0></a>
Voir <a href="vesuvius.html" onClick="window.open('vesuvius.html',
'plinien', 'width=500,height=550,status,menubar'); return false"
onMouseOver="window.status='voir l\'animation par ordinateur d\'une éruption Plinienne';
return true">l'animation par ordinateur d'une éruption de type Plinienne</a>,
reconstituée d'après l'éruption du Vésuve qui détruisit la ville de Pompei en 79 avant J.C.
Utilisez l'animation pour comprendre la formation des colonnes éruptives Pliniennes
et comment leur chute peut générer des flux pyroclastiques [clip QuickTime de 295k].
NOTE : Dans ce code, nous avons lié l'icône d'un projecteur, et le texte adjacent, à du JavaScript afin d'ouvrir notre page vesuvius.html dans une nouvelle fenêtre. Si vous avez des problèmes avec cette méthode, révisez la leçon 27c dans laquelle nous avons vu comment utiliser le JavaScript pour ouvrir de nouvelles fenêtres.
Notez également que nous précisons à notre visiteur que ce lien chargera un fichier de 295k ; si il utilise une connexion Internet lente, il peut choisir ou non de voir le clip.
Comparez vos pages web avec cet exemple du document-type. Si vos pages sont différentes de l'exemple ou que les liens hypertexte ne fonctionnent pas correctement, vérifiez le texte que vous avez tapé dans l'éditeur de texte. Comparez votre travail avec le HTML des exemples (cherchez quelque chose comme Source dans le menu Afficher de votre navigateur).
Revoyons les grandes lignes de cette leçon :
Malheureusement, la variété des films digitaux rend difficile le choix du format. Si le QuickTime ne vous parait pas être une solution pérenne, vous pouvez avoir la même approche avec les autres formats comme AVI et MPEG. Pour ceux-ci, certains navigateurs ne pourront pas les afficher dans une page mais on pourra toujours les voir via le lien direct.
Nous n'avons pas inclus ces autres formats dans la version "offline" du didacticiel mais vous les trouverez sur notre site web :
Une fois les clips vidéo téléchargés depuis le Cinéma de la Leçon 29b, vous pouvez tout simplement remplacer toutes les références HTML au fichier vesuvius.mov par le nouveau nom de fichier.
Essayez d'ajouter des clips vidéo dans vos propres pages web. Avant d'utiliser un clip vidéo en ligne dans une page web, assurez-vous d'obtenir l'autorisation de la personne qui l'a créé.
Visitez le Monde des Volcans pour voir d'autres exemples de clips sur les volcans. Ou, si vous en avez marre de la lave, essayez :
"Watson, Venez vite ! Je veux du Son dans ma page web"
Ecrire le HTML : Leçon 29b : L'Heure du Film
©1994-2003
Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
La 'net connection (en anglais) à MCLI est
Alan Levine
Suggestions en Français à Bernard Bensoussan
URL: http://www.mcli.dist.maricopa.edu/tut/tut29b.html