Étape 3 > Vidéo/Audio
Installation d'une Vidéo sur une page WEBSITE X5
Il existe plusieurs méthodes pour présenter des fichiers vidéos sur un site web conçu avec Website X5. Une première solution consiste à utiliser l'objet Vidéo/Audio, fourni par WX5, pour installer, paramétrer et afficher vos vidéos afin de les rendre accessibles à vos visiteurs. L'objet Vidéo/Audio offre deux options pour intégrer des vidéos sur un site web, et permet également d'incorporer des vidéos YouTube directement dans votre page.
La deuxième méthode passe par l'utilisation d'un objet Code_HTML pour y insérer le code nécessaire à la lecture et pour visionner vos chefs-d'oeuvre animés.
Si l'utilisation de l'objet Vidéo/Audio est beaucoup plus simple, en ce sens qu'elle utilise des outils faciles à comprendre et à mettre en place, l'emploi d'un objet Code_HTML permet un plus grand contrôle de l'environnement de vos vidéos. Vous pourrez, entre autres, éviter que vos vidéos n'empiètent sur l'affichage des sous-menus déroulants, ce qui n'est pas rien, déjà...
Vous trouverez ici des tutoriels qui vous expliquent chacune de ces options.
Attention: N'oubliez pas que des fichiers vidéos se comportent comme des images: votre navigateur tentera de les charger en mémoire avant de les afficher. Cela ne devrait pas poser de problème si vous affichez une seule petite vidéo sur une page. Par contre si vous en affichez plusieurs à la fois, certains visiteurs, qui ne bénéficient pas de connections rapides, pourraient ramer et être tentés d'aller voir ailleurs...
De plus, ce ne sont pas tous les navigateurs qui supportent tous les formats de fichiers vidéos. Certains formats nécessiteront l'addition de modules additionnels (plugins) pour autoriser la lecture.
Pour éviter ce problème, vous pouvez convertir vos vidéos au format FLV, (Flash Video) reconnu par la plupart des navigateurs. Le dernier tutoriel, sur cette page, explique comment intégrer des fichiers FLV à l'aide d'un objet Code_HTML dans une page web, puisque WX5 ne reconnaît pas ce format de fichier, dans un objet Vidéo/Audio.
Première méthode: la façon Website X5.
Utilisation d'un objet Vidéo/Audio et implantation directe d'un fichier vidéo.
Variante de la première méthode:
Utilisation d'un objet Vidéo/Audio en association avec un objet Code_HTML.
pour télécharger le fichier vidéo.
Ce tutoriel explique comment utiliser un objet Code_HTML pour automatiser le téléchargement de fichiers directement dans votre sous-dossier /files, sur votre serveur. Une astuce qui peut servir à bien d'autres fins...
Intégration d'une vidéo YouTube:
L'objet Vidéo/Audio permet d'intégrer des vidéos en provenance de YouTube dans votre page web.
Voir l'exemple
Intégration dans un objet Code_HTML:
Pour contrôler totalement l'environnement vidéo. Notez que ce tutoriel est conçu pour l'utilisation des vidéos au format FLV (Flash Video, un standard Flash, d'Adobe. Ce format possède l'avantage de pouvoir être joué sur n'importe quel navigateur si votre code page contient le "player" requis.
Le code HTML et le "player" requis dans le tutoriel sont disponibles ici, dans un fichier zip que vous devrez télécharger et décompresser au préalable sur votre disque dur. Le code est également disponible plus bas sur cette page.
Le fichier txt de l'archive vous expliquera également comment intégrer une vidéo YouTube dans un objet Code_HTML.
Le format passe-partout: FLV
Code HTML pour l'intégration d'une vidéo au formal FLV dans une page web:
<embed src="http://www.votreserveur.com/files/player.swf?file=http://www.serveur.com/files/votrevideo.flv&autostart=false"
wmode="transparent" width="320" height="240" quality="high" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
Assurez vous de faire les corrections nécessaires pour le bon fonctionnement du code.
Modifiez l'adresse http://www.votreserveur.com/files/player.swf pour y placer l'adresse de votre serveur.
Modifier le nom de fichier votrevideo.flv pour y inscrire le nom de votre fichier vidéo.
Vous pouvez aussi modifier les variables "width" et "height" pour ajuster la largeur et la hauteur de la vidéo présentée.
Ce code fonctionne pour des fichiers vidéos au format FLV seulement. Vous pouvez trouver sur le web quantité de logiciel pour convertir les fichiers vidéos d'un format d'origine à un autre format. Il est possible que cette conversion génère des pertes de qualité d'image et de son, à vous de voir.
Pour le présent tutoriel, j'ai utilisé le logiciel Any Video Converter, disponible gratuitement ici. Ce logiciel vient dans une version multilingue, incluant le français.