Affichage de différents videoclip

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 :?:D

voici mon code actuel

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
    <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>

et mon bout de css pour la vidéo

Code:

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

quand vous cliquez sur un lien, il n'y a pas le code qui cache les autres vidéos.

au lieu de mettre le code javascript dans le code html, je vous conseille de le séparer dans une balise "script", ça rendra votre code plus clair.
https://developer.mozilla.org/fr/doc...ent#javascript

bonjour, merci de m avoir mis sur la voie , j ai résolu mon problème
en faisant ceci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var video1 = document.getElementById('video_ID1');
var video2 = document.getElementById('video_ID2');
var video3 = document.getElementById('video_ID3');
var video4 = document.getElementById('video_ID4');
var video5 = document.getElementById('video_ID5');
 
function playvid1() 
 
       { 
         document.getElementById('video_ID1').style.display = 'block'; 
         document.getElementById('video_ID2').style.display = 'none';
         document.getElementById('video_ID3').style.display = 'none';
         document.getElementById('video_ID4').style.display = 'none';
         document.getElementById('video_ID5').style.display = 'none'; 
 
 
       }

je sais pas si c est ce qu il y de plus propre ou simple mais cela fonctionne

au lieu de mettre chaque vidéo dans une variable, vous pouvez avoir une liste avec la fonction getElementsByClassName
https://developer.mozilla.org/fr/doc...ntsByClassName
et ensuite la fonction d'affichage d'une vidéo parcourt cette liste avec une boucle.

pour simplifier un peu plus, je me demande s'il n'est pas possible d'avoir une seule balise "video" et de remplacer l'url de la vidéo lors du clic.