Posez votre question Signaler

Inserrer UNE Video dans une page HTML.

tom@ 136Messages postés 21 mars 2005Date d'inscription 14 septembre 2011Dernière intervention - Dernière réponse le 23 nov. 2011 à 00:07
Salut,
afin d' aider ceux qui veullent diffuser de la video ou du son sur le Net,
j' ai rassemblé quelques infos relatives au Streaming (Flux).

Exemple de streaming ici à ce lien :
http://starwars.com/ (laisser la page s' afficher, cliquer sur TRAILERS(Menu) puis sur un des liens pour voir une bande annonce de l' episode III)

Dans votre page HTML , il faut utiliser deux sortes de Balises HTML:
OBJECT et EMBED.
Trois technologies pourront etre utilisées pour afficher de l' audio ou de la video: Real Player , Quick Time et Windows Media Player. Chacun a son propre code HTML.

Pour REAL, le code standard à inserrer dans la page entre <BODY></BODY> est par exemple:

<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="160" HEIGHT="16"
CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">

<PARAM name="SRC" VALUE="le chemin complet du fichier">
<PARAM name="AUTOPLAY" VALUE="false">
<PARAM name="LOOP" VALUE="false">
<PARAM name="CONTROLLER" VALUE="true">

<EMBED type="audio/x-mpegurl" src="le chemin complet du fichier" autoplay="false" width="160px"

height="16px" loop="false" controller="true" PLUGINSPAGE="http://www.apple.com/quicktime/download/">
</EMBED>

</OBJECT>


La balise OBJECT inclut une balise EMBED pour assurer la compatibilité entre navigateurs.
On definit donc deux fois les paramètres du lecteur. Les paramètres sont passés à la balise OBJECT via des balises .
(OBJECT est reconnu par IE )

<PARAM name="" value=""> et à la balise EMBED par des paires nom="valeur"

LES PARAMETRES de EMBED pour Real:
---------------!-----------------------------------------
src ! URL
---------------!-----------------------------------------
AUTOPLAY ! true ou false
---------------!-----------------------------------------
CONTROLLER! true(panneau de controle) ou false
---------------!-----------------------------------------
TYPE ! (dans Embed) Type mine du fichier à lire
! mp3 => audio/mpeg
! m3u => audio/x-mpegurl
! au => audio/basic
! aiff=> audio/aiff
---------------!-----------------------------------------
Ce ne sont pas les seuls attributs possibles!

Pour Windows Media Player:

<OBJECT width=175 height=30 classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"

codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902"
standby="Chargement de Microsoft Windows Media Player..." type="application/x-oleobject">

<PARAM NAME="FileName" VALUE="le chemin complet du fichier">
<PARAM NAME="animationatStart" VALUE="true">
<PARAM NAME="transparentatStart" VALUE="true">
<PARAM NAME="autoStart" VALUE="false">
<PARAM NAME="showControls" VALUE="true">
<PARAM NAME="autoSize" VALUE="0">

<EMBED type="application/x-mplayer2" pluginspage = "http://www.microsoft.com/Windows/MediaPlayer/"
SRC="le chemin complet du fichier" width="175" height="30" AutoStart="false"

autosize="0" transparentatStart="true" animationatStart="true" showControls="true">
</EMBED>

</object>


Pour ajouter une image en fond d'un player "embed" sur une page Web, créez une cellule de tableau autour de votre player.
Pour cela, utilisez une feuille de style externe (CSS) ou un style directement dans la balise <td>, comme ceci :

<td style="background: url(fondv1.png) no-repeat;">

NB: Le paramètre "TransparentAtStart" doit être à 1 pour Windows Media.

Pour QuickTime :

<OBJECT CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" WIDTH="175" HEIGHT="30">

<PARAM NAME="CONTROLS" VALUE="ControlPanel">
<PARAM NAME="CONSOLE" VALUE="Clip1">
<PARAM NAME="AUTOSTART" VALUE="false">
<PARAM NAME="nologo" VALUE="true">
<PARAM NAME="NOJAVA" VALUE="true">
<PARAM NAME="SRC" VALUE="http://le chemin complet du fichier">
<PARAM NAME="LOOP" VALUE="false">

<EMBED SRC="le chemin complet du fichier3" WIDTH="175" HEIGHT="30"
TYPE="audio/x-pn-realaudio-plugin"
NOLOGO="true" NOJAVA="true" CONTROLS="ControlPanel" CONSOLE="Clip1"
AUTOSTART="false" LOOP="false"></EMBED>

</OBJECT>


Les attributs d' embed pour REAL: voir par exemple http://www.media-box.net/tuts.php?iddr=294

Quelques sites pour en savoir plus sur le streaming :

http://www.streaming-solutions.com/faq-streaming/
http://www.netcast.be/
http://www.video-en-ligne.com/
http://data.over-blog.com
http://www.repaire.net/navig/diff_internet/index.php
http://users.skynet.be/xyzebres/multimedialab/cours/streaming.htm

