Insérer une vidéo

Version imprimable

06/07/2009, 23h59
sky88

Insérer une vidéo

bonjour tout le monde

comment je peux inserer une vidéo sur une image avec html

merci
07/07/2009, 09h26
Vil'Coyote

Salut,
tu peux expliciter stp? tu veux affiche une image animé? tu veux insérer une vidéo dans une page? c'est un peut fouillis.
07/07/2009, 09h54
sky88

merci,
j'ai une image et une vidéo je veux placer la video sur l'image
dans l'image j'ai laisser une partie vide pour mettre une vidéo je n'arrive pas à insérer la vidéo au dessus de l'image
07/07/2009, 11h30
Vil'Coyote

Ok,
Pourrais tu donner ton code html stp que l'on puisse voir où ça merdouille.

ok

voici mon code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<html>
 
<head>
<title>
titre
</title>
</head>
<body>
<img src ="Images/a.jpg" height="100%" width ="100%" >
 
<object data="video1.swf" type="video/x-msvideo" width="450" height="400" border="0" >
  <param name="filename" value="video1.swf" />  
  <param name="autostart" value="false" />  
  <param name="loop" value="true" />  
 
</object>
</body>
</html>

comment je peux mettre la video sur l'image

07/07/2009, 12h27
FoxLeRenard

Citation:

Envoyé par sky88

ok
comment je peux mettre la video sur l'image

Il faut mettre des Z-Index pour que la vidéo soit sur l' image
en plus il me parait préferable de mettre l'objet dans un DIV centré. ;)

escusez ... texte corrigé
07/07/2009, 12h50
sky88

je n'ai pas compris
07/07/2009, 12h56
ledisciple

Citation:

Envoyé par FoxLeRenard

Il faut mettre des Z-Index pour que la vidéo soit sur l' image
en plus il me parait préferable de mettre l'objet dans un DIV centré. ;)

http://pbnaigeon.developpez.com/tuto...s-de-base/#LVI
07/07/2009, 14h09
Vil'Coyote

Citation:

Envoyé par sky88

je n'ai pas compris

en gros ce que FoxLeRenard essais de te dire c'est que des balise type <img>, <embed>, <div> etc .... ne sont pas fait de base pour évoluer l'une au dessus de l'autre comme tu souhaite le faire. pour cela il faut utiliser des propriété de css tel que z-index permettant d'afficher des élément en fonctio du numéro de plan que l'on lui définie et pour cela, il faut intégrer ton image dans un div et de même pour ton objet vidéo donc tu n'as plus qu'a lire les liens postés par ledisciple.
07/07/2009, 14h21
sky88

merci à vous je vais voir les tutos et essayer de faire ce que je veux si j'aurai des problèmes dans mon code je reviens

merci à vous tous

bn j'ai trouvé un problème

dans le fichier CSS j'ai

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 
#element1 {
	background-color:#0066FF; /* bleu */
	position:absolute;
	top:15px;
	left:15px;
	z-index:1;
 
	}
#element2 {
/*	background-color:#FF66CC; /* rose */
	position:absolute;
	top:270px;
	left:480px;
    z-index:2;
	}

et dans le fichier .html j'ai

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Document sans nom</title>
</head>
<body>	
<div id="element1"> 
 <img src="Images/8.jpg" width="100%" hight="100%"> 
 </div>
<div id="element2">
 
<object data="o1.swf" type="video/x-msvideo" width="320" height="240" border="0" style="border-color:#3a3a3a" > 
  <param name="filename" value="o1.swf" />  
  <param name="autostart" value="false" />  
  <param name="loop" value="true" />  
</object>
 
</div>
</body>
</html>

mon problème c'est que j'ai pas pu avoir l'image sur toute la page meme si j'ai fait

Code:

1
2
 
width="100%" hight="100%"

et comment je peux mettre une bordure à mon fichier flash

merci à vous

Citation:
Envoyé par sky88
bn j'ai trouvé un problème
Code:

1 2 width="100%" hight="100%"
pour commencer :aie:
Code:

1 2 width="100%" height="100%"
de plus ton image ne fais que 858 * 981 bref elle n'est pas très grande. donc ça ne convrira pas toute la page. (surtout pour les grand format d'écran)

Citation:

Envoyé par sky88

#element2 {
/* background-color:#FF66CC; /* rose */
position:absolute;
top:270px;
left:480px;
z-index:2;
}
Code:

1 2 3 4 5 6 7 8 9 #element2 { /* background-color:#FF66CC; /* rose */ position:absolute; top:270px; left:480px; z-index:2; border:15px solid red; /*taille, style de bordure, couleur (+ d'info sur :google2:) }