Le langage Smil (Synchronized Multimedia Integration Language) est une véritable “glu” qui permet de mettre en ?”u-vre plusieurs médias dans une même fenêtre (texte, vidéo, son, HTML), de les positionner dans l’espace, mais aussi de les synchroniser les uns par rapport aux autres. Cette recommandation du W3C vise à fournir un cadre de référence pour les développements multimédias sur Internet. Smil s’implémente en XML et est lisible par les principaux lecteurs du marché : Apple (QuickTime Player), RealNetworks (RealPlayer), Microsoft (Windows Media Player).
1) Intégrez les différents médias
Lancez HomeSite 4.5 et créez un nouveau fichier que vous enregistrerez sous “index.smi”. Vous pouvez utiliser n’importe quel autre éditeur de code, mais HomeSite présente l’avantage de gérer par défaut la coloration syntaxique. Il propose en outre un éditeur de balises Smil qui vous guidera dans la découverte du langage.
2) Renseignez les informations de présentation
Le code Smil possède la même structure que le HTML avec une première partie (Head) déclarative et une seconde partie descriptive (Body). La tête permet, entre autre, de préciser toutes les informations relatives aux droits d’auteur. Les éléments sont identiques à ceux du HTML avec les balises “author”, “title”, “copyrights”, etc.
3) Définissez le cadre d’affichage
C’est aussi dans l’en-tête que vous devez définir la position des différents médias. Toute déclaration est encadrée par l’élément “Layout”. Commencez par préciser les informations relatives à la fenêtre principale à l’aide de la balise “root-layout”. Elle correspond à l’espace dans lequel apparaîtront les autres médias. Vous pouvez indiquer la couleur de fond, la taille et presque tous les paramètres disponibles pour la balise “body” en HTML. Définissez ensuite chaque zone d’affichage à l’aide de la balise “region” et nommez-les. C’est absolument indispensable pour que le lecteur Smil accepte de jouer la présentation. L’attribut “fit=fill” permet d’adapter la taille de la vidéo à celle de la zone.
4) Organisez la lecture des différentes sources
Plusieurs ressources (un clip vidéo ou une image par exemple) peuvent être affectées à une même zone. C’est pour cette raison que l’affichage des informations est encadré par les balises “SEQ” et “PAR”. La séquence est la plus grande unité d’organisation. Elle correspond à une “timeline” dans Dreamweaver, Flash ou Director. Plusieurs informations peuvent être jouées en même temps dans cette piste pour peu qu’elles soient encadrées par la balise “PAR”. Les éléments “text” et “video” permettent de préciser le type du média. Utilisez l’attribut “fill=freeze” pour indiquer au lecteur vidéo qu’il restera calé sur la dernière image lorsque la séquence vidéo arrivera à sa fin. Cela évitera de quitter l’internaute sur une zone vide.
5) Encodez la vidéo
Le Rich Media est l’utilisation conjointe de plusieurs technologies Internet. Dans cette mise en ?”uvre, Smil est la “glu” qui recolle les morceaux et les vidéos que nous utilisons au format RealNetworks, le plus répandu au monde. Procurez-vous l’encodeur RealProducerBasic à l’adresse real networks.com/products/index.html. Installez le logiciel, lancez-le et cliquez sur le bouton “Add media” pour ajouter une vidéo au format AVI. RealProducer vous permet de choisir le type de compression. Ne modifiez pas le paramètre par défaut positionné sur “Video music-dialup (320×144)” qui convient parfaitement à votre mise en ?”uvre. Sauvegardez votre fichier sous le nom “video.rm”.
6) Synchronisez les liens avec la vidéo
Stockez les titres qui autorisent l’accès aux différentes séquences de la vidéo dans un fichier à part. Cela vous permettra de modifier l’index autant de fois que nécessaire, sans avoir à retoucher le fichier vidéo.
7)Définissez la zone de titre
L’élément “window” sert à définir les paramètres d’affichage de la zone. L’ensemble des attributs de présentation (bgcolor, width, etc.) sont standards.
8) Créez l’index
Utilisez la syntaxe “command:seek (0:10.0)” dans chaque lien pour préciser quel moment de la vidéo débutera lorsque l’utilisateur cliquera sur le lien. L’instruction “seek” positionne le lecteur vidéo au bon endroit dans le film. Ses paramètres sont exprimés respectivement en minutes, secondes et millisecondes.
9) Intégrez le code Smil
Il ne vous reste plus qu’à insérer la présentation multimédia dans votre page HTML pour créer votre premier document Rich Media.
10) Incorporez l’objet Smil à la page HTML
Ajoutez un nouveau fichier HTML dans votre éditeur de code et nommez-le “chaine.html”. Insérez l’objet Smil en respectant la recommandation HTML 4.0 du W3C. Utilisez pour cela l’élément “Objet” en précisant que la classe de l’objet que vous utilisez est “CFCDAA03-8BE4-11cf-B84B-0020AFBB CCFA”. Indiquez l’emplacement du fichier Smil avec le paramètre “SRC”. Dans notre exemple, il s’agit d’un fichier auquel on accède en local mais, dans la plupart des cas, vous devrez indiquer une URL du type “rtsp:// mon_serveur:/ramgen/video.smi”. Testez le document en appelant votre page dans votre navigateur. Si aucune information n’apparaît, cela signifie que votre lecteur RealPlayer n’est pas installé. Vous pourrez le télécharger sur le site real.com.
🔴 Pour ne manquer aucune actualité de 01net, suivez-nous sur Google Actualités et WhatsApp.