Voilà en gros !!))

Tom
Lire la suite 

Inserrer UNE Video dans une page HTML »

14 réponses
Réponse
+10
moins plus
Je me suis rendu compte que le code pour REAL est en fait celui de Quick Time.Et inversement.

Je les réécris pour corriger mon erreur :

Pour REAL c'est donc :
<OBJECT CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" WIDTH="175" HEIGHT="30">

<PARAM NAME="CONTROLS" VALUE="ControlPanel">
<PARAM NAME="CONSOLE" VALUE="Clip1">
<PARAM NAME="AUTOSTART" VALUE="false">
<PARAM NAME="nologo" VALUE="true">
<PARAM NAME="NOJAVA" VALUE="true">
<PARAM NAME="SRC" VALUE="http://le chemin complet du fichier">
<PARAM NAME="LOOP" VALUE="false">

<EMBED SRC="le chemin complet du fichier3" WIDTH="175" HEIGHT="30"
TYPE="audio/x-pn-realaudio-plugin"
NOLOGO="true" NOJAVA="true" CONTROLS="ControlPanel" CONSOLE="Clip1"
AUTOSTART="false" LOOP="false"></EMBED>

</OBJECT>


Et pour Quick Time :
<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="160" HEIGHT="16"
CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">

<PARAM name="SRC" VALUE="le chemin complet du fichier">
<PARAM name="AUTOPLAY" VALUE="false">
<PARAM name="LOOP" VALUE="false">
<PARAM name="CONTROLLER" VALUE="true">

<EMBED type="audio/x-mpegurl" src="le chemin complet du fichier" autoplay="false" width="160px"

height="16px" loop="false" controller="true" PLUGINSPAGE="http://www.apple.com/quicktime/download/">
</EMBED>

</OBJECT>


tom
laetysya - 30 juil. 2010 à 12:38
Bonjour j'aimerais savoir comment obtenir une lecteur qui puisse accepter plsieurs chant en même temps je suis novice en code HTML , voici ce que j'ai


<object CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" WIDTH="175" HEIGHT="30">
<param NAME="CONTROLS" value="ControlPanel">
<param NAME="CONSOLE" value="Clip1">
<param NAME="AUTOSTART" value="0">
<param NAME="SRC" ref value="http://users.skynet.be/ra044965/lefleuvededieu.mp3">
<param NAME="LOOP" value="0">
<param name="_ExtentX" value="4630">
<param name="_ExtentY" value="794">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000">
<EMBED SRC="le chemin complet du fichier3" WIDTH="175" HEIGHT="30"
TYPE="audio/x-pn-realaudio-plugin"
NOLOGO="true" NOJAVA="true" CONTROLS="ControlPanel" CONSOLE="Clip1"
AUTOSTART="false" LOOP="false"></EMBED></object>
gigi12 - 26 déc. 2010 à 22:21
SOUS SILVERLIGHT , il parait qu'il faut creer un fichier .xap qu'il faut mettre sur le serveur ..
Peut on avoir un exemple concret , surtout que sous silverlight , c'est multi plateforme.....
Merci de votre aide????
Ajouter un commentaire
Réponse
+2
moins plus
Bonjour

Avec IE7 ça marche très bien avec l'image en fond

Je viens de passer à Firefox et la fenêtre du Windows Media player avec l'image en fond ne s'affiche plus

Pourtant ça marche, mais invisible, j'ai pourtant bien activer le code visibilté sur "true" comme pour IE7

Quelqu'un a pu régler ce problème ,

Merci

Bien cordialement
Ajouter un commentaire
Réponse
+2
moins plus
Hello

J'ai eu la réponse avec Firefox ça ne marche pas à cause de :
<PARAM NAME="transparentatStart" VALUE="true">

valable uniquement pour IE
Ajouter un commentaire
Réponse
+2
moins plus
comment faire un site dans lequel je pourrais en tant qu'admin, heberger a partir de mon ordinateur une vidéo?
Ajouter un commentaire
Réponse
+2
moins plus
Bonjour
Apres avoir ete regarder les discussions en ce qui concerne l'integration de video sur une page web, vos conseils ont ete extremement judicieux et je vous en remercie. En plus de ce que vous proposez en ce qui concerne l'integration d'une video dans une page web, j'aimerai pouvoir realiser la chose suivante : J'ai plusieurs images en dessous d’un lecteur windows media qui sera le seul player de la page. Quand on clique sur l'image 1, j'aimerai que la video ( video1.wmv je precise le nom pour le code) se charge dans le lecteur windows media sans recharger la page. Quand on clique sur l'image 2, j'aimerai que la video (video2.wmv) se charge dans le lecteur windows media sans recharger la page et ainsi de suite. Et avant tout ça, j’aimerai qu’une video se charge automatiquement quand les gens arrivent sur la page d’index avec une compatibilite Internet Explorer et Firefox en ne voyant pas la fonctions Show status bar ( pas d'affichage pourcentage buffer ) mais je veux voir les commandes avance rapide--marche---arret--pause---mute---Pouvez vous me donner la demarche a suivre et le script adapte s'il vous plait? Je pense que le javascript va etre de rigueur pour certaines fonctions en particulier pour lire plusieurs videos avec un seul player. Je voudrais realiser ceci dans une page html car c'est le langage que j'utilise le plus.....Enfin j'ai essaye plusieurs clsid:
22D6F312-B0F6-11D0-94AB-0080C74C7E95
6BF52A52-394A-11d3-B153-00C04F79FAA6
etc....Soit les videos n'etaient pas redirigees correctement (dans le lecteur unique windows media player) soit elles ne marchaient pas, soit certaines fonctions active x n'etaient pas prises en compte....soit rien ne marchait !!! plus d'une semaine a galerer
Merci de votre reponse et surtout de votre aide
Cordialement
Ajouter un commentaire
Réponse
+2
moins plus
Merci beaucoup l'ami pour ces explications

