Discussion :

[rvm31]

Bonjour

l'info suivante peut intéresser les débutants en JS.
Pour tous ceux qui cherchent une solution simple d'afficher de la vidéo sous forme lightbox, il y a un soft nommé videolightbox avec une interface graphique. Ce soft génère du code automatiquement qu'il suffit d'intégrer dans votre page. (http://videolightbox.com/)
Pour les néophytes,dont j'étais il y a 3 jours, un light box permet d'afficher des médias dans un fenêtre popup au dessus de la page principale, en assombrissant celle ci.

Et peut être que sur ce forum quelq'un a une réponse à mon problème.
Pour les pros de JavaScript et de Jquery, dont je ne fait parti, connaissez vous le moyen de faire des liens relatifs différents de ceux fournit par videolightbox.
Lorsque dans ma page j'essaye d'afficher mon propre bouton pour appeler la vidéo je suis obligé de mettre un lien absolu pour que cela fonctionne.
Je souhaite ensuite que mes vidéos soit appelées dynamiquement via PHP dans ce même script, mais pareil cela ne fonctionne pas.
code HTML généré

Code :

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

1
2
3
4
5
6
7
8
9
10
<!-- Start VideoLightBox.com HEAD section -->
		<link rel="stylesheet" href="engine/css/videolightbox.css" type="text/css" />
		<style type="text/css">#videogallery a#videolb{display:none}</style>
 
			<link rel="stylesheet" type="text/css" href="engine/css/overlay-minimal.css"/>
			<script src="engine/js/jquery.tools.min.js"></script>
			<script src="engine/js/swfobject.js"></script>
			<!-- make all links with the 'rel' attribute open overlays -->
			<script src="engine/js/videolightbox.js"></script>
		<!-- End VideoLightBox.com HEAD section -->

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
 
<!-- Start VideoLightBox.com BODY section -->
 
<script type="text/javascript">
 
function onYouTubePlayerReady(playerId) { 
ytplayer = document.getElementById("video_overlay"); 
ytplayer.setVolume(100); 
} 
 
</script> 
<div id="videogallery">
	<a rel="#voverlay" href="engine/swf/player.swf?url=../../data/video/video1.mp4&volume=100" title="video1"><img src="data/thumbnails/video1.png" alt="video1" /><span></span></a><a id="videolb" href="http://videolightbox.com">Lightbox in Flash by VideoLightBox.com v1.11m</a>
	</div>
	<!-- End VideoLightBox.com BODY section -->

Je vous met ci-dessous une partie des codes générés par video lightbox.
Il génère 2 CSS overlay-minimal.css

Code css :

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
/* the overlayed element */
div#voverlay {
 
	/* growing background image */
	background-image:url(../images/white.png);
 
	/* dimensions after the growing animation finishes  */
	width:640px;
	height:480px;
 
	/* initially overlay is hidden */
	display:none;
 
	/* some padding to layout nested elements nicely  */
	padding:35px;
}
 
/* default close button positioned on upper right corner */
div#voverlay div.close {
	background-image:url(../images/close.png);
	position:absolute;
	right:5px;
	top:5px;
	cursor:pointer;
	height:35px;
	width:35px;
}
 
div#vcontainer{
	left:0;
	top:0;
	width:100%;
	height:100%;	
	background:url(../images/loading.gif) no-repeat 50% 50%;
}

videolight.css

Code css :

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
videogallery {
	width:100%;
	zoom:1;
}
#videogallery span{ display:block; }
#videogallery a{
	display:-moz-inline-stack;
	display:inline-block;
	zoom:1;
	*display:inline;
	position:relative;
	vertical-align:top;
	margin:3px;
	width:160px;
	font-family:Trebuchet,Tahoma,Arial,sans-serif;
	font-size:11px;
	font-weight:normal;
	text-decoration:none;
	text-align:center;
	opacity:0.87;
}
#videogallery a img{
	display:block;
	border:none;
	margin:0;
}
#videogallery a:hover{
	opacity:1;
}

