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 !
Articles similaires :
Commentaires :
29 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).
Merci pour tes info
Bonjour je cherche à mettre une vidéo de counter strike sur you tube pourriez vous m’ aider merci .
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?
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
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!!!
Merci beaucoup Pascal, ce tutoriel m’a bien aidé pour mon site web !
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 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
Merci beaucoup
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 !
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 ! ^^
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
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.
Bonsoir Pascal,
Merci beaucoup pour ce tutoriel et les autres pages que j’ai visitées.
Pour un novice comme moi, c’est formidable.
Après avoir galèré pas mal de temps je suis enfin tombée sur votre code pour insérer du flash et celui-ci fonctionne parfaitement.
Merci beaucoup!!!
Très intéressant !
A savoir aussi, pour ceux qui voudrait gagner de l’argent en diffusant leur vidéos sur leur site ou blog, le site Monelib ( http://www.monelib.com ) propose un player video permettant de faire payer la personne qui veut voir la vidéo, par telephone SMS ou CB.
Extra, tout ce que je cherchais depuis ce matin, sur une seul page…
Merci bp…
Trop top. Tu fais des heureux…
Tout ça est bien pratique pour ce qui est d’une insertion d’une vidéo d’un site web à note propre page web. merci !
Cependant, moi je veux insérer une vidéo à partir de mes propres fichiers. Je construis ma page WEB avec Microsoft Publisher 2010. Il existe une fonction d’insertion de Vidéo Clip mais cela ne fonctionne pas! La vidéo ne s’affiche pas lorsque je fais un aperçu de la page web.
Donc, est-il possible de bâtir un “Fragment de Code HTML” qui prendra ma vidéo et la substituer au fichier de l’index de ma page?
Existe-t-il un moyen d’insérer une vidéo sans passer par un code http://??????????????
Impeccable, je cherchais depuis deux heures sans solution. Mais ça marche sur explorer mais pas sur firefox, une idée ? Merci
Super. Que du bonheur pour les débutants comme moi. Merci
bonjour je suis sur le point de cree un site j ai suivi la solution pour windows media,et je n arive toujour pas a me debarasser de cet ecran noir,comment je peux faire ,note je travail avec NOTEPAD j ai donc fait un copier de la solution windows media que j ai coler dans NOTEPAD apres enregistrement sous… j ai cliquer sur mon icone la page s ouvre le texte est presensent mais l ecran du lecteur est toujour noir que faire en vous remerciant
re javais oublier de dire ,quand j ai fait le copier coller de la solution windows media dans NOTEPAD j ai biensur mis le nom de ma video,a la place de MAVIDEO,
re re jai remarquer apres avoir fait cette manipe que le plug-in windows media player a besoin de mon autorisation pour s executer ce que j ai fait ,es ce que c est normale?
Merci ça marche !! :)
Bonjour
Ma video est encodée par Adobe media encoder cs4 , format h264 codec main concept qui me donne la meilleure qualité image.
le son est en code AAC .
Sur mon Pc, je lis ce fichier image et son sans soucis.
Le fichier incorporé dans une page html avec la méthode préconisée pour Quicktime, fonctionne correctement mais PAS DE SON!
Quel est l’origine de ce problème?
Quelle solution ?
Cirrus