title: Adding Quality Selector to plyr when using HLS Stream
body: <p>I am using <a href="https://github.com/sampotts/plyr" rel="noreferrer"><strong>plyr</strong></a> as wrapper around HTML5 video tag and using Hls.js to stream my .m3u8 video . </p>
  
  <p>I was going around a lot of issues on plyr to enable quality selectors and came arounf multiple PR's which had this question but was closed saying the implementation is merged, till i came around this <a href="https://github.com/sampotts/plyr/issues/1741" rel="noreferrer"><strong>PR</strong></a> which says it's still open, but there was a custom implementation in the Comments which assured that it works . I was trying that implementation locally in order to check if we can add a quality selector but seems like i am missing something/ or the implementation dosent work .</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
     &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;title&gt;HLS Demo&lt;/title&gt;
        &lt;link rel="stylesheet" href="https://cdn.plyr.io/3.5.10/plyr.css" /&gt;
        &lt;style&gt;
           body {
           max-width: 1024px;
           }
        &lt;/style&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;video preload="none" id="player" autoplay controls crossorigin&gt;&lt;/video&gt;
        &lt;script src="https://cdn.plyr.io/3.5.10/plyr.js"&gt;&lt;/script&gt;
        &lt;script src="https://cdn.jsdelivr.net/hls.js/latest/hls.js"&gt;&lt;/script&gt;
        &lt;script&gt;
           (function () {
            var video = document.querySelector('#player');
            var playerOptions= {
             quality: {
              default: '720',
              options: ['720']
             }
            };
            var player;
             player = new Plyr(video,playerOptions);
            if (Hls.isSupported()) {
             var hls = new Hls();
             hls.loadSource('https://content.jwplatform.com/manifests/vM7nH0Kl.m3u8');
               //hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED,function(event,data) {
    
   // uncomment to see data here 
  //                     console.log('levels', hls.levels);  we get data here but not able to see in settings . 
            
             playerOptions.quality = {
              default: hls.levels[hls.levels.length - 1].height,
              options: hls.levels.map((level) =&gt; level.height),
              forced: true,
               // Manage quality changes
               onChange: (quality) =&gt; {
                console.log('changes',quality);
                hls.levels.forEach((level, levelIndex) =&gt; {
                 if (level.height === quality) {
                  hls.currentLevel = levelIndex;
                 }
                });
               }
           };
          });
         }
           
            // Start HLS load on play event
            player.on('play', () =&gt; hls.startLoad());
           
            // Handle HLS quality changes
            player.on('qualitychange', () =&gt; {
             console.log('changed');
             if (player.currentTime !== 0) {
              hls.startLoad();
             }
            });
           })();
           
        &lt;/script&gt;
     &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <blockquote>
    <p>The above snippet works please run , but also if you uncomment the
    line in HLS Manifest you will see we get data in levels and also pass
    the data to player options but it dosent come up in settings.How can
    we add a quality selector to plyr when using Hls stream .</p>
  </blockquote>