• Démarrage rapide (Fast Start ou progressive download)
• Séquence à indication (hints ou streaming)

• Chargement progressif ou Streaming ?
• Cibler votre audience
• Préparer votre séquence
• Intégrer la séquence à une page HTML
• Si votre client n'a pas QuickTime ? (optionnel)
• Proposer des séquences alternatives (optionnel)

Pour cet article nous supposons que vous connaissez la conception de site web classique (page html).

Le choix entre ces 2 méthodes va surtout dépendre des médias à diffuser et des moyens mis en œuvre.

Le chargement progressif est la technique la plus simple à mettre en œuvre et la plus compatible avec l'hébergement de site internet. En effet une séquence à chargement progressif est une simple séquence QuickTime adapté à la diffusion sur internet au travers d'une serveur HTTP ou FTP classique (comme pour les pages html). Cette méthode ne nécessite que peu de moyen.

Le chargement progressif correspond à une mise en forme chronologique de la séquence et à l'ajout d'un entête spécifique à votre séquence. Une fois mis à disposition dans une page internet, la séquence commencera à se charger et se jouera automatique dès que suffisamment de données auront été charger par le client. La séquence est alors restitué dans son intégralité, comme diffuser depuis le disque dur local du client. Pour des séquences longues le client doit patienter parfois longtemps avant de pouvoir visualiser la séquence.

Les séquences ainsi diffusés peuvent être copiés par l'utilisateur sur son disque dur.

Le streaming de son coté nécessite l'utilisation d'un serveur particulier : QuickTime Streaming Server (QTSS) au travers des protocoles RTP ou RTSP. Cela nécessite donc de faire appel à un hébergeur particulier (offrant ce service), mais peu aussi se déployer sur un réseau local avec MacOS X.

Le streaming correspond au découpage des pistes de la séquence en paquets et à l'ajout d'une piste de Hints pour chaque média (piste) composant la séquence. Lors de la diffusion, le lecture débute rapidement et se déroule en temps réel. C'est le serveur QTSS qui adapte à la volée le flux à la connection du client. Ainsi la séquence sera joué mais il pourra manquer des bouts et l'image pourra être de mauvaise qualité si le client utilise une connection lente. Le streaming permet aussi la diffusion de flux en direct, ce qui est impossible avec le chargement progressif.

Dans le cadre de cet article nous nous focaliserons sur le chargement progressif, le streaming étant réservé plutôt à des usages professionnels.

Pour le chargement progressif vous devez disposer d'une séquence prête à la diffusion. Vous devez ensuite cibler un public précis pour déterminer le débit maximum que vous vous autorisez, et qui correspondra à un temps de chargement moyen que vous estimez correct.

Notre séquence d'exemple (la bande annonce de Monsters Inc) à les caractéristiques suivantes :

• Durée : 00:01:46.12 (soit 106,5 secondes)
• Fréquence : 24 images/seconde
• Dimensions : 480 x 256 pixels
• Débit : 193,8 ko/s
• Taille : 20,1 Mo

La séquence brute chargée au travers d'une liaison modem classique (soit un débit moyen de 4 ko/s) nécessitera un temps de chargement de 1 heure et 26 minutes ! Ce qui risque de repousser les lecteurs de votre site internet.

Consultez les informations sur votre séquence source

Il va falloir faire de sérieux compromis pour se ramener à une durée "correcte" et "supportable" par vos lecteurs. Nous considérons ici que le temps de chargement ne doit pas trop dépasser le double de celui de la lecture. Soit ici un maximum de 220 secondes dans notre cas (106,5 secondes x 2 = 212 secondes). Ce qui signifie que les lecteurs du site devront devront patienter 3 minutes environ pour visualiser la séquence.

Le débit moyen d'un modem 56K étant de 4 ko/s on aboutit à une taille de fichier de : 880 Ko maximum (4 ko/s * 220 secondes).

Si l'on vise des lecteurs équipés avec l'ADSL (débit moyen de 16 ko/s) on aboutit une taille de fichier d'environ 3,5 Mo, mais si jamais un utilisateur avec modem 56K charge se film, il devra patienter 15 minutes environ... Nous verrons plus loin comment proposer facilement une séquence compatible à la fois pour un modem RTC et l'ADSL dans le chapitre Séquence Alternatives.

Pour connaitre les débits moyens utilisable suvant le type de liaison, vous pouvez consulter la table de spécification "Support de diffusion/stockage"

Une fois votre choix fait, vous allez devoir préparer la séquence pour attendre votre cible, ici nous retenons les liaisons 56K comme "norme", on a donc :

• débit max : environ 4 ko/s
• taille max : 880 Ko

