bonjour tout le monde
je cherche pour mon site perso a afficher différente videobackground selon la chanson choisi et actuellement çà ne fonctionne qu' a moitié avec un bout de js dans ma page html
actuellement si je choisis chanson1 video1 fonctionne, si chanson 2 video2 fonctionne mais si je reviens sur chanson 1 video2 reste en place alors que j ai choisi chanson 1 et cela devrait être video1
j'espère bien me faire comprendre
voici mon code actuel
et mon bout de css pour la vidéo
Code HTML : 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 <div ID="videoclip"> <video ID="video_ID1" class="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> <source src="data/video1.mp4" type="video/mp4"> <img src="images/synthwave.jpg" width="100%" height="100%" > </video> <video ID="video_ID2" class="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> <source src="data/video2.mp4" type="video/mp4"> <img src="images/synthwave.jpg" width="100%" height="100%" > </video> <video ID="video_ID23" class="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> <source src="data/video3.mp4" type="video/mp4"> <img src="images/synthwave.jpg" width="100%" height="100%" > </video> <video ID="video_ID4" class="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> <source src="data/video4.mp4" type="video/mp4"> <img src="images/synthwave.jpg" width="100%" height="100%" > </video> <video ID="video_ID5" class="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> <source src="data/video5.mp4" type="video/mp4"> <img src="images/synthwave.jpg" width="100%" height="100%" > </video> </div> <div class="player"> <div class="pl"></div> <div class="title"></div> <div class="artist"></div> <div class="cover"></div> <div class="controls"> <div class="play"></div> <div class="pause"></div> <div class="rew"></div> <div class="fwd"></div> </div> <div class="volume"></div> <div class="tracker"></div> </div> <ul class="playlist"> <li audiourl="rise up.mp3" cover="WD1.jpg" artist="Artist: MasterWill" onclick="document.getElementById('video_ID1').style.display='block';">*- rise up -*</li> <li audiourl="son of flynn.mp3" cover="SOF.jpg" artist="Artist: MasterWill" onclick="document.getElementById('video_ID2').style.display='block';">*- son of flynn -*</li> <li audiourl="push_universal_nation.mp3" cover="push.jpg" artist="Artist: MasterWill" onclick="document.getElementById('video_ID3').style.display='block';">*- Push Universal Nation -*</li> <li audiourl="Worlds Beyond Our Senses.mp3" cover="raw.jpg" artist="Artist: MasterWill" onclick="document.getElementById('video_ID4').style.display='block';">*- Worlds Beyond Our Senses -*</li> <li audiourl="StrangerThingsTheme.mp3" cover="StrangerThings.png" artist="MasterWill" onclick="document.getElementById('video_ID5').style.display='block';">*- StrangerThingsTheme -*</li> </ul>
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12 .video_background { display:none; position: absolute; bottom: 0px; right: 0px; min-width: 100%; min-height: 100%; width: 100%; height: 100%; z-index: -5000; overflow: hidden; }
merci d avance pour votre aide
Partager