Vive la balise <OBJECT>
Ajouter un commentaire
Réponse
+2
moins plus
Bonjour,
Je cherche à intégrer un quicktime VR à une page html et je rencontre deux problèmes :
- la barre de controller s'affiche bien en dessous mais elle ne comporte aucun bouton. Ils ne sont pas caché car meme si l'on clique là ou ils devraient se trouver, rien ne se passe.
- ma vidéo s'affiche à la taille voulue dans Safari uniquement. Dans Firefox et IE, la vidéo est coupé à son tiers supérieur.

mon code est :
<OBJECT classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="600" height="630" CODEBASE ="http://www.apple.com/qtactivex/qtplugin.cab">
<PARAM name="CONTROLLER" VALUE="true">
<embed src= "ile.mov" width = "600" heigth = "630" controller="true" pan="140" correction="none" > </embed>
</OBJECT>

Merci d'avance de votre aide
Ajouter un commentaire
Réponse
+2
moins plus
bonjour, j'ai utilisé le code suivant :

<OBJECT width=175 height=30 classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"

codebase="http://activex.microsoft.com/..."
standby="Chargement de Microsoft Windows Media Player..." type="application/x-oleobject">

<PARAM NAME="FileName" VALUE="le chemin complet du fichier">
<PARAM NAME="animationatStart" VALUE="true">
<PARAM NAME="transparentatStart" VALUE="true">
<PARAM NAME="autoStart" VALUE="false">
<PARAM NAME="showControls" VALUE="true">
<PARAM NAME="autoSize" VALUE="0">

<EMBED type="application/x-mplayer2" pluginspage = "http://www.microsoft.com/Windows/MediaPlayer/"
SRC="le chemin complet du fichier" width="175" height="30" AutoStart="false"

autosize="0" transparentatStart="true" animationatStart="true" showControls="true">
</EMBED>

</object>


Ma video ne s'affiche pas :s
Pourquoi ?

Merci d'avance
Ajouter un commentaire
Réponse
+1
moins plus
slt...a src="chemin de la video" u dw mettr le vrai chemin du genr src="desktop/azerty.mp4"
Ajouter un commentaire
Réponse
+0
moins plus
Voir ci dessous pour plus de clarté sur le problème

http://www.netvideolive.com/images/Image-0085.jpg
Ajouter un commentaire
Réponse
+0
moins plus
..
Ajouter un commentaire
Réponse
+0
moins plus
Il est important de prendre en compte le Doctype de la page !

Si la page est déclarée en HTML4.1, il faut abandonner la balise EMBED et imbriquer 2 balises OBJECT de cette façon :

<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="165" height="36">
<param name="src" value="adresse_de_votre_fichier.rpm">
<param name="controls" value="ControlPanel">
<param name="autostart" value="true">
<!--[if gte IE 7]> <!-->
<object type="audio/x-pn-realaudio-plugin"
data="adresse_de_votre_fichier.rpm" width="165" height="36">
<param name="controls" value="ControlPanel">
<param name="autostart" value="true">
</object>
<!--<![endif]-->
</object>

Si la page est codée pour HTML5 (qui gère la balise EMBED) le code serait :

<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="0" height="0">
<param name="src" value="adresse_de_votre_fichier.rpm">
<param name="controls" value="ImageWindow">
<param name="autostart" value="true">
<!--[if gte IE 7]> <!-->
<object type="audio/x-pn-realaudio-plugin"
data="adresse_de_votre_fichier.rpm" width="0" height="0">
<param name="controls" value="ImageWindow">
<param name="autostart" value="true">
</object>
<!--<![endif]-->
</object>

Pour en savoir + : http://opus100.free.fr/fr/realplayer.html
Ajouter un commentaire
Ce document intitulé « Inserrer UNE Video dans une page HTML. » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
5 extensions si vous voulez revenir à l'ancien Facebook