Au point où nous arrivons, nous avons les éléments nécessaires pour faire un petit site sympa. Nous allons voir maintenant que l'on peut mettre autre chose que du texte et des images sur nos pages. Les possibilités ne manquent pas mais les deux choses que l'on va rencontrer le plus fréquemment ce sont les vidéos et le son mais pas que! Pour arriver à nos fins, nous allons utiliser trois balises; <video>, <audio> et <object>. Cette dernière est un véritable fourre tout qui accepte également la vidéo et le son.

 Le son        Les autres objets   La vidéo 


On commence par la vidéo. Quel parent n'a pas rêvé de montrer à ses amis sa fille répondant oui à la mairie ou bien son petit dernier marquant son premier but dans l'équipe communale de foot? Pour cela, nous disposons de la balise <video>.

La syntaxe est simple mais c'est la mise en œuvre qui souvent pose problème. Si je peux me permettre un conseil, prévenez vos visiteurs qu'ils doivent mettre à jour leur navigateur. Les balises video et audio sont récentes et ne sont pas reconnues par les anciens navigateurs. La dernière version de Safari pour Windows par exemple date de 2012. Internet Explorer 11 demande l'autorisation de charger la vidéo pour raison de sécurité. Firefox, Chrome et Opéra acceptent la syntaxe ci-dessous sans aucun problème.


La première ligne ouvre la balise video avec ses paramètres d'exécution.

• width et height donnent la taille de la vidéo. Si j'avais mis 640 et 480, la vidéo aurait été jouée dans une taille double.
• controls="controls" force l'affichage des contrôles de marche/arrêt, pose etc. Si vous ne mettez pas ce paramètre, les contrôles ne seront pas affichés.
• autoplay="autoplay" force le démarrage automatique de la vidéo.
• preload="auto" la vidéo commence à se charger dès le chargement de la page. C'est valable pour les vidéos un peu lourdes.
• poster="image.jpg" l'image sera affichée le temps que la vidéo se charge.
• loop="loop" oblige la vidéo à tourner en boucle.

Lorsque je mets une vidéo en ligne, c'est la syntaxe que j'utilise. Je pense qu'il est préférable de laisser le choix au visiteur de l'exécuter ou pas.

Maintenant, nous allons dire quel fichier vidéo nous allons charger. Les quatre lignes suivantes servent à ça. Là encore, la syntaxe est vraiment simple. src="video.mp4" indique le chemin et le nom de la vidéo. type="video/xxx" dit de quel format de vidéo il s'agit. Pour les vidéos, des types il y en a plus de 70. On appelle ça des types MIME (Multipurpose Internet Mail Extensions). Les trois que j'utilise dans l'exemple permettent à plus de 95% des navigateurs modernes de visualiser les vidéos directement dans une page HTML. Le problème, c'est qu'il est nécessaire d'avoir au moins trois versions de la vidéo plus une quatrième version pour les plus récalcitrants. J'ai choisi le format divx (qui est une version compressée de l'AVI car ça peut être lu par à peu près tout le monde sauf ceux qui tournent encore sur des systèmes en mode texte (Si si! ça existe encore). L'essentiel c'est que vous mettiez le format mp4 en premier sinon les iPhone, iPad et iPod ne pourront pas visualiser vos œuvres.

Si le format mp4 commence à être connu, webm et ogv peuvent rester étrangers à pas mal d'entre vous. Heureusement pour nous, on trouve sur Internet une foule de convertisseurs de vidéo. Si la plupart sont payants, il en existe quelques-uns qui sont gratuits et qui font les conversions de façon plus que correcte. Je vous donne l'adresse de miro-video-converter (mvc.exe) qui ne s'occupe que des formats qui nous intéressent. Son interface est un peu austère mais il est efficace et rapide.

 http://www.clubic.com/lancer-le-telechargement-369028-0-miro-video-converter.html 
Les deux liens ci-dessus envoient vers des pages qui donnent les types MIME. Les listes ne sont pas exhaustives et peuvent évoluer.

 https://www.iana.org/assignments/media-types/media-types.xhtml 

 http://assiste.com.free.fr/p/abc/a/types_mime.html 

Je ne doute pas un seul instant que nombre d'entre vous possèdent un certain talent. Si peu que vous montiez vos films pour en faire un seul, la taille de celui-ci peut rapidement prendre de l'ampleur. La seule solution possible est de proposer vos films en téléchargement. La plupart des fournisseurs d'accès à Internet, si ce n'est tous, limitent la taille des fichiers. Chez Free par exemple, la taille est limitée à 50 Mo.

La solution consiste à proposer les films en pièces détachées et de laisser les visiteurs remettre les films en état de marche sur sa propre machine.


J'ai ressorti un petit programme que j'avais fait il y a une dizaine d'années pour mon usage personnel et arrangé un peu afin qu'il soit utilisable par tout le monde. Il permet de découper de gros fichiers en morceaux plus petits. Il fonctionne sur des fichiers de 1.5 Go mais pas sur des fichiers de 3 Go ou plus. La limite est entre les deux mais je pense que c'est largement suffisant pour un usage courant.

