Aller au menu - Aller au contenu

Icône Insérer facilement une vidéo dans sa page web sans erreurs

Avatar
Par Avatar Zulounet
Mise à jour : 17/06/2010
Difficulté : Facile Facile Durée d'étude : 1 heure
1 128 visites depuis 7 jours, classé 107/786
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 !
Retour en haut
Sommaire du tutoriel :
Icône du chapitre
Retour en haut

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.
Retour en haut

Transplantation des données dans un code propre

Depuis un code YouTube



Prenons le code minimal valide d'une page web, et mettons-y uniquement la vidéo (pour faire simple).
Cela nous donne donc ceci :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<title>Ma vidéo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>

	<body>

<div>
	<object width="425" height="355">
		<param name="movie" value="http://www.youtube.com/v/_etwz7NkemE&hl=fr"></param>
		<param name="wmode" value="transparent"></param>
	<embed src="http://www.youtube.com/v/_etwz7NkemE&hl=fr" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
	</object>
</div>

	</body>

</html>


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 :

Code : HTML
1
2
3
4
5
<div>
	<object type="application/x-shockwave-flash" width="425" height="355" data="url">
		<param name="movie" value="url" />
	</object>
</div>


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 :

Code : HTML
1
2
3
4
5
<div>
	<object type="application/x-shockwave-flash" width="425" height="355" data="http://www.youtube.com/v/_etwz7NkemE&hl=fr">
		<param name="movie" value="http://www.youtube.com/v/_etwz7NkemE&hl=fr" />
	</object>
</div>


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 :

Code : HTML
1
2
3
4
5
6
<div>
	<object type="application/x-shockwave-flash" width="425" height="355" data="http://www.youtube.com/v/_etwz7NkemE&hl=fr">
		<param name="movie" value="http://www.youtube.com/v/_etwz7NkemE&hl=fr" />
		<param name="wmode" value="transparent" />
	</object>
</div>


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 :

Code : HTML
1
<!--[if lte IE 6 ]> Code que seuls IE6 et inférieurs vont exécuter <![endif]-->


On récapitule ! Notre code final sera donc :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div>
	<object type="application/x-shockwave-flash" width="425" height="355" data="http://www.youtube.com/v/_etwz7NkemE&hl=fr">
		<param name="movie" value="http://www.youtube.com/v/_etwz7NkemE&hl=fr" />
		<param name="wmode" value="transparent" />
	</object>

<!--[if lte IE 6 ]>
	<embed src="http://www.youtube.com/v/_etwz7NkemE&hl=fr" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
<![endif]-->
</div>


Ouf ! Enfin fini. ^^
Nous pouvons passer à la suite.

Pour plus d'infos sur les instructions conditionnelles, vous pouvez regarder ici.



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 :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div>
	<object width="420" height="336">
		<param name="movie" value="http://www.dailymotion.com/swf/x2mxmd&v3=1&related=1"></param>
		<param name="allowFullScreen" value="true"></param>
		<param name="allowScriptAccess" value="always"></param>
	<embed src="http://www.dailymotion.com/swf/x2mxmd&v3=1&related=1" type="application/x-shockwave-flash" width="420" height="336" allowFullScreen="true" allowScriptAccess="always"></embed>
	</object>

<br /><b><a href="http://www.dailymotion.com/video/x2mxmd_les-inconnustelemagouille_fun">Les Inconnus-Télémagouille</a></b>
<br /><i>envoyé par <a href="http://www.dailymotion.com/kiavel">kiavel</a></i>
</div>


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 » :

Code : HTML
1
2
3
4
5
<div>
	<object type="application/x-shockwave-flash" width="420" height="336" data="url">
		<param name="movie" value="url" />
	</object>
</div>


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 :

Code : HTML
1
2
3
4
5
<div>
	<object type="application/x-shockwave-flash" width="420" height="336" data="http://www.dailymotion.com/swf/x2mxmd&v3=1&related=1">
		<param name="movie" value="http://www.dailymotion.com/swf/x2mxmd&v3=1&related=1" />
	</object>
</div>


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 :

Code : HTML
1
2
3
4
5
6
7
<div>
	<object type="application/x-shockwave-flash" width="420" height="336" data="http://www.dailymotion.com/swf/x2mxmd&v3=1&related=1">
		<param name="movie" value="http://www.dailymotion.com/swf/x2mxmd&v3=1&related=1" />
		<param name="allowFullScreen" value="true" />
		<param name="allowScriptAccess" value="always" />
	</object>
</div>


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 :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div>
	<object type="application/x-shockwave-flash" width="420" height="336" data="http://www.dailymotion.com/swf/x2mxmd&v3=1&related=1">
		<param name="movie" value="http://www.dailymotion.com/swf/x2mxmd&v3=1&related=1" />
		<param name="allowFullScreen" value="true" />
		<param name="allowScriptAccess" value="always" />
	</object>
<!--[if lte IE 6 ]>
	<embed src="http://www.dailymotion.com/swf/x2mxmd&v3=1&related=1" type="application/x-shockwave-flash" width="420" height="336" allowFullScreen="true" allowScriptAccess="always"></embed>
<![endif]-->
</div>


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.
Retour en haut

Dernière étape

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 &amp; !
En remplaçant par &amp; chaque « & » contenu dans les liens, cela nous donne :


Code YouTube



