Activation/désactivation de l'affichage d'une vidéo

Version imprimable

Bonjour à toutes et a tous,

Débutant en codage et après avoir cherché, analysé pas mal de tuto je ne trouve pas la solution a mon problème. j’espère que vous pourrez m’orienter ,m'aider. Mon problème :

J'aimerai afficher/cacher(et stopper) une vidéo en javascript avec l'appel d'une fonction. Pour bien vous expliquer voici un bout de mon code :

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
 
<div id="box1">
    <div id="boxheader">
    	<p>Le titre de ma vidéo 1</p>
   	    <span id="boxclose" onclick="document.getElementById('box1').style.display='none';"></span>
    </div>
    <div id="boxcontent">	
        <embed src="cheminDeMaVideo.mp4" width="700" height="600" autostart="0" showcontrols="1"</embed>
    </div>
</div>
 
<div id="box2">
    <div id="boxheader">
        <p>Le titre de ma vidéo 2</p>
   	    <span id="boxclose" onclick="document.getElementById('box2').style.display='none';"></span>
    </div>
    <div id="boxcontent">	
	<embed src="cheminDeMaVideo.mp4" width="700" height="600" autostart="0" showcontrols="1" </embed>
    </div>
</div>
 
<script>
function ouVideo(num){
    var bx = "box";
    var temp = bx + num;
    var allElements = [1,2,3,4,5,6] ;
 
        for (i=0 ; i<allElements.length ; i++) {
            if (num == allElements[i]) {
                document.getElementById(temp).style.display = 'block';
            }
            else {
            allElements[i].style.display='none';
            }
        }	
}
</script>
 
<h3>Tutoriaux disponibles:</h3>
 
<button class="button" id='1' name="rel" type="button" onclick="ouVideo(1);"></button>
<button class="button" id="2" name="rel" type="button" onclick=" ouVideo(2);"></button>

Mon souci c'est que je n'arrive pas à afficher la 2eme vidéo. je reconnait que ma boucle ne doit pas être correcte? si quelqu'un a une idée je suis preneur.

merci par avance

Salut, tu ceux afficher une vidéo à la fois c'est ça ?

En tous cas pour faire plus propre je séparerais le javascript du HTML :
Code:

1 2 <p>Le titre de ma vidéo 1</p> <span id="boxclose" onclick="active_video(this.id);"></span>
Pareil pour l'autre.
Mais tu veux faire quoi exactement ? Afficher l'une après l'autre ou afficher celle qu'on veut et cacher l'autre en même temps ?

EDIT : Au cas où, pour afficher ou cacher une vidéo, on peut faire ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var visible=false; function active_video(id){ if(document.getElementById(id)){ if(visible==false){ // Affiche le div contenant la vidéo. document.getElementById(id).style.display="block"; var visible=true; }else { // Cache le div contenant la vidéo. document.getElementById(id).style.display="none"; var visible=false; } } }
En appuyant sur le bouton une fois tu rend visible la vidéo et en appuyant une deuxieme fois tu la caches.
Mais ça ne remet pas la vidéo à zéro car je ne sais pas faire, c'est faisable faut voir le net.

27/01/2016, 09h38
blaise86

merci de m'avoir répondu.

Petite précision le script est exécuté depuis SharePoint 2010.

Alors oui je veux exécuter une seule vidéo a la fois. J'ai des boutons et lorsque que je clique dessus je veux que cela m'affiche ma vidéo. lorsque que je clique sur une autre vidéo, ça me cache (et la stop) la première et me lance la seconde.

Comme une pop-up... j'ai crée une div avec ma vidéo dedans et un bouton close.
27/01/2016, 11h40
progdebutant

Salut ;)

Je ne connais pas sharepoint mais les codes que je t'ai donné c'est juste du javascript.

Pendant qu'une vidéo tourne, les autres sont cachées à ce que tu me dis, alors comment peux-tu en démarrer une nouvelle si tu ne peux pas cliquer dessus car elles sont cachées ?

C'est ça que je ne comprend pas.

En tous cas, pour cacher une vidéo c'est juste en indiquant l'id du "div" dans lequel se trouve la vidéo et en mettant display="none" comme j'ai fait.
Pour l'afficher tu fais la même chose mais cette fois tu ne mets pas "none" mais "block".

merci en tout cas progdebutant de tes conseils.

j'ai séparé le javascript du html et créee deux fonctions qui fonctionnent :

desactive_video qui me permet de masquer ma video et active_video qui permet de l'afficher.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <script> function desactive_video (name){ var bx = "box"; var temp = bx + name; document.getElementById(temp).style.display="none"; } function active_video(id){ var bx = "box"; var temp = bx + id; var visible=false; if(document.getElementById(id)){ if(visible==false){ document.getElementById(temp).style.display="block"; var visible=true; } } } </script>
Seulement quand je clique sur un autre lien video de la page je voudrais cacher l'affichage des autres vidéos car ça me les affiches à la suite.

27/01/2016, 11h44
progdebutant

Voilà j'ai mis des commentaires en vert sur le code que j'ai affiché ;)

Bein le mieux dans ce cas, c'est que ta balise vidéo tu la mette dans un seul div et que avec les liens sur lesquels tu cliques ça ne change que le nom du fichier vidéo à voir.

Dans le fichier script :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
var films=new Array();
films[0]="chemin du premier film";
films[1]="chemin du deuxieme film";
films[2]="chemin du troisieme film";
// etc....
 
 
function active_video(n){
       if(document.getElementById("mavideo"){
           document.getElementById("mavideo").src=films[n];
       }
}

Dans le fichier HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<div id="scene">
    <div id="scene_titre">
    	<p>Le titre de ma vidéo 1</p>
    </div>
    <div id="cadre_video">	
        <embed id="mavideo" src="#" width="700" height="600" autostart="0" showcontrols="1"</embed>
    </div>
</div>
 
 
<h3>Tutoriaux disponibles:</h3>
 
<button class="button" name="rel" type="button" onclick="active_video(0);"></button>
<button class="button" name="rel" type="button" onclick="active_video(1);"></button>
<button class="button" name="rel" type="button" onclick="active_video(2);"></button>

Il faut choisir avant de programmer : Soit tu veux un défilement des vidéos en boucle, soit tu dois les activer par un bouton.
Là je t'ai montré comment les activer par un bouton, tu n'as qu'une balise vidéo mais tu changes (grâce au lien cliqué) le nom du fichier source, c'est tout ;)

27/01/2016, 14h49
Elderid

M. Blaise86,

c'est la solution que je t'ai donnée de vive voix me semble t'il mais comme tu n'écoute pas ....8O

il faut apprendre à chercher la solution et non chercher a ce que l'on te donne la solution .....

Amicalement.
27/01/2016, 15h11
blaise86

Unissons nos forces :)