title: How to add quality selector option on videojs
body: <p>The following is my code: I need to add a quality selector in a webpage which uses videojs. I am not sure on how to use the plugins, there weren't any examples of plugins in React. The way I inserted the plugins don't work. Please help</p>
  <p><strong>Videojs</strong></p>
  <pre><code>&lt;script src=&quot;https://vjs.zencdn.net/7.6.6/video.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/hls.js@latest&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdn.streamroot.io/videojs-hlsjs-plugin/1/stable/videojs-hlsjs-plugin.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/videojs-overlay/1.1.4/videojs-overlay.min.js&quot;&gt;&lt;/script&gt;
      &lt;link href=&quot;https://fonts.googleapis.com/css?family=Poppins&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
      &lt;script src=&quot;../dist/silvermine-videojs-chromecast.min.js&lt;?php echo &quot;?&quot;.$version; ?&gt;&quot;&gt;&lt;/script&gt;
  
  
                  &lt;div class=&quot;col-sm-6&quot;&gt;
                      &lt;div class=&quot;video-player1&quot;&gt;
                          &lt;video autoplay id=&quot;example-video&quot; class=&quot;video-js vjs-theme-fantasy custom-videojs&quot; controls&gt;
                          &lt;/video&gt;
                          &lt;script&gt;
                              var options = {
                                  html5: {
                                      hlsjsConfig: {
                                          // Put your hls.js config here
                                      }
                                  },
                                  controls: true,
                                  techOrder: [ 'chromecast', 'html5' ], // You may have more Tech, such as Flash or HLS
                                  plugins: {
                                      chromecast: {}
                                  }
                              };
  
                              // setup beforeinitialize hook
                              videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer, hlsjsInstance) =&gt; {
                                  // here you can interact with hls.js instance and/or video.js playback is initialized
                              });
  
                              var player = videojs('example-video', options, function() {});
  
                              var overlay_content = '&lt;div class=&quot;overlay_title&quot;&gt;&lt;div class=&quot;wrapper&quot;&gt;&lt;img src=&quot;images/nologo.jpg&quot; align=&quot;middle&quot; class=&quot;logoVideo&quot; id=&quot;logovideo&quot;&gt; &lt;div style=&quot;padding-left:10px&quot;&gt;&lt;h2 id=&quot;channeltitle&quot; style=&quot;font-size: 22px;&quot; &gt;&lt;/h2&gt;&lt;h4 id=&quot;descrtitle&quot; style=&quot;font-size: 17px;&quot;&gt;&lt;/h4&gt;&lt;/div&gt;&lt;/div&gt;&lt;div id=&quot;progressp&quot; class=&quot;progress-bar&quot;&gt;&lt;div id=&quot;progress_channel&quot; class=&quot;progress&quot;&gt;&lt;/div&gt;&lt;/div&gt;';
                              player.overlay({
                                  overlays: [{
                                      start: 'useractive',
                                      content: overlay_content,
                                      end: 'userinactive',
                                      align: 'bottom'
                                  }]
                              });
                              function play(url) {
                                  player.pause();
                                  player.src({
                                      src: url,
                                      type: 'application/x-mpegURL'
                                  });
                                  player.load();
                                  player.play();
                                  // here you can interact with hls.js instance and/or video.js playback is initialized
                              }
                          &lt;/script&gt;
  </code></pre>