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 :
4 Commentaires sur cet article jusqu'à présent
Ajouter un commentaire :
Cool ! merci pour les infos, ca marche bien !
very interesting, but I don't agree with you
Idetrorce
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 !
@ 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).