plyr.io HLS/.m3u8 Stream with video qualities

index.html

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/plyr@3/dist/plyr.css">
<link rel="stylesheet" href="./style.ccs">

<script src="https://cdn.jsdelivr.net/npm/hls.js"></script>
<script src="https://unpkg.com/plyr@3"></script>
<script src="./plyr-hls.js"></script>

<div class="container">
  <video controls crossorigin playsinline>
    <source src="https://p2p.cy/WoZie9ph/master.m3u8" type="application/x-mpegURL" />
  </video>
</div>

plyr-hls.js

document.addEventListener("DOMContentLoaded", () => {
  const video = document.querySelector("video");
  const source = video.getElementsByTagName("source")[0].src;
  
  // For more options see: https://github.com/sampotts/plyr/#options
  // captions.update is required for captions to work with hls.js
  const defaultOptions = {};

  if (Hls.isSupported()) {
    // For more Hls.js options, see https://github.com/dailymotion/hls.js
    const hls = new Hls();
    hls.loadSource(source);

    // From the m3u8 playlist, hls parses the manifest and returns
    // all available video qualities. This is important, in this approach,
    // we will have one source on the Plyr player.
    hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {

      // Transform available levels into an array of integers (height values).
      const availableQualities = hls.levels.map((l) => l.height)

      // Add new qualities to option
      defaultOptions.quality = {
        default: availableQualities[0],
        options: availableQualities,
        // this ensures Plyr to use Hls to update quality level
        forced: true,        
        onChange: (e) => updateQuality(e),
      }

      // Initialize here
      const player = new Plyr(video, defaultOptions);
    });
    hls.attachMedia(video);
    window.hls = hls;
  } else {
    // default options with no quality update in case Hls is not supported
    const player = new Plyr(video, defaultOptions);
  }

  function updateQuality(newQuality) {
    window.hls.levels.forEach((level, levelIndex) => {
      if (level.height === newQuality) {
        console.log("Found quality match with " + newQuality);
        window.hls.currentLevel = levelIndex;
      }
    });
  }
});

style.css

.container {
  padding-top: 18vh;
	margin: 20px auto;
    width: 600px;
}
video {
	width: 100%;
}

<link rel="stylesheet" href="./style.ccs">

ccs -> css

@iydon @io-st

How to add quality to hls player (plyr.io) along with other controls(rewind, fast-forward,current-time)?

I tried adding quality option using your code, but it only shows quality under settings button and hides all the controls (rewind, fast-forward,current-time,etc.) so don't know what's wrong here. Below are the examples.

Player without Quality: https://codepen.io/ramvishu/pen/yLxpPgO

Player with Quality:https://codepen.io/ramvishu/pen/YzOEdxy

But when I add quality option using sampotts/plyr#1741 (comment), it only shows quality under settings button and hides all the controls (rewind, fast-forward,current-time,etc.) (see screenshot 2).

how can I keep both controls and quality in player? Any guidance will be much appreciated. TIA :)

bro I am facing issue Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://p2p.cy/WoZie9ph/master.m3u8. (Reason: CORS request did not succeed). Status code: (null).

​plz fix this

@Princegupta20009 Replace that url with the link of the M3U8 of what you want to play.