uweb/searchurl/txt/plyr.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/plyr/dist/plyr.css"/>
<video id="player" playsinline controls>
  <source id="src" />
</video>
<script src="https://cdn.jsdelivr.net/npm/plyr"></script>
<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.js"></script>
<script>
  const source = location.search.substring(3);//?u=
  {
    let d = document;
    let e = d.getElementById("src");
    e.src = source;
  }
  const video = document.querySelector("video");
  const defaultOptions = {};
  if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource(source);
    hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
      const availableQualities = hls.levels.map((l) => l.height);
      defaultOptions.quality = {
        default: availableQualities[0],
        options: availableQualities,
        forced: true,        
        onChange: (e) => updateQuality(e),
      }

      // Initialize new Plyr player with quality options
      const player = new Plyr(video, defaultOptions);
    });
    hls.attachMedia(video);
    window.hls = hls;
  } else {
    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;
      }
    });
  }
</script>