Discussion :

[WeelCodeur]

Bonjour,

Tout d'abord, je tiens à préciser que je suis en stage en entreprise,

héritant du travail laborieux d'ancien stagiaires, je dois apporter des modifications sur un des sites que l'entreprise utilise en interne,

Ayant que très peu de notion en Javascript / AngularJS, j'ai essayé de décortiquer le code afin de le comprendre.

Mon problème est le suivant : il existait un carrousel/slider d'image sur la page d'accueil, ainsi qu'une vidéo. La demande est de crée un carrousel des miniatures de ces vidéos (ce que j'ai réussi à faire), mais cependant, quand je clique sur une miniature elle devrait "ouvrir" la vidéo sur la page, le problème est que chaque miniature envoie vers la même vidéo.

Je me doute bien que le soucis est entre mon clavier et ma chaise, mais je n'arrive pas à le trouver, voici les différents bouts de code qui vous seront je pense nécessaire :

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
<!--- Index -->
 
<div class="col-lg-5 col-md-5 col-sm-6 col-xs-12 contVideo">
            <div>
              <div class="video" ng-controller="videoCtrl">
                <slick class="carousel" infinite="true" settings="slickConfig">
                <div ng-repeat="data in video" class="contentVideo" ng-style="{'background-image':'url({{data.miniature}})'}">
                  <a data-toggle="modal" data-target="#myModal">
                    <img ng-src="images/index/video/BoutonPlay.png" alt="Play" />
                  </a>
                  <div class="descriptionVideo">
                    <p>{{data.legende}}</p>
                  </div>
                </div>
           </slick>
                <div class="modal fade" id="myModal" ng-repeat="data in video">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button ng-attr-type="button" class="close" data-dismiss="modal">x</button>
                      </div>
                      <div class="modal-body">
                     <video id="video1" ng-src="{{data.src}}" controls="controls" width="550px" height="300px" poster="{{data.miniature}}" preload="metadata"></video>
                      </div>
                    </div>
                  </div>
                </div>
 
              </div>
            </div>
          </div>

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
// VideoCtrl.js
app.controller("videoCtrl", function($rootScope, $scope, $window) {
 
  // INFORMATION GENERAL VIDEO
  // legende = "resume" ou titre de la video
  // src = adresse de la video
  // miniature =  background video
  $scope.video = [
    {
      "legende": "CECI EST LA VIDEO 1",
      "src": "images/index/video/video1.mp4",
      "miniature": "images/index/video/videoMiniature.png"
    },
    {
      "legende": "CECI EST LA VIDEO 2",
      "src": "images/index/video/video2.mp4",
      "miniature": "images/index/video/miniature2.png"
    },
    {
      "legende": "CECI EST LA VIDEO 3",
      "src": "images/index/video/video3.mp4",
      "miniature": "images/index/video/miniature3.jpg"
    }
 
  ];
 
  // reinitialise le scroll au changement de vue
  $rootScope.$on('$routeChangeSuccess', function() {
    var interval = setInterval(function() {
      if (document.readyState == 'complete') {
        $window.scrollTo(0, 0);
        clearInterval(interval);
      }
    }, 10000);
  });
 
  // Scope slider + img slider + config slider
  $scope.slickConfig = {
    prevArrow: '<img src="images/index/slider/prev.png"class="slick-prev"/>',
    nextArrow: '<img src="images/index/slider/next.png"class="slick-next"/>',
    autoplay: true,
    draggable: true,
    autoplaySpeed: 10000      //1000 egal 1 second
  }
 
 
});

Il y a surement des erreurs et/ou des choses en trop, j'avoue avoir repris le code des anciens stagiaires qui avaient déjà fait un carrousel sur cette même page et essayé d'adapter au besoin,

Je reste disponible pour toutes questions,

Un grand merci à vous

[WeelCodeur]

Problème résolu ! Pour ceux qui ont le même soucis un jour : le problème vient du fait que la modal qui s'ouvre boucle sur toutes les vidéos (et prends uniquement la première en l’occurrence !)

Dans mon cas, la solution à été de modifier les lignes suivantes (8 et 16) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a data-toggle="modal" data-target="#myModal">

devient :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a data-toggle="modal" data-target="#video-{{data.id}}">

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="modal fade" id="myModal" ng-repeat="data in video">

devient :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="modal fade" id="video-{{data.id}}" ng-repeat="data in video">

Ainsi, n'oubliez pas d'ajouter un id à vos vidéos votre controller !