Cette étape nécessite souvent de nombreux essais pour ajuster au mieux votre cible (débit) à la qualité de la séquence.

Comme indiqué dans la table "Support de diffusion/stockage" une liaison modem 56K à 4 ko/s nécessite l'utilisation des codecs H.263 ou Sorenson 3 de préférence pour la vidéo ou Animation pour les images informatiques animés. Avec QuickTime 6 le codec MPEG-4 convient désormais aussi très bien.

Ces codecs ont l'avantage de permettre d'encoder une séquence vidéo dans un format et de la diffuser ensuite à 200% (notamment le Sorenson 3 qui inclus un algorythme spéciale d'agrandissement par 2) sans que la pixellisation soit trop voyante.

Pour réduire drastiquement le débit de la séquence (origine : 194 ko/s -> cible : 4 ko/s) il va falloir utiliser toutes les méthodes disponible pour réduire le débit d'un facteur 48, (194/4), c'est-à-dire :

• réduire le format d'image, c'est un facteur au carré, cad qu'une réduction de dimension d'un facteur 2, réduira le débit d'un facteur 4.
• réduire la fréquence, réduire le nombre d'image par seconde va permettre de réduire d'autant le débit
• réduire la qualité d'image en jouant sur les possibilités du codec

Nous allons ici essayer avec le codec Sorenson 3 mais aussi H.263 pour choisir au final celui qui aura le meilleur rendu visuel.

La réduction de débit est d'un facteur 48 (194/4), nous allons réduire le nombre d'images par secondes (fréquence) de 24 à 12 soit un facteur 2, reste donc un facteur 24 à gagner.

Ensuite nous allons réduire la taille de l'image par 3 environ pour un gain d'un facteur 9 (3x3 = 9), il restera un facteur de gain de 2,66 que nous gagnerons par la qualité d'image du codec.

La taille image de la séquence est de 480x256 pixels, pour réduire par 3 on aboutit à 160x85 pixels environ, ce qui est parfait car les codecs (et particuliairement Sorenson) préfère les largeurs multiples de 2 et 4 si possible. Dans la page internet (html) nous pourrons présenter la séquence à 200% soit une dimension de 320x170 pixels, ce qui est très correct pour une vidéo internet.

Il convient aussi de réduire au mieux la piste audio. Bien que l'audio soit plus petit que la vidéo on peut gagner facilement du débit en jouant sur :

• réduire le nombre de voix (passer en mono une piste stéréo réduit d'un facteur 2)
• réduire la fréquence d'echantillonage (passer de 44,1 kHz à 22,05 réduite d'un facteur 2)
• réduire la qualité par le choix d'un codec adapté (QDesign Music pour la musique et PureVoire pour des commentaires parlés).

Avec QuickTime Pro :

• Ouvrir la séquence source
• Sélectionner menu "Fichier"+"export"
• Régler le mode d'export sur "Séquence vers Séquence à indication" afin de générer une séquence adaptée à internet, puis cliquez sur le bouton "Option" pour accéder aux réglages avancés
• Dans le cadre vidéo+réglage, sélectionner le codec "Sorenson 3" avec une fréquence de 12 images/secondes, et un débit limité à 4 ko/s.
• Ensuite dans le cadre vidéo+filtre assurez vous qu'aucun filtre n'est activé
• Dans le cadre vidéo+taille, sélectionnez "taille personalisée" à 160x85 dans notre cas
• Dans le cadre audio+réglage, activé le codec QDesign Music 2 avec une fréquence de 22,05 kHz, 16 bits et mono.
• Cochez l'option "Préparer pour l'enchainement via internet" et "démarrage rapide - entête compressé"
• Donnez un nom compatible internet à votre séquence (cad évitez les accents et tout caractères spéciaux ainsi que les espaces et terminé le nom par .mov)
• Enregistrez votre séquence internet.
• Renouveller l'opération avec un nouveau nom et le codec video "H.263"

Vous obtenez ainsi 2 séquences internet de taille similaire, visualisez les à 200% dans QuickTime Player pour sélectionner celle qui vous semble avoir le meilleur rendu. Dans mon cas et avec la BA de Monsters Inc. je sélectionne celle avec le codec "Sorenson 3". Evidemment le résultat peux paraitre décevant mais n'oubliez pas qu'ici le débit est faible (celui d'un modem 56K) et que la séquence se chargera en un peu plus de 3 minutes pour une durée de vidéo de 1,75 minutes ce qui n'est déjà pas si mal.

Si vous n'arrivez pas à obtenir quelquechose de satisfaisant vous pouvez essayer d'appliquer un filtre flou léger sur votre séquence lors de l'export, cela rendra votre image moins net mais elle sera beaucoup plus facile à encoder par le codec.

export pour internet

Réglages vidéo

Réglages généraux de l'export

Image originale (Sorenson haut débit)

Codec H.263 - débit 4 ko/s

Codec Sorenson - débit 4 ko/s

Votre séquence retenue il va falloir maintenant l'intégrer à une page html pour quelle soit visualisable par vos lecteurs.

Jusqu'a récemment la seule méthode était l'utilisation des balises <EMBED>. Cette technique fonctionne avec tout les navigateurs internet (Netscape, iCab, Opéra et Internet Explorer 5). Mais Microsoft a supprimer le support de cette balise dans les dernières générations de son navigateur (IE 5.5 SP2 et IE 6) en supprimant la gestion des plug-ins afin d'imposer leur propre technique : Active X.

Afin d'assurer une parfaite compatibilité pour tout les navigateurs il sera donc plus prudent de proposer les 2 méthodes (EMBED et Active X) dans la même page, ce qui est heureusement possible avec le HTML.

Vous pouvez bien sur réaliser la construction du jeu de balise vous même directement dans le source HTML mais il existe des outils simples et gratuit qui réalise cette opération pour vous. Ici nous utiliserons l'excellent Pageot proposé gratuitement par QTBridge pour MacOS 9, MacOS X et Windows.

Pour utiliser Pageot vous devez disposer de votre séquence finalisée et renommée correctement afin de supporter les conventions des sites internet.

Avec Pageot :

• Glisser votre séquence dans la fenêtre Pageot, celui-ci se remplit automatiquement avec les informations de base de votre séquence
• Sélectionner bien le mode html : object & embed pour la compatibilité maximale (object = Active X)
• Changer les dimensions du film à 320 x 170 si vous désirez agrandir votre film à l'affichage à 200%
• Choisissez la couleur de fond de votre page HTML
• Ajuster scale sur "FIT" (remplir) pour que le film soit agrandit aux dimensions demandés
• Cocher l'option "Controller" pour afficher la barre de lecture dans la page internet
• Cocher "AutoPlay" pour que la séquence se mette automatiquement en lecture dès que le chargement sera suffisamment avancé.
• Donner un nom à votre séquence dans la rubrique "MovieName"
• Une fois terminé, choisissez l'option "Export HTML" dans le menu "Fichier" pour créer un fichier HTML. Veuillez à enregistrer la page HTML au même endroit que la séquence ou suivant le chemin précisé dans "MoviePath".
• Votre page HTML de base est prête, vous pouvez maintenant la modifier avec votre éditeur HTML favori.

Si votre lecteur ne dispose pas de QuickTime, le navigateur ne reconnaitra pas l'objet et proposera de charger le plug-in mais ce mécanisme n'est pas normalisé et vous risquez d'embrouiller votre lecteur qui ne reviendra plus voir votre site.

Vous pouvez en utilisant un JavaScript tester la présence de QuickTime et renvoyer vers une page ad-hoc qui proposera à votre lecteur de le renvoyer vers le site Apple pour y charger QuickTime.

Apple propose des badges QuickTime pour indiquer à vos lecteurs que vous utilisez la technologie QuickTime. Il est bien d'utiliser ces badges sur les pages HTML de votre site avant d'arriver aux pages comprenant les films eux-mêmes afin que vos lecteurs puissent être informé et choisir de s'y rendre ou pas suivant qu'ils ont QuickTime d'installé sur leur micro-ordinateur.

Les badges QuickTime que Apple propose pour vos sites internet. Ceux-ci doivent renvoyer vers l'adresse de téléchargement de QuickTime, soit : http://www.apple.com/quicktime/download/ (US) http://www.apple.com/fr/quicktime/download/ (FR)

Apple propose un script compatible JavaScript et VBScript qui permet de savoir si QuickTime est présent :

<HEAD>
<TITLE>Test de QuickTime</TITLE>
<SCRIPT LANGUAGE="Javascript">
<!-- hide from pre-script browsers
var haveqt = false;
//-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!-- hide from pre-script browsers
On Error Resume Next
Set theObject = CreateObject("QuickTimeCheckObject.QuickTimeCheck.1")
On Error goto 0

If IsObject(theObject) Then
If theObject.IsQuickTimeAvailable(0) Then 'Just check for file
haveqt = true
End If
End If
//-->
</SCRIPT>
<SCRIPT LANGUAGE="Javascript">
<!-- hide from pre-script browsers
if (navigator.plugins) {
for (i=0; i < navigator.plugins.length; i++ ) {
if (navigator.plugins[i].name.indexOf("QuickTime") >= 0)
{ haveqt = true; }
}
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<div align="center">
<SCRIPT LANGUAGE="Javascript">
<!-- hide from pre-script browsers
if (haveqt)
{document.write("*** QuickTime OK ***");}
else
{document.write("QuickTime n'est pas installé, téléchargez le <href=http://www.apple.com/quicktime><b>QuickTime</b>");}
//-->
</SCRIPT>
<NOSCRIPT> <font face="Verdana, Arial, Helvetica, sans-serif" size="2">Votre
navigateur internet ne peut ex&eacute;cuter les scripts (JavaScript ou VBScript)
et le test de la validit&eacute; de <b>QuickTime</b> n'est pas possible...</font>
</NOSCRIPT> <NOEMBED> <font face="Verdana, Arial, Helvetica, sans-serif" size="2">Votre
navigateur internet n'autorise pas les balises EMBED et le test de la validit&eacute;
de <b>QuickTime</b> n'est pas possible...</font></NOEMBED> </div>
<p align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="4"><b>Test
QuickTime</b></font></p>
</BODY>
</HTML>

Ce script à intégrer et modifier au sein de votre page HTML détectera la présence de QuickTime.

• En vert ce qui sera insérer dans votre page HTML si QuickTime est installé (placez-y la balise générer par Pageot)
• En rouge ce qui sera afficher si QuickTime n'est pas présent : ici un lien vers le site de téléchargement de QuickTime
• En Jaune ce qui sera afficher si le navigateur de votre lecteur ne supporte pas les scripts et ne peut donc tester QuickTime

Tester votre configuration avec ce script, en cliquant ici.

Vous pouvez affiner la qualité de votre séquence en proposant plusieurs versions de celle-ci. Avec par exemple une séquence pour liaison modem 56K (débit 4 ko/s) et une autre pour l'ADSL (débit 16 ko/s).

Pour proposer à votre lecteur de choisir la séquence la plus adaptée vous pouvez créer une page HTML qui permettra au lecteur de choisir lui-même avec un lien vers la page 56K et un lien vers la page ADSL.

Mais vous pouvez aussi utiliser une fonction de QuickTime dédié à la sélection automatique : "alternative sequence" qui orientera alors automatiquement votre lecteur vers le bon film. Dans ce cas il conviendra que les différentes séquences alternatives soient au même format image, ici 160x85 pixels. QuickTime orientera le client qui visualisera la séquence vers l'original qui correspond à sa vitesse de connection définit par le tableau de bord "Réglages QuickTime".

Pour proposer des séquences alternatives, vous devez donc réaliser plusieurs versions de votre séquence (en partant toujours de la même source : ne réencodez pas la séquence 4 ko/s en 16 ko/s) à différents débits suivants ceux choisit comme cible.

Ici nous allons créer 2 alternatives :

• modem 56K : débit env. 4 ko/s ; fichier = "m-56k.mov"
• adsl : débit env. 16 ko/s ; fichier "m-adsl.mov"

Vous devez maintenant créer un "alternate movie" avec l'outil gratuit MakeRefMovie de Apple (MacOS et Windows). C'est cette séquence "virtuelle" qui va aiguiller le navigateur internet de votre lecteur vers la véritable séquence qui dépend des réglages "Vitesse" de son tableau de bord QuickTime.

Pour que cela fonctionne bien il faut préserver la localisation originales des 3 séquences (les 2 versions + le RefMovie) sur le site web comme sur votre disque au moment de leur création. Le plus simple est de mettre vos 2 séquences ainsi que le RefMovie dans le même dossier et de les placer de même sur votre site web.

Avec MakeRefMovie :

• Enregistrez la séquence alternative au même endroit que vos séquences sources
• Glissez chacune de vos séquences sources dans la fenêtre MakeRefMovie
• Réglez pour chaque séquence alternative la vitesse de connection correspondante et éventuellement la langue ou d'autres paramètres
• Sauvez la séquence alternative et quittez MakeRefMovie

Vous pouvez modifier ces réglages en re-ouvrant la séquence alternative avec MakeRefMovie, en la glissant sur l'icone du logiciel.

Vous pouvez tester avec QuickTime Player votre séquence alternative en l'ouvrant et la visualisant plusieurs fois en changeant entre chaque test le réglage de votre vitesse de connection via le tableau de bord "réglages QuickTime".

Note : MakeRefMovie vous permet aussi de créer des séquences alternatives en fonction de la vitesse de connection mais aussi de la langue, ce qui permet de proposer une vidéo avec le son en anglais ou en français.

séquence référence

interface MakeRefMovie

tableau de bord "Réglages QuickTime"

Vitesses de réglages connection

• "Monster Inc.", dessin animé des Studio Pixar - © 2001 - Disney / Pixar