Bonjour,
je d�place ici une discussion initialement suivie dans le sous-forum php/mysql:
http://www.developpez.net/forums/d14...lecteur-video/

J'ai un lecteur vid�o int�gr� de youtube, et juste en dessous un carrousel de miniatures de vid�os. et ces vid�os sont stock�es dans une table "videos" :
table "videos": 
id_videos, 
yt_source : identifiant chez youtube de la video (par exemple si le lien d'int�gration de la video est http://www.youtube.com/embed/M7FIvfx5J10 je retiens le dernier param�tre donc "yt_source" = M7FIvfx5J10)
thumb : image miniature de la vid�o,
titre_video,
date_insert.
Le lecteur vid�o est dissoci� du carrousel,et donc l'ensemble lecteur/carrousel n'es pas un slider avec miniatures(thumbnails) qui renvoient au clic sur le slide choisi.
Le code php/mysql du carrousel ayant une <div id="carousel_wrapper"> marche tr�s bien.
Mais je peine � construire une syntaxe javascript dans le script du carrousel pour afficher dans l'iframe du lecteur la vid�o dont la miniature est cliqu�e.
Voici mon code php/mysql:
Code php : 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
<div id="main_videos">
	<div id="head_videos"><p>VIDEO</p></div>
	<div id="lecteur_videos">
		<div id="conteneur_lecteur">
			<div>
<?php
require("modules/config-db.php"); 
mysql_connect($adresse,$nom,$motdepasse);
mysql_select_db($database); 
$sql_v = "SELECT * FROM videos ORDER BY date_insert ASC ";
$resultat_v = mysql_query($sql_v);
$donnee_v = mysql_fetch_assoc($resultat_v);
$yt_source = $donnee_v['yt_source'];
if ( isset($yt_source)){
?>
				<iframe id="<?php echo $donnee_v['yt_source'];?>" type="text/html" width="553" height="337" 
				src="https://www.youtube.com/embed/<?php echo $donnee_v["yt_source"];?>" frameborder="0" allowfullscreen></iframe>
<?php
}
?>
			</div>
		</div>
	</div>
	<hr class="sep_vids">
	<div id="carousel_wrapper">
		<div id="carousel_2" class="carousel module">
			<ul>
<?php
if(isset($_GET['id_video'])){
	$id_video=htmlentities($_GET['id_video']);
	if($id_video!=0){
		$sql_v='SELECT * FROM videos WHERE id_video='.$id_video.'';
		$req_v=mysql_query($sql_v) or die(mysql_error());
		$data_v=mysql_fetch_assoc($req_v);
		echo $data_v['yt_source'];
		echo $data_v['thumb'];
		echo $data_v['titre_video'];
		echo date("d.m.Y G:i",strtotime($data_v['date_insert']));
	}
	else{
		echo "Erreur";
	}
}
else{ 
	while ( $donnee_v = mysql_fetch_assoc($resultat_v) ) {
?>
						<li>
							<a href="#<?php echo $donnee_v['yt_source'];?>">
								<?php echo $donnee_v["thumb"];?>
								<h3><?php echo $donnee_v['titre_video'];?></h3>
							</a>
						</li>
<?php
	}
}
?>
			</ul>				
		</div>
	</div>
	<hr class="sep_vids">
	<div id="plus_videos">
		<a><p>Plus de vidéos</p><span class="petite_fleche"></span></a>
	</div>
	<div id="social_videos">
	</div>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#carousel_2').carousel({
			});
		});
	</script>
</div>

et le code js du carrousel:

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
127
128
129
130
131
132
133
/*
 * jQuery Carousel Plugin v1.0
 * http://richardscarrott.co.uk/posts/view/jquery-carousel-plugin
 *
 * Copyright (c) 2010 Richard Scarrott
 *
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 * Requires jQuery v1.4+
 *
 */
 
// prototypal inheritance
if (typeof Object.create !== 'function') {
	Object.create = function (o) {
		function F() {}
		F.prototype = o;
		return new F();
	};
}
 
