Si vous avez été amené à insérer une vidéo dans votre page web, vous aurez sans doute remarqué que des sites comme YouTube ou Dailymotion proposent ce service. C'est rapide et facile, mais si vous allez sur le W3C vérifier la validité, vous constaterez à vos dépens qu'il y a un certain nombre d'erreurs ! :( Je vais donc vous apprendre à créer votre propre code (valide) pour l'insérer, à partir de n'importe quel hébergeur de vidéo. :D N'attendons pas, c'est assez simple, donc allons-y !
Récupérer un code "sale" depuis un hébergeur de vidéos
La première chose à faire est, bien sûr, de récupérer un de ces fameux codes automatiques. Comme le code varie d'un site à l'autre, je vais en prendre 2 différents (un de YouTube et un de Dailymotion) pour l'exemple. :)
Sur YouTube
Prenons pour l'exemple cette page. Le code est situé sous la vidéo, vous l'obtenez en cliquant sur Intégrer. Il est même sélectionné automatiquement, si c'est pas beau la vie. :p Copiez ce code dans votre page web (vous en aurez besoin pour la suite).
Sur Dailymotion
Comme exemple, prenons cette page. Sous la vidéo, il y a une case intitulée embed code. C'est cela qu'on veut. Copiez ce code dans votre page web, une fois encore.
Remarque : object est une balise de type inline, c'est pourquoi il faut la mettre dans une balise de type block, comme <div>. ;)
Comme promis, nous allons transplanter les données dans un code propre !
Un code propre ? C'est quoi, ça ?
On pourrait dire aussi un code « de base ». Il s'agit en fait d'un code pour insérer une vidéo mais sans données à l'intérieur. Voilà un code de base :
Pas de panique, voyons ! :D L'attribut type="application/x-shockwave-flash" est là pour informer que l'intérieur de la balise object est une vidéo flash (format utilisé généralement par les hébergeurs de vidéo). Sans cette ligne, la vidéo ne fonctionnerait pas. Les attributs width et height sont (comme vous le savez sans doute déjà) là pour informer de la largeur et de la hauteur de l'objet (en l'occurrence, la vidéo). Ici, j'ai mis les mêmes valeurs que dans le code récupéré sur YouTube. L'attribut data indique (tout comme l'attribut value de la balise <param>) la source de la vidéo. Ces deux attributs devront donc avoir la même valeur.
Remarque : j'ai simplifié les balises <param></param> en une balise seule <param /> car les deux fonctionnent, et que c'est plus simple comme ça.
Eh bien, qu'attendons-nous ? Allons-y. :p La première chose à faire est de remplir la valeur des attributs data et value. Ici, j'ai marqué url pour montrer qu'il fallait y mettre une adresse. Copiez la valeur de l'attribut value du code récupéré sur YouTube et copiez-la sur les deux url. :) Cela donne ça :
Bon, on avance déjà. :) Ensuite, copiez la balise param du code « sale » ayant pour attribut name et pour valeur wmode. Collez-la au-dessous de la première balise param du code « propre ». Cela nous donne ça :
Observez maintenant la balise embed du code « sale ». En XHTML, elle n'existe pas, n'est donc pas valide, et cause donc des erreurs. :( C'était une balise qui avait été « inventée » en HTML 4, et que le W3C a donc supprimée lors du passage au XHTML. Pour plus d'informations, rendez-vous ici. Mais si vous regardez bien, vous constaterez quelque chose d'intéressant. Cette balise a pour attributs src, type, wmode, width et height. Et si vous observez votre code « propre », vous verrez que chacune de ces informations est déjà écrite quelque part !
Vous avez donc tout transplanté ! Seulement, il y a un hic. IE (6 et inférieurs) va encore une fois nous embêter. Lui n'arrive pas à lire le magnifique code que nous venons de réaliser. On va alors devoir ruser et laisser la balise embed, qu'il arrive bien à exécuter, dans une instruction conditionnelle, qui ne s'exécutera que pour lui. Et comme elle est déguisée en commentaire, notre code sera toujours valide ! On doit procéder de la manière suivante :
<!--[if lte IE 6 ]> Code que seuls IE6 et inférieurs vont exécuter <![endif]-->
Ouf ! Enfin fini. ^^ Nous pouvons passer à la suite.
Depuis un code Dailymotion
Bon, maintenant on recommence tout ! :p Enfin, ça ira beaucoup plus vite maintenant que vous connaissez les bases. Voici le code donné sur Dailymotion :
Les deux lignes après la balise de fin </object> sont des liens vers la vidéo sur Dailymotion et vers le profil de l'expéditeur. Vous pouvez les garder ou les supprimer (pour ma part, je garde généralement le premier mais pas le deuxième). Cependant, je vais les supprimer ici pour nous concentrer sur le code de la vidéo. ;)
Ici aussi, nous aurons besoin d'un code « propre » :
J'ai cette fois mis comme largeur et hauteur les valeurs du code récupéré sur Dailymotion. ;) Comme pour le code YouTube, la première chose à faire est d'indiquer la source de la vidéo dans le code de base, depuis une balise param du code de Dailymotion :
Voilà qui est fait. :) Ensuite, il suffit de transplanter toutes les balises <param> du code « sale » dans notre code « propre » (en les transformant en balises seules à l'occasion). Dans ce cas-ci, il y en a deux :
Voilà. ^^ Il ne reste plus que la balise <embed>. Comme avec le code YouTube, nous devons laisser la balise embed dans une instruction conditionnelle, ce qui nous donne au final :
PS : Vous pouvez mettre une balise <param name="wmode" value="transparent" /> pour éviter certains bugs d'affichage.
Et si mon code n'est ni YouTube ni Dailymotion ?
Dans ce cas-là, prenez le code de base (toujours le même) et mettez-y les bonnes données de largeur et de hauteur. Comparez les deux codes et transplantez les données des balises param comme avec les deux autres codes, et tout devrait fonctionner impeccablement, essayez donc ! :) Vous pouvez également (ce n'est pas une obligation), mettre une balise <param name="wmode" value="transparent" /> si elle n'existe pas, pour les mêmes raisons que pour le code Dailymotion.
N'oubliez pas de laisser la balise embed dans une instruction conditionnelle, comme pour YouTube ou Dailymotion.
Si vous allez tester votre page sur le W3C, vous verrez qu'il y a encore des erreurs. :( Et pour cause : il y a, dans votre code, des &.
C'est quoi, cette histoire ? Je dois les supprimer ?
Pas de panique. ^^ Comme l'a expliqué M@teo, on ne peut pas mettre de & dans les liens en XHTML. Il faut simplement les remplacer par & ! En remplaçant par & chaque « & » contenu dans les liens, cela nous donne :
Eh bien… je ne peux pas savoir, moi ! :D Remplacez simplement par & chaque « & ».
Et maintenant ?
Comment ça, « et maintenant » ? ^^ Eh bien, maintenant, vous pouvez aller tester votre page sur le W3C (en mettant le code dans une page web, évidemment :p . Vous devriez obtenir ceci :
Bon, cela veut dire que les erreurs viennent d'ailleurs, et je ne peux rien faire pour vous ! :lol: Mais bon, le W3C indique d'où elles proviennent, donc vous devriez pouvoir vous en sortir.
Vous voulez dire, des vidéos sur votre ordinateur que vous mettriez en streaming sur votre site ? Il y a là de quoi faire une excellente sous-partie. :p
Seulement, je vous demanderai de vous en remettre à ce tutoriel. Puisqu'il existe, autant en profiter. ;)
Insérer une vidéo en streaming depuis votre ordinateur en HTML 5
La démarche à réaliser est bien plus simple grâce à la fameuse balise video dont vous avez sûrement déjà entendu parler. ;) En prenant un code minimal (HTML 5, évidemment) et en supposant que vous possédez une vidéo appelée video.mp4 (d'autres formats pourraient aussi marcher) dans le même dossier que le fichier html, voilà ce que ça peut donner :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Test pour le site du Zér0</title>
</head>
<body>
<video src="video.mp4" controls>
Votre navigateur n'est pas compatible avec le HTML 5, désolé.
</video>
</body>
</html>
Quelques commentaires rapides sur le code :
Le doctype n'est évidemment pas le même qu'en xHTML 1.0.
Le mot-clef controls a été utilisé pour permettre à l'utilisateur de pouvoir mettre la vidéo en pause (et la faire démarrer !), choisir un moment précis à lire, etc. Ce serait tout de même dommage de ne pas en profiter. :D
On aurait par exemple pu rajouter le mot-clef autoplay pour faire démarrer la vidéo automatiquement dès le chargement de la page.
On aurait également pu préciser une largeur et une hauteur pour la vidéo, toujours avec les attribus width et height.
Le texte entre la balise ouvrante et la balise fermante s'affiche (théoriquement) si le navigateur n'est pas capable de lire la vidéo.
Si vous ouvrez ce fichier dans votre navigateur favori, vous devriez voir s'afficher la vidéo ! Seulement voilà : ça, c'est de la théorie. Tout dépend des codecs qui ont été utilisés pour réaliser la-dite vidéo. Avec le HTML 5, il n'y a plus besoin d'installer de plug-in sur l'ordinateur pour lire une vidéo, tout est pris en charge par le navigateur. Tout ? Voilà justement la question… La balise video ne demande aucune spécification de codec. Vous pouvez vérifier, on n'a à aucun moment spécifié quelque chose allant dans ce sens, contrairement au tutoriel de Rom2, auquel j'ai fait référence plus haut, qui parle de tout ça.
Vous pouvez dès lors distinguer le problème de taille qui se présente : en plus de devoir être compatible avec le HTML 5, le navigateur de vos visiteurs devra supporter le codec utilisé par votre vidéo. Deux sont principalement utilisés par les sites qui proposent des solutions en HTML 5. Premièrement, le H.264, utilisé par YouTube si vous activez le mode HTML 5 expérimental. C'est un codec propriétaire, pris en charge par Safari, Chrome, et Internet Explorer (à condition de posséder le plug-in Google Frame, pour ce dernier). Il est assez souvent préféré pour sa meilleure qualité et sa plus grande légèreté que son concurrent reconnu. Cependant, les éditeurs de logiciels qui l'utilisent doivent payer des redevances aux développeurs. La principale alternative est l' Ogg Theora, pris en charge par Firefox, Chrome, et Opera. Ce dernier est entièrement libre mais malheureusement pas supporté par tous les navigateurs. Et il existe encore d'autres codecs, comme le VP8 !
À cause de ce triste problème, proposer des vidéos avec du HTML 5 sur son site web est encore très hasardeux, et je ne peux que vous inciter à la prudence si vous décidez de le faire. :(
Voilà, vous pouvez maintenant créer votre propre code sans erreurs. :) Si vous avez envie de jouer avec les nouvelles technologies, vous pouvez créer plusieurs versions de votre site pour gérer les différents cas en HTML 5 ! Bonne chance.
