Récupérer le contenu d'une div enfante (h1) si click sur une div parente (li)
Bonjour,
J'ai une page vidéos inspirée de ce site: http://www.donaukurier.de/videos/
Dans la partie supérieure (<div id="supra">), il y a le lecteur de youtube (<div id="player_lecteur">)et une div titre de la vidéo en cours de lecture(<div id="player_title">).
Dans la partie inférieure (<div id="infra">), il y a la liste des vidéos.
Les champs de ma table "videos" sont:
- id_youtube : id, primary-key, auto-increment,
- yt_source: identifiant de la vidéo chez youtube (ex: si l'adresse de la vidéo chez youtube est https://www.youtube.com/embed/a1b2c3d4e5, alors yt_source = a1b2c3d4e5),
- medium : image miniature de la vidéo
- titre_video: titre de la vidéo ,tinytext (ex: reportage sur la faune aquatique du lac Baikal)
- date_insert: date d'insertion,
- duree: durée de la vidéo.
La liste des vidéos est affichée sous forme d'onglets , et chaque onglet a plusieurs slides.
Au démarrage, le lecteur affiche la vidéo la plus récente, et dessous son titre.
Quand on click sur une miniature dans la liste des vidéos, elle s'éxécute dans le lecteur, et j'aimerais pouvoir afficher son titre dessous.
N'étant que débutant, et apprenant sur le tas grâce aux forums comme celui-ci, je voudrais savoir comment m'y prendre avec JavaScript ou en Php-MySql.
Voici mon code de la page videos.php. Il est abrégé et dépouillé des blocs hors sujet pour ne pas faire long:
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
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
| <?php
require("../modules/config-db.php");
mysql_connect($adresse,$nom,$motdepasse);
mysql_select_db($database);
mysql_query("SET NAMES 'utf8' ");
?>
<div id="container_videos_playlist">
<div id="supra">
<div id="player_container">
<div id="player_wrap">
<div id="player_lecteur">
<?php
$sql = "SELECT * FROM videos ORDER BY date_insert DESC LIMIT 0,1";
$resultat = mysql_query($sql);
while ( $donnee = mysql_fetch_assoc($resultat) ) {
?>
<iframe type="text/html" width="548" height="338" src="https://www.youtube.com/embed/<?php echo $donnee['yt_source']; ?>" frameborder="0" allowfullscreen></iframe>';
<?php
}
?>
</div>
<div id="player_title">
<?php
$sql = "SELECT * FROM videos ORDER BY date_insert DESC LIMIT 0,1";
$resultat = mysql_query($sql);
while ( $donnee = mysql_fetch_assoc($resultat) ) {
?>
<h1><?php echo $donnee['titre_video']; ?>"</h1>
<?php
}
?>
</div>
<script>
var identifiant;
function lancer(identifiant){
document.getElementById('player_lecteur').innerHTML = '<iframe type="text/html" width="548" height="338" src="https://www.youtube.com/embed/'+identifiant+'?autoplay=1" frameborder="0" allowfullscreen></iframe>';
//document.getElementById('player_title')????????????????????
}
</script>
</div>
</div>
</div>
<div class="bloc_infra">
<div class="title_infra">
<div class="tabs_infra" id="tabs_infra1">
<a href="#sport_loisirs">Sport / Loisirs<span class="petite_fleche"></span></a>
<a href="#people_celebrites">People / Célèbrités<span class="petite_fleche"></span></a>
</div>
</div>
<div class="content_infra">
<div id="sport_loisirs">
<div id="carrousel_1">
<div id="slide1" class="slide">
<ul>
<?php
$sql = "SELECT * FROM videos WHERE rubrique='Sport / Loisirs' ORDER BY date_insert DESC LIMIT 0,8";
$resultat = mysql_query($sql);
while ( $donnee = mysql_fetch_assoc($resultat) ) {
?>
<li id="<?php echo $donnee['yt_source']; ?>" onclick="lancer(this.id);">
<a href="#">
<div class="img_play">
<?php echo html_entity_decode($donnee['medium']);?>
<span class="play_overlay"><img src="../mediatheque/videos/yt_play_medium.png" /></span>
</div>
<div class="grille_titre">
<div class="ttl"><h1><?php echo stripslashes($donnee['titre_video']);?></h1></div>
<span class="date_mise_en_ligne"><?php echo date("d.m.Y",strtotime($donnee['date_insert']));?></span>
<span class="duree"><?php echo stripslashes($donnee['duree']);?></span>
</div>
</a>
</li>
<?php
}
?>
</ul>
</div>
<!----------------ici autres slides de l'onglet_1-------------->
</div>
</div>
<div id="people_celebrites">
<div id="carrousel_2">
<div id="slide1" class="slide">
<ul>
<?php
$sql = "SELECT * FROM videos WHERE rubrique='people / Célèbrités' ORDER BY date_insert DESC LIMIT 0,8";
$resultat = mysql_query($sql);
while ( $donnee = mysql_fetch_assoc($resultat) ) {
?>
<li id="<?php echo $donnee['yt_source']; ?>" onclick="lancer(this.id);">
<a href="#">
<div class="img_play">
<?php echo html_entity_decode($donnee['medium']);?>
<span class="play_overlay"><img src="../mediatheque/videos/yt_play_medium.png" /></span>
</div>
<div class="grille_titre">
<div class="ttl"><h1><?php echo stripslashes($donnee['titre_video']);?></h1></div>
<span class="date_mise_en_ligne"><?php echo date("d.m.Y",strtotime($donnee['date_insert']));?></span>
<span class="duree"><?php echo stripslashes($donnee['duree']);?></span>
</div>
</a>
</li>
<?php
}
?>
</ul>
</div>
<!----------------ici autres slides de l'onglet_2-------------->
</div>
</div>
<!----------------ici d'autres onglets-------------->
</div>
</div>
</div> |
Précision utile: le contenu du titre doit être affiché si click sur la div parente (<li>) et non spécifiquement sur le titre <h1>.
Votre aide m'est vitale.Merci.