Code : HTML
1
2
3
4
5
6
7
8
9
<div>
	<object type="application/x-shockwave-flash" width="425" height="355" data="http://www.youtube.com/v/_etwz7NkemE&amp;hl=fr">
		<param name="movie" value="http://www.youtube.com/v/_etwz7NkemE&amp;hl=fr" />
		<param name="wmode" value="transparent" />
	</object>
<!--[if lte IE 6 ]>
	<embed src="hhttp://www.youtube.com/v/_etwz7NkemE&amp;hl=fr" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
<![endif]-->
</div>



Code Dailymotion



Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div>
	<object type="application/x-shockwave-flash" width="420" height="336" data="http://www.dailymotion.com/swf/x2mxmd&amp;v3=1&amp;related=1">
		<param name="movie" value="http://www.dailymotion.com/swf/x2mxmd&amp;v3=1&amp;related=1" />
		<param name="allowFullScreen" value="true" />
		<param name="allowScriptAccess" value="always" />
		<param name="wmode" value="transparent" />
	</object>
<!--[if lte IE 6 ]>
	<embed src="http://www.dailymotion.com/swf/x2mxmd&amp;v3=1&amp;related=1" type="application/x-shockwave-flash" width="420" height="336" allowFullScreen="true" allowScriptAccess="always"></embed>
<![endif]-->
</div>


Code ni l'un ni l'autre



Eh bien… je ne peux pas savoir, moi ! :D
Remplacez simplement par &amp; 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 :

Valide XHTML !


Ce n'est pas le cas ?

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.
Retour en haut

Et pour les vidéos ne provenant pas d'un site web ?

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. ;)
Retour en haut

Bonus : avec du HTML 5

Avant d'aller plus loin, je dois préciser une chose. Le HTML 5 étant encore en développement, sa prise en charge par les différents navigateurs est inégale et souvent incomplète. Faites donc bien attention si vous voulez mettre cette solution en place sur votre site web : sa simplicité attrayante ne doit pas vous faire oublier qu'elle peut poser des problèmes d'incompatibilité.


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 :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!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. :(


Le cas de l'export direct de vidéos de sites spécialisés (YouTube, Dailymotion…) se traite théoriquement de la même façon, en mettant simplement l'URL de la vidéo dans src. Cependant, il faut que ce soit prévu pour, ce qui n'est pas gagné et actuellement rarement le cas.


Si vous êtes intéressé par le HTML5, vous pouvez consulter ce tutoriel spécialisé.
Retour en haut

Q.C.M.

Quelle ligne du code nous informe que ce qui suit est une vidéo flash ?
Quelle balise invalide en XHTML crée des erreurs ?
Par quoi faut-il remplacer chaque "&" contenu dans les liens pour rendre le code valide ?
Quel codec n'est pas pris en charge par tous les navigateurs parce qu'il est propriétaire ?

Statistiques de réponses au QCM

Retour en haut
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.
Retour en haut

Partager

Retour en haut
46 commentaires pour "Insérer facilement une vidéo dans sa page web sans erreurs"
Note moyenne : 3.70 / 4 (23 votes)
Pseudo Commentaire
Hors ligne zpierre_ # Posté le 10/08/2011 à 11:23:12

J'ai trouvé, le code à noter est automute=1 ! Par contre, contrairement à youtube, impossible de trouver l'option pour répétérer une ou plusieurs fois la même vidéo !
Hors ligne PatriX # Posté le 01/09/2011 à 14:50:42
Cogito ergo sum
Avatar

 Salut les Zér0s j'ai un souci avec les codes pour insérer les vidéos des hébergeurs Youtube et Daylimotion. Avec le lien de la vidéo du tuto ça marche mais une fois que je remplace ce dernier. Il n'y a plus rien qui s'affiche. Quelqu'un pourrait éclairer ma lanterne de néophyte s'il vous plaît?
Hors ligne PatriX # Posté le 01/09/2011 à 15:35:15
Cogito ergo sum
Avatar

 Merci @Romlig grâce à ton code, J'ai enfin pu insérer une vidéo Youtube sur ma page web. Il était temps je désespérais déjà après plus de 3h de recherches.
Hors ligne olgaya # Posté le 02/09/2011 à 08:03:09

Avis : Très bon

bonjour,
Merci beaucoup pour ce tutoriel, je n'y connaissait rien , et maintenant j'ai des vidéos sur mon site et en plus j'ai la validation du W3C, trop génial,
http://www.lapagedolga.goldzoneweb.info/accueil.html
site fait avec le tutoriel de M@teo, les vidéo c'est le tutoriel ici et le référencement c'est le tutoriel de Reivilo. maintenant il ne me reste plus qu'a peaufiner le tout.
Merci .
cordialement
Merci
cordialement.
Hors ligne remontees # Posté le 08/10/2011 à 18:12:59
Vive Symfony2 !
Avatar

 La partie sur Dailymotion n'est plus à jour et ne fonctionne plus, dommage !
Pensez à indiquer les messages qui vous ont aidé et à indiquer vos problèmes résolus ;)
XHTML 1.0/CSS <= 2 : IIIIIIIIII
PHP/MySQL : IIIIIIIIII
Javascript : IIIIIIIIII
HTML5/CSS3 : IIIIIIIIII



Citation
Je sais plus ce que j'écrivais ! :)
Qui que quoi dont où
Alors j'ai activé la prévisualisation automatique !
Citation : Moi
Eh oui

Et maintenant je suis tranquille !



Mon site : http://remontees.free.fr
 

Voir tous les commentaires
Ce tutoriel a été corrigé par les zCorrecteurs.