Recuperer une valeur et la passer en get a une iframe

**saveus** · 14/04/2019, 00h12

bonjour,
sur du stream vidéo j utilise le script suivant (qui marche)

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
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
115
116
117
118
119
120
121
122
<?PHP
.....
?>
 
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>videojs-contrib-quality-levels Demo</title>
  <link href="../common/video-js.css" rel="stylesheet">
  <style>
    button.enabled {
      background: SkyBlue;
    }
    button.selected {
      background: SpringGreen;
    }
    button.disabled {
      background: red;
    }
  </style>
</head>
<body>
<table><tr><td>
  <div id="fixture">
  </div>
</td><td valign="top">
 
<a href="<?php echo $url; ?>" target="_blank" >chaturbate</a><br><br><br>
<iframe name="formchngmytype" width="150" height="300" src="./form_mytype.php?pseudo=<?php echo $pseudo; ?>"></iframe>
 
 
  <div id="quality-levels">
    <h2>Quality Levels:</h2>
  </div>
 
  </td></tr></table>
  <script src="../common/video.js"></script>
  <script src="../common/videojs-contrib-hls.js"></script>
  <script src="../common//videojs-contrib-quality-levels.js"></script>
  <script>
    function createQualityButton(qualityLevel, parent) {
      var button = document.createElement('button');
      var classes = button.classList;
 
      if (qualityLevel.enabled) {
        classes.add('enabled');
      } else {
        classes.add('disabled');
      }
 
      button.innerHTML =  parseInt(qualityLevel.bitrate/1024);
      button.id = 'quality-level-' + qualityLevel.id;
 
      button.onclick = function() {
        var old = qualityLevel.enabled;
        qualityLevel.enabled = !old;
        button.classList.toggle('enabled');
        button.classList.toggle('disabled');
      }
      parent.appendChild(button);
    }
 
    function createPlayer(callback) {
      var video = document.createElement('video');
      video.id = 'videojs-contrib-quality-levels-player';
      video.className = 'video-js vjs-default-skin';
      video.setAttribute('controls', true);
      video.setAttribute('height', 710);
      video.setAttribute('width', 1262);
      document.querySelector('#fixture').appendChild(video);
 
      var options = {
        autoplay: true,
        qualityLevels: {}
      };
      var url = '<?php echo $streamurl; ?>';
      var type = 'application/x-mpegURL';
 
      try {
        window.player = videojs(video.id, options);
 
        window.player.src({
          src: url,
          type: type
        });
 
        callback(window.player);
      } catch(err) {
        console.log("caught an error trying to create and add src to player:", err);
      }
    }
    function setup(player) {
      player.ready(function() {
        var qualityLevels = player.qualityLevels();
        var container = document.getElementById('quality-levels');
 
        qualityLevels.on('addqualitylevel', function(event) {
          createQualityButton(event.qualityLevel, container);
        });
 
        qualityLevels.on('change', function(event) {
          for (var i = 0; i < qualityLevels.length; i++) {
            var level = qualityLevels[i];
            var button = document.getElementById('quality-level-' + level.id);
 
            button.classList.remove('selected');
          }
 
          var selected = qualityLevels[event.selectedIndex];
          var button = document.getElementById('quality-level-' + selected.id);
          button.classList.add('selected');
        })
      });
    }
 
    (function(window, videojs) {
      createPlayer(setup);
    })(window, window.videojs);
  </script>
</body>
</html>

j'ai besoin de récuperer la derniere valeur de parseInt(qualityLevel.bitrate/1024) (ligne 56)
et d'ajouter cette valeur a mon iframe (ligne34) en GET du style URL=URL + '&qual=' + 'DERNIERE_VALEUR_DE_LA_FONCTION',
mais malheureusement je suis trop novice en javascript pour savoir comment faire

j'apprécierais vraiment un petit coup de main , merci d'avance

Invité · 14/04/2019, 08h54

Bonjour,

dans ce genre :

Code JavaScript :

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

1
2
3
4
var formchngmytype = document.querySelector('iframe[name="formchngmytype"]');
 