(function($) {
	// ie alias
	var headache = $.browser.msie && $.browser.version.substr(0,1)<9;
 
	// carousel
	var Carousel = {
		settings: {
			itemsPerPage: 5,
			itemsPerTransition: 5,
			noOfRows: 1,
			nextPrevLinks: true,
			speed: 'normal',
			easing: 'swing'
		},
		init: function(el, options) {
			if (!el.length) {return false;}
			this.options = $.extend({}, this.settings, options);
			this.itemIndex = 0;
			//this.itemIndex = 1;
			this.carousel_wrapper = el;
			this.runner = this.carousel_wrapper.find('ul');
			this.items = this.runner.children('li');
			this.noOfItems = this.items.length;
			this.setRunnerWidth();
			if (this.noOfItems <= this.options.itemsPerPage) {return false;} // bail if there are too few items to paginate
			this.insertMask();
			this.noOfPages = Math.ceil((this.noOfItems - this.options.itemsPerPage) / this.options.itemsPerTransition) + 1;
			if (this.options.nextPrevLinks) {this.insertNextPrevLinks();}
			this.updateBtnStyles();
		},
		insertMask: function() {
			this.runner.wrap('<div class="mask" />');
			this.mask = this.carousel_wrapper.find('div.mask');
 
			// set mask height so items can be of varying height
			var maskHeight = this.runner.outerHeight(true);
			this.mask = this.carousel_wrapper.find('div.mask');
			this.mask.height(maskHeight);
		},
		setRunnerWidth: function() {
			this.noOfItems = Math.round(this.noOfItems / this.options.noOfRows);
			var width =  this.items.outerWidth(true) * this.noOfItems;
			this.runner.width(width);
		},
		insertNextPrevLinks: function() {
			this.prevLink = $('<a href="#" class="prev"></a>')
								.bind('click.carousel', $.proxy(this, 'prevItem'))
								.prependTo(this.carousel_wrapper);
			this.nextLink = $('<a href="#" class="next"></a>')
								.bind('click.carousel', $.proxy(this, 'nextItem'))
								.appendTo(this.carousel_wrapper);
		},
		nextItem: function() {
			this.itemIndex = this.itemIndex + this.options.itemsPerTransition;
			this.animate();
			return false;
		},
		prevItem: function() {
			this.itemIndex = this.itemIndex - this.options.itemsPerTransition;
			this.animate();
			return false;
		},
		updateBtnStyles: function() {
			if (this.options.nextPrevLinks) {
				this.nextLink
					.add(this.prevLink)
						.removeClass('disabled');
				if (this.itemIndex === (this.noOfItems - this.options.itemsPerPage)) {
					this.nextLink.addClass('disabled');
				} 
				else if (this.itemIndex === 0) {
					this.prevLink.addClass('disabled');
				}
			}
		},
		animate: function() {
			var nextItem, pos;
			// check whether there are enough items to animate to
			if (this.itemIndex > (this.noOfItems - this.options.itemsPerPage)) {
				this.itemIndex = this.noOfItems - this.options.itemsPerPage; // go to last panel - items per transition
			}
			if (this.itemIndex < 0) {
				this.itemIndex = 0; // go to first
			}
			nextItem = this.items.eq(this.itemIndex);
			pos = nextItem.position();
 
			if (headache) {
				this.runner
					.stop()
					.animate({left: -pos.left}, this.options.speed, this.options.easing);
			}
			else {
				this.mask
					.stop()
					.animate({scrollLeft: pos.left}, this.options.speed, this.options.easing);
			}
			this.updateBtnStyles();
		}
	};
 
	// bridge
	$.fn.carousel = function(options) {
		return this.each(function() {
			var obj = Object.create(Carousel);
			obj.init($(this), options);
			$.data(this, 'carousel', obj);
		});
	};
})(jQuery);
voici une image de l'ensemble lecteur/carrousel:
Nom : capture.PNG Affichages : 351 Taille : 255,5 Ko

Ce sript js du carrousel est tout ce que j'ai trouv� de simple et adaptable � mon site, mais h�las ! il ne g�re pas le clic sur images et donc il faut y incorporer une fontion qui modifie le comportement de l'iframe du lecteur au clic.Mais je peine � construire une syntaxe javascript dans le script du carrousel pour afficher dans l'iframe du lecteur la vid�o dont la miniature est cliqu�e.
Quelqu'un peut-il me montrer comment faire si j'ajoute au js du carrousel
Code : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
$('#carousel_2 ul li a').click(function(e){
	// ici code pour lancement de la vidéo dans l'iframe du lecteur
});
Merci d'avance.