Lorsque l'on a sélectionné le fichier que l'on veut découper, on indique la taille de chaque morceau en octets (50 millions dans l'exemple) et le nom des morceaux. Une seule lettre suffit. Si le bouton OK est activé, c'est que vous pouvez découper votre fichier. Lorsque vous cliquez sur OK, une fenêtre s'ouvre.Entrez le nom du fichier de sortie sans l'extension, ce sera la même que celle du fichier d'origine. Le programme va découper votre fichier et créer un fichier exécutable qui servira pour recoller les morceaux.

N'oubliez pas, lorsque vous mettez en ligne un tel fichier, n'oubliez pas d'y joindre le fichier batch afin que vos visiteurs puissent remettre votre fichier en un seul morceau.

Vous avez également la possibilité de mettre en ligne le fichier FragFich.exe. Le menu Fichier Recoller permet, comme son nom l'indique, de recoller les morceaux. Il suffit de donner le nom du fichier avec son extension et de sélectionner un des morceaux. Les extensions des morceaux vont de 1 à 9, de 01 à 99 ou de 001 à 999. Vous devez obligatoirement mettre la DLL pour que le programme fonctionne.

 Télécharger FragFich.exe            Télécharger la DLL 

---

 La vidéo        Les autres objets   Le son 

Si la vidéo est "l'objet" le plus utilisé, le son peut tenir une bonne place sur un site. Il fut un temps où Internet Explorer était pratiquement le seul navigateur (c'est loin d'être le cas aujourd'hui et c'est tant mieux!). Explorer contenait une balise <bgsound> qui n'a jamais été reprise. Celle-ci permettait d'avoir un fond sonore sur un site. Certains en ont usé voire abusé. Imaginez avoir la Marche de Sambre et Meuse dans les oreilles tout le temps que vous restez sur un site. Pas cool!

Nous allons voir comment mettre un son ou un morceau de musique de façon simple sur une page. Comme pour la vidéo, on va laisser au visiteur la possibilité d'écouter ou non le morceau que vous lui proposez.



La syntaxe est la même que pour la balise video. Le choix du format ne se pose pas vraiment. Le mp3 est devenu un standard reconnu par tous les supports. Son principal avantage est sa légéreté. Le fichier pommier.mp3 fait 6.45 Mo ce qui est acceptable avec les techniques actuelles. Le même fichier en wav (format non compressé), fait 207 Mo ce qui, pour beauccoup, serait insupportable. Les convertisseurs audio gratuits sont légion sur Internet, vous trouverez sans mal ce qui vous convient le mieux.

Le titre de la chanson est "L'histoire de Jean-François Pommier" C'est un morceau écrit, paroles et musique, et interprété par Pierre Nauche (mon frère). Avant de publier quoi que ce soit (musique, vidéo, photo ou texte dont vous n'êtes pas l'auteur, assurez vous d'avoir les autorisations nécessaires.

La musique de fond, bien que je n'en sois pas franchement partisan peut être intéressante dans certains cas. Les frames sont un moyen facile de mettre de la musique de fond. Le visiteur choisi s'il veut ou non du son. Autre avantage, si votre visiteur fait un passage rapide sur vos pages, votre morceau de musique ne sera pas interrompu brutalement pour redémarrer à son point de départ à chaque page visitée. Si vous choisissez la 9^ème symphonie de L.V. Beethoven (plus de 70 minutes), ça peut être frustrant pour un visiteur mélomane.

Lorsque l'on clique sur "Son ON" dans le menu à gauche, la musique commence et le lien devient "Son OFF". J'utilise deux fichiers menu identiques de façon à ce que, hormis le lien "Son ON/OFF", rien ne bouge. Le son est ajouté dans le deuxième fichier.


Le code ci-dessus est celui du fichier menu2.html. La balise audio est réduite au minimum. Il n'y a pas l'attribut "controls" afin qu'elle n'apparaisse pas à l'écran. Autoplay fait démarrer la musique tout de suite sans intervention du visiteur et loop permet de faire tourner la musique en boucle. C'est tout.

Lorsque vous mettez une musique en boucle, faites un fade in et un fade out (fondu d'entrée et de sortie) dessus afin que la musique ne commence pas brutalement. Si vous n'avez pas de logiciel pour faire ça, il en existe des gratuits que l'on trouve sur Internet. J'en ai essayé un qui à l'avantage d'être gratuit et en français ce qui n'est pas si courant :  http://www.nch.com.au/wavepad/fr/ . Si vous l'utilisez, avant de commencer, allez dans les options et passez en stéréo. Par défaut, il se met en mono.

---

 La vidéo        Les autres objets   Les autres objets 


Là encore, je vais aller au plus simple. Si vous avez regardé les deux pages sur les types MIME, vous avez pu constater qu'il y a le choix entre les différents types de fichiers. Je dois reconnaître que je n'en connais que très peu. Ça n'as pas franchement beaucoup d'importance car pour un site perso, la balise <object> n'est que rarement utilisée. C'est normal, la plupart des formats de fichier nécessitent un plugin pour pouvoir être affichés. C'est le cas sous Androïd. Vous trouverez une alternative pour les textes sur la page 1 de  Trucs/Astuces .





Les deux exemples peuvent sembler identiques. Le premier est un pdf et le deuxième un fichier texte. La seule chose qui change, c'est la façon d'indiquer le type de fichier. Allez comprendre pourquoi. A signaler qu'Opera bloque les pdf pour raison de "politique de l'entreprise". A noter également que si Safari ne connait pas les balises video et audio, il n'a pas de problème avec la balise object. Une autre chose à savoir à propos de Firefox; La dictée de Mérimée s'appelait Dictée_de_Mérimée.pdf et si le fichier s'afficait correctement en local, il ne passait pas en ligne. Il m'a suffit de le renommer DicteeDeMerimee.pdf pour que les choses s'arrangent.

 La vidéo        Le son