Comment insérer une vidéo dans une page web ou sur un blog ?
Qui ne souhaite pas partager une vidéo souvenir des dernières vacances en famille, les premiers pas de votre enfant ou encore un petit week-end entre amis ? Pour mettre une vidéo sur son blog ou une page web, il faut tout d'abord se poser la question de l'hébergement de cette vidéo. Est ce que je possède un espace web pour stocker ou héberger ma vidéo ?
Je n'ai pas d'espace de stockage pour ma vidéo :
Je vous conseille d'utiliser les plateformes telles que YouTube, Dailymotion ou Google Vidéo, la procédure est simple et pour un tutoriel complet, cliquez simplement sur la plate-forme de votre choix. Cependant, dans le cas où vous ne souhaiteriez pas utiliser ces sites de partage de vidéo, vous pouvez toujours utiliser des sites offrant des services d'hébergement qui autorisent le "hot link" (lien direct vers le fichier entraînant l'utilisation de bande passante du site hébergeur, pour plus de détails voir cette définition) et je vous conseille de lire la fin du post "Héberger une vidéo sur internet ?"
J'ai un espace de stockage pour ma vidéo :
Pour simplement mettre un lien vers votre vidéo :
Afficher un lien et permettre à vos visiteurs de télécharger la vidéo :
<a href="http://mavideo.avi">Voir ma vidéo</a>
http://mavideo.avi : mettre l'URL (adresse internet) de votre vidéo
Voir ma vidéo : entrez le texte que vous souhaitez voir apparaître sur votre page web ou blog.
Pour intégrer la vidéo dans la page :
Il faut à présent se soucier du format de votre fichier vidéo. Est-ce que l'extension du fichier est : .avi, .mov, .wmv ou .rm ? En fonction du type de fichier, les lignes de codes vont varier. Pour insérer une vidéo dans une page, il existe également 2 types de codes html, ceux avec <embed> (qui est la vieille méthode) et ceux avec <object> (méthode standard pour être lu dans tous les navigateurs) que je vous donnerai ci-dessous.
Voici les différentes options que vous pouvez changer pour paramétrer l'affichage de votre vidéo :
SHOWCONTROLS ou CONTROLS="true" ou "1" le panneau de contrôle de la vidéo est affiché ; "false" ou "0" le panneau de contrôle de la vidéo ne s'affiche pas.
LOOP="true" ou "-1" la vidéo est lue indéfiniment ; "false" ou "1" le vidéo est lue une seule fois.
AUTOSTART ou AUTOPLAY="true" ou "1" la lecture du fichier vidéo commence automatiquement ; "false" ou "0" le bouton lecture devra être pressé pour voir la vidéo.
HEIGHT="260" et WIDTH="320" définissent la hauteur et la largeur de la vidéo.
- Pour Windows Media : (.wmv / .wma / .avi / .mpg / .mp3 / .mp4) :
<object width="320" height="260"
classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
codebase="http://activex.microsoft.com/activex/controls/ mplayer/en/nsmp2inf.cab#Version=6,4,5,715"
standby="Chargement…"
type="application/x-oleobject">
<param name="filename" value="http://mavideo.wmv">
<param name="autostart" value="0">
<param name="showcontrols" value="1">
<embed name="video1" width="320" height="260"
type="application/x-mplayer2"
pluginspage = "http://www.microsoft.com/windows/mediaplayer/"
src="http://mavideo.wmv"
autostart="0" showcontrols="1">
</embed></object>
- Pour Real (.ram / .rm / .smi / .mp4 / .mp3 / .mpg / .rm) :
<object width="300" height="230"
classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" >
<param name="console" value="video">
<param name="controls" value="ImageWindow">
<param name="autostart" value="false">
<param name="src" value="http://mavideo.ram">
<embed width="300" height="230"
src="http://mavideo.ram"
type="audio/x-pn-realaudio-plugin"
controls="ImageWindow" console="video"
autostart="false">
</embed></object>
Si vous souhaitez afficher les boutons de contrôle, veuillez ajoutez en plus (en-dessous du précédent) le code suivant :
<object width="300" height="50"
classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">
<param name="console" value="video">
<param name="controls" value="controlpanel">
<param name="src" value="http://mavideo.ram">
<embed width="300" height="50"
src="http://mavideo.ram"
type="audio/x-pn-realaudio-plugin"
controls="controlpanel" console="video">
</embed></object>
- Pour Quicktime (.qtl / .mov / .mpg / .mp4 / .mp3) :
<object width="340" height="260"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="http://mavideo.mov">
<param name="autoplay" value="false">
<param name="controller" value="true">
<embed width="340" height="260"
src="http://mavideo.mov"
type="video/quicktime"
autoplay="false"
controller="true">
</embed></object>
- Pour Flash (.swf) :
<object id="flash_video" align="middle" width="320" height="240"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="http://mavideo.swf" />
<param name="play" value="true" />
<param name="loop" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="http://mavideo.swf" quality="high" bgcolor="#ffffff" width="320" height="240" play="true" loop="false" name="flash_video" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</embed></object>
- Pour Flash (.flv) :
<object id="monFlash" type="application/x-shockwave-flash" data="http://resources.neolao.com/download/flash/components/player_flv.swf" width="320" height="240">
<param name="movie" value="http://resources.neolao.com/download/flash/components/player_flv.swf"/>
<param name="FlashVars" value="flv=http://mavideo.flv&width=320&height=240"/>
</object>
- Pour DIVX (.divx / .avi) :
Il faut que le fichier vidéo ait été encodé en DIVX
<object width="485" height="297" codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab">
<param name="autoplay" value="false" />
<param value="zero" name="mode" />
<param value="false" name="allowContextMenu" />
<param name="src" value="http://mavideo.divx" />
<param name="custommode" value="Stage6" />
<param name="showpostplaybackad" value="false" />
<embed width="485" height="297" type="video/divx" src="http://mavideo.divx" pluginspage="http://go.divx.com/plugin/download/" showpostplaybackad="false" custommode="Stage6" autoplay="false"></embed>
</object>
Je mentionne de nouveau qu'à la place de http://mavideo.mov , il faut mettre l'URL (adresse internet) de votre vidéo.
N'hésitez pas à laisser vos commentaires !
Cliquez ici pour partager cet article avec vos amis !
Écrit par PascalArticles similaires :
Commentaires :
18 Commentaires sur cet article jusqu'à présent :
Bonsoir Pascal,
Merci beaucoup pour ce tutoriel et les autres pages que j'ai visitées.
Pour un novice comme moi, c'est formidable.
Bonjour,
Je voudrais insérer une vidéo sur un site web mais je n'y arrive pas. Le format de la vidéo est IFO. Donc comment puis-je faire ? Je ne sais pas du tout et tout ce que je tente de marche pas. Merci d'avance pour une idée de votre part.
Bonjour Pascal.
Et merci pour toutes ces informations.
J'ai essayé le code que tu indiques sur un champs HTML sur mon site en construction pour les fichiers .swf et ça marche parfaitement.
Mais avec les fichiers swf mes vidéos sont trop lourdes, je les ai donc générées en .mp4 et là c'est OK pour le débit.
Par contre je n'arrive à lire le fichier mp4 avec le code que tu indiques:
Le lecteur windows media me dit que le format mp4 n'est pas reconnu.
Je peux lire ces fichiers mp4 en utilisant le lecteur Sothink FLV Player. Par contre je ne connais pas le classid ni le codebase à utiliser pour ce lecteur.
Le connaitrais-tu ou a tu une autre solution pour lire les MP4 ?
Je suis sous windows vista.
Encore merci pour tes exemples.
Thierry
Alors….
Le "plugin" installé, en fait, se révèle être Quick time tout court. Hum, sous IE, j'ai d'abord l'icone QT, puis un Zolie carré tout noir ! Et sous FF, juste toujours la même chose "plugin manquant, cliquez pour installer…", je clique, et installation échouée, avec marqué 'indisponible'…. Enfin bon, ça marche, euh, pas trop top ! ^^
Hum, j'ai essayé ceux que je pouvais, celui pour *.flv et celui pour *.mov ;
Alors, la vidéo *.flv s'affiche correctement, mais je n'ai pas de son ! Et pour la *.mov, sous IE rien ! Sous FF, plugin manquant, en train de se dl, 30 Mo avec une connexion de dl de 20 Ko/s… :-°
Enfin bon, je ferais un autre post pour parler de sous FF !
Merci beaucoup
Merci pour vos conseils.
Dans "mon cas", une partie fonctionne à merveille.
Mon "site web" - pour le moment purement local sur mon disque "C:/" est un album de famille, qui comporte du texte,des photos et des vidéos. Il est destiné à créer un CD à diffusion restreinte. Les éssais de gravure fonctionnent. Les liens entre les pages, les titres, les photos restent opérationnels sur le CD gravé.
Il est conçu sur un PC portable sous XP, avec "Publisher", un logiciel de la suite Microsoft Office 2003. J'utilise, sous Publisher, la commande "publier sur le Web" et j'obtiens un dossier "machin_fichiers" et un logo "machin.htm" qu'Internet Explorer ouvre parfaitement avec toutes les qualités fonctionnelles d'un site Internet.
Sur la page où je veux donner l'accès à la vidéo, j'avais jusqu'à présent créé un raccourci vers la vidéo *.AVI, placée dans le dossier
"Machin_fichiers". Le raccourci ouvre le lecteur W.M.P. et lit la vidéo.
Mais pour la mise en page, je voudrais que la vidéo soit visible "dans la page", à un endroit désigné par moi.
Dans mon fichier de construction Publisher, j'ai inséré, à la page et au lieu voulus, comme "fragment de code html" les lignes de code que vous proposez. Puis j'ai enregistré mon doc. publisher avec la commande :" enregistrez pour le web".
J'obtiens, à la lecteure par I.E. une page parfaite, avec le lecteur bien matérialisé, mais je ne sais pas du tout quoi écrire dans le fragment de code fourni par vous pour désigner le clip à lire (qui se trouve toujours sur mon disque "C", donc pas une adresse html.
Que dois-je faire, en pratique.
Merci pour vos conseils appréciés de tous.
Un petit mail personnel m'aviserait utilement de retourner sur le forum.
Cordialement
Raymond
bonjour et merci pour ton tuto qui m'a aidé dans une partie.
ce que je voudrais c est faire un lecteur vidéo et un système comme un juke box pour que le visiteur puisse choisir une des treizes vidéos que j'ai a leur disposition. peux tu m'aider stp
merci d'avance
Merci beaucoup Pascal, ce tutoriel m'a bien aidé pour mon site web !
salut
bonne et heureuse année 2009!!!
je te felicite et t'encourage. tous ces codes sont ok propre et sans tache.
pour win media plaer pas de probleme, j'arrive a inserer plusieurs video différente dans la meme page
pour les autres lecteur c'est la meme video qui s'affiche meme avec les noms differents.
merci et du courage!!!
Tout d'abord Bonne Année 2009,
Je suis débutant dans ce domaine et j'ai apliqué les codes que t as données dans ces exemples,
malheureusement à chaque fois j'ai la bannière de QuickTime ou un carré noir à l'emplacement de Media player, mis toujoursavec l mntion "no video"
Ci-joint mon code qe tu peux vérifier avec le site que j'ai donné ci-dessus,
En revanche, si je fais avec href, ça marche.
Merci d'avance,
——————————————————————–
Testvideo
FilmOngBa
Bonjour, ton code fonctionne a merveille, mais j'ai cependant un soucis…
je ne trouve pas le code html pour faire en sorte que le visiteur soit redirigé automatiquement a la fin de la vidéo…
j'ai deja essayé avec un timer, malheureusement, la vidéo ne se charge pas a la meme vitesse chez tout le monde….
peux-tu m'aider?
Bonjour je cherche à mettre une vidéo de counter strike sur you tube pourriez vous m' aider merci .
Merci pour tes info
@ Richard
Après avoir lu quelques posts sur des forums, il semble que ce soit dû à Quicktime et notamment au plugin qui fonctionne avec le navigateur. Certaines personnes ont des problèmes et pour d'autres, c'est parfait. Essaye de visionner tes vidéos avec un navigateur internet différent (Firefox, Internet Explorer 7).
Bizarre,
lorsque j'utilise le code pour publier du .mov sur mon site cela fonctionne (mais les contrôles n'apparaisse pas sur le lecteur Quicktime), et par contre lorsque je poste dans un blog cela ne fonctionne pas.
Seul le logo Quick time apparait sur le blog.
Une idée ?
Merci encore pour ces codes !
very interesting, but I don't agree with you
Idetrorce
Cool ! merci pour les infos, ca marche bien !