changement video integrer sans recharger la page

**maelzoom** · 25/08/2010, 22h51

bonjour,

alors pour commencer je suis auto former sur le html et css. Je connais peu et j'essaie d'apprendre au fur et a mesure que je modifie mes sites.

Voila pour mon site de court-métrage je voudrais faire une petite modification de la page d'accueil qui suis ;
http://www.court-vite-production.com...r/accueil.html

comme vous pouvez le voir il y a une vidéo en haut de la page. J'ai modifié la page pour avoir 3 colonnes (ca c'est fait)
gauche : menu toujours
centrale : tout le blabla et la vidéo
droite : des images des autres vidéos qu'on a fait

jusque la pas de probleme (j'ai utilise les colonne float).

Maintenant je voudrais que lorsque je clic sur une image de la colonne de droite, la vidéo centrale change, mais tout ca sans avoir a recharger la page, juste la vidéo centrale.

Alors est ce possible, en quel langage et avec quelle genre d'action? (je précise ma page est en html)

Je demande pas le code complet, juste une directive pour orienter mes recherches car la je sais vraiment pas quoi utiliser.

merci a vous (ne serais ce que d'avoir lu tout mon blabla)

**Vil'Coyote** · 26/08/2010, 09h57

utilisation d'ajax.
donc ajout d'un div ou se trouve ta vidéo, ajout d'un onclick sur tes image avec un index permettant de savoir quelle images est cliquée. appel d'une page php te renvoyant le code d'affichage de la vidéo.

**maelzoom** · 26/08/2010, 18h07

merci Vil'Coyote pour cette piste.

Je vais aller étudier tout ca

**Eric2a** · 26/08/2010, 21h56

Salut,

J'ai fait ça récemment avec des vidéos Youtube.

J'ai adapté le code ci-dessous pour ton cas avec 2 de tes vidéos Dailymotion...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Vidéo</title>
<style type="text/css" media="screen">
#video {
	display:block;
	margin:0px;padding:0px;
	width:480px;
	height:384px;
}
</style>
<script type="text/javascript">//<![CDATA[
function getId(id){
        var s=(typeof id==='string')?id:'';
        if((s!=='')&&(document.getElementById))return document.getElementById(s);
        return null;
}
function addLoadListener(func){
        if(window.addEventListener)
                window.addEventListener('load',func,false);
        else if(document.addEventListener)
                document.addEventListener('load',func,false);
        else if(window.attachEvent)
                window.attachEvent('onload',func);
        else if(typeof window.onload!='function')
                window.onload=func;
        else{
                var oldonload=window.onload;
                window.onload=function(){oldonload();func();};
        }
}
 
var flashObj=null;
var curMovie=null;
 
function removeFlash(){
        try{
                if(typeof flashObj=='object'){
                        while(flashObj.hasChildNodes())flashObj.removeChild(flashObj.lastChild);
                        flashObj.parentNode.removeChild(flashObj);
                }
        }catch(e){}
        finally{flashObj=null;}
}
 
function updateFlash(url){
        elt=getId('video');if(!elt)return false;
        var param;
        try{
                removeFlash();
                flashObj=document.createElement('object');
                param=document.createElement('param');
                param.setAttribute('name','wmode');
                param.setAttribute('value','window');
                flashObj.appendChild(param);
                param=document.createElement('param');
                param.setAttribute('name','menu');
                param.setAttribute('value','false');
                flashObj.appendChild(param);
                param=document.createElement('param');
                param.setAttribute('name','allowFullScreen');
                param.setAttribute('value','true');
                param=document.createElement('param');
                param.setAttribute('name','allowScriptAccess');
                param.setAttribute('value','always');
                flashObj.appendChild(param);
                param=document.createElement('param');
                param.setAttribute('name','movie');
                param.setAttribute('value',url);
                flashObj.appendChild(param);
                flashObj.setAttribute('type','application/x-shockwave-flash');
                flashObj.setAttribute('data',url);
                flashObj.setAttribute('width','480');
                flashObj.setAttribute('height','384');
                while(elt.hasChildNodes())elt.removeChild(elt.lastChild);
                elt.appendChild(flashObj);
        }catch(e){
                try{removeFlash();}
                catch(e){}
                finally{flashObj=null;}
        }
        finally{
                return (flashObj)?true:false;
        }
}
 
function updatePlayer(movie){
        if((typeof movie=='string')&&(movie!=='')&&(movie!==curMovie)){
                curMovie=movie;
                var url='http://www.dailymotion.com/swf/video/'+escape(movie)+'?additionalInfos=0';
                updateFlash(url);
        }
        return false;
}
 
function initVideo(){
        updatePlayer('xbukoq_pomme-d-amour_shortfilms');
        var elt;
        elt=getId('vid1');if(elt)elt.onclick=function(){updatePlayer('xbukoq_pomme-d-amour_shortfilms');return false;};
        elt=getId('vid2');if(elt)elt.onclick=function(){updatePlayer('xdiptk_erotica-tango_shortfilms');return false;};
}
addLoadListener(initVideo);
//]]>
</script>
</head>
<body>
<div id="video">
	<p>Envoy&eacute; par <a href="http://www.dailymotion.com/Court-Vite-Production">Court-Vite-Production</a></p>
</div>
<p><img src="image1.gif" width="120" height="90" id="vid1" alt="Pomme d'amour" /></p>
<p><img src="image2.gif" width="120" height="90" id="vid2" alt="Erotica Tango" /></p>
 
</body>
</html>

**maelzoom** · 26/08/2010, 23h36

merci a toi Eric2a

ce code marche a merveille! Reste plus qu'a intégrer tous ca sur ma page d'accueil et avec toute les vidéos.

Encore merci.

changement video integrer sans recharger la page

HTML

Vue hybride

Discussions similaires

Partager

Partager