3 fichiers Java Script
videolightbox.js

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
120
121
122
123
124
125
126
jQuery(function(){
	var $=jQuery;
	var swfID = "video_overlay";
 
	if(!document.getElementById("vcontainer")){
		$("body").append($("<div id='voverlay'></div>"));
		$("#voverlay").append($("<div id = 'vcontainer'></div>"));
	}
 
	$("#videogallery a[rel]").overlay({
		api:true,
 
		expose: (0?{
			color:'#131313',
			loadSpeed:400,
			opacity:0
		}:null),
 
		onClose: function(){
			swfobject.removeSWF(swfID);
		},
 
 
		// create video object for overlay
		onBeforeLoad: function(){
			// check and create overlay contaner
			var c = document.getElementById(swfID);
			if(!c){
				var d = $("<div></div>");
				d.attr({id: swfID});
				$("#vcontainer").append(d);
			};
 
			var wmkText="VideoLightBox.com";
			var wmkLink="http://videolightbox.com";
			c = wmkText? $('<div></div>'):0;
			if (c) {
				c.css({
					position:'absolute',
					right:'38px',
					top:'38px',
					padding:'0 0 0 0'
				});
				$("#vcontainer").append(c);
			};
 
			// for IE use iframe
			if (c && document.all){
				var f = $('<iframe src="javascript:false"></iframe>');
				f.css({
					position:'absolute',
					left:0,
					top:0,
					width:'100%',
					height:'100%',
					filter:'alpha(opacity=0)'
				});
 
				f.attr({
					scrolling:"no",
					framespacing:0,
					border:0,
					frameBorder:"no"
				});
 
				c.append(f);
			};
 
			var d = c? $(document.createElement("A")):c;
			if(d){
				d.css({
					position:'relative',
					display:'block',
					'background-color':'#E4EFEB',
					color:'#837F80',
  					'font-family':'Lucida Grande,Arial,Verdana,sans-serif',
					'font-size':'11px',
					'font-weight':'normal',
  					'font-style':'normal',
					padding:'1px 5px',
					opacity:.7,
					filter:'alpha(opacity=70)',
					width:'auto',
					height:'auto',
					margin:'0 0 0 0',
					outline:'none'
				});
				d.attr({href:wmkLink});
				d.html(wmkText);
				d.bind('contextmenu', function(eventObject){
					return false;
				});
 
				c.append(d);
			}
 
			// create SWF
			var src = this.getTrigger().attr("href");
 
			if (typeof(d)!='number' && (!c || !c.html || !c.html())) return;
 
			if (false){
				var this_overlay = this;
				// local player
				window.videolb_complite_event = function (){ this_overlay.close() };
				// youtoube
				window.onYouTubePlayerReady = function (playerId){
					var player = $('#'+swfID).get(0);
					if (player.addEventListener) player.addEventListener("onStateChange", "videolb_YTStateChange");
					else player.attachEvent("onStateChange", "videolb_YTStateChange");
					window.videolb_YTStateChange = function(newState){
						if (!newState) this_overlay.close()
					}
				}
			}
 
			swfobject.createSWF(
				{ data:src, width:"100%", height:"100%", wmode:"opaque" },
				// complete_event=videolb_complite_event() - for local player
				// enablejsapi=1 - for youtoube
				{ allowScriptAccess: "always", allowFullScreen: true, FlashVars: (false?"complete_event=videolb_complite_event()&enablejsapi=1":"") },
				swfID
			);
		}
	});
});

un jquerytools et un swoject que je rajouterais si vous en avez besoin pour comprendre ce long post.
merci à tous.

[rvm31]

j'ai résolu mon problème en mettant une variable contenant le chemin complet du fichier.

Code :

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

1
2
3
4
5
$lienvideo="../../$video";
 
<div id="videogallery">
	<a rel="#voverlay" href="engine/swf/player.swf?url='.$lienvideo.'&volume=100" title="video1"><img src="./images/bouton-popup.png" alt="video1" /><span></span></a><a id="videolb" href="http://videolightbox.com">Lightbox in Flash by VideoLightBox.com v1.11m</a>
	</div>