var qlvl_bitrate = parseInt(qualityLevel.bitrate/1024);
formchngmytype.src = formchngmytype.src + '&qual=' + qlvl_bitrate;

**saveus** · 14/04/2019, 15h28

merci pour cette réponse rapide.
il me reste un petit problème de variable que je n arrive pas a résoudre
je n'arrive pas a écrire la variable dans la fonction vers une variable globale

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
 
var qlvl_bitrate='init';
  var formchngmytype = document.querySelector('iframe[name="formchngmytype"]');
    function createQualityButton(qualityLevel, parent) {
      var button = document.createElement('button');
      var classes = button.classList;
 
      if (qualityLevel.enabled) {
        classes.add('enabled');
      } else {
        classes.add('disabled');
      }
 
      button.innerHTML =  parseInt(qualityLevel.bitrate/1024) + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
      button.id = 'quality-level-' + qualityLevel.id;
 
 
         window['qlvl_bitrate'] = parseInt(qualityLevel.bitrate/1024);
 
 
      console.log(qlvl_bitrate);

après recherche sur le net , j ai essayé différentes solution tel que :

Code :

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

 window['qlvl_bitrate'] = parseInt(qualityLevel.bitrate/1024);

Code :

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

 qlvl_bitrate = parseInt(qualityLevel.bitrate/1024);

etc..
je n'arrive pas a ré-ecrire la variable globale qui reste sur la valeur "init" par défaut que j ai défini en haut du script.
par contre en console je vois bien les différentes valeurs

**saveus** · 14/04/2019, 20h33

complément :

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
 
<script>
  var qlvl_bitrate='init';
console.log(qlvl_bitrate);
  var formchngmytype = document.querySelector('iframe[name="formchngmytype"]');
    function createQualityButton(qualityLevel, parent) {
 ...
 
 
       qlvl_bitrate = parseInt(qualityLevel.bitrate/1024);
      console.log(qlvl_bitrate);
....
 
 
 
 
 
    console.log(window['qlvl_bitrate']);
 
    function createPlayer(callback) {
    ...
    }
 
    (function(window, videojs) {
      createPlayer(setup);
    })(window, window.videojs);
 
    console.log(qlvl_bitrate);
    formchngmytype.src = formchngmytype.src + '&qual=' + qlvl_bitrate;
 
 
 
  </script>

par contre dans la console j ai :

stream.php?pseudo=pseudo_test:42 init
stream.php?pseudo=pseudo_test:76 init
stream.php?pseudo=pseudo_test:134 init
stream.php?pseudo=pseudo_test:61 476
stream.php?pseudo=pseudo_test:61 1228
stream.php?pseudo=pseudo_test:61 1980
stream.php?pseudo=pseudo_test:61 3316

étant bien plus habitué a php il y as une subtilité qui m'échappe.

**saveus** · 14/04/2019, 21h01

au final j ai fait un :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}
 
sleep(2000).then(() => {
     console.log(qlvl_bitrate);
    formchngmytype.src = formchngmytype.src + '&qual=' + qlvl_bitrate;
 
});

et ça marche , mais si quelqu’un a une solution plus propre a m'apporter...

**Watilin** · 15/04/2019, 18h31

Ta fonction createQualityButton est appelée de manière asynchrone lors des évènements 'addqualitylevel'. Je ne sais pas quand ces évènements sont émis, mais ce qui est certain, c’est que ça arrive après la fin de ton script. C’est pourquoi tu observes la valeur "init" au lignes 42, 76 et 134.

Si tu ne sais pas à l’avance combien de qualityLevels il va y avoir, difficile de trouver une solution plus élégante que ce que tu as fait : attendre un nombre arbitraire de secondes.

Pour faire un tout petit peu mieux, tu peux programmer le timer au moment où le premier 'addqualitylevel' est reçu. Pour détecter que c’est le premier, tu peux par exemple regarder si la valeur de qlvl_bitrate est toujours "init".

Recuperer une valeur et la passer en get a une iframe

JavaScript

Vue hybride

Discussions similaires

Partager

Partager