zh/searchurl/txt/plyr.cfg

   1 <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
   2 <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/plyr/dist/plyr.css"/>
   3 <video id="player" playsinline controls
   4   data-plyr-config='{"controls": ["play-large", "play", "progress", "current-time", "settings", "fullscreen"] }'>
   5   <source id="src" />
   6 </video>
   7 <script src="https://fastly.jsdelivr.net/npm/plyr"></script>
   8 <script src="https://fastly.jsdelivr.net/hls.js/latest/hls.js"></script>
   9 <script>
  10   const source = location.search.substring(3);
  11   document.getElementById("src").src = source;
  12   const video = document.querySelector("video");
  13   let i = source.indexOf(".m3u8");
  14   if(i>0 &&
  15      (source.length <= (i+5) || '?'===source.charAt(i+5)))
  16   {
  17     const hls = new Hls();
  18     hls.loadSource(source);
  19     const defaultOptions = {};
  20     hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
  21       const availableQualities = hls.levels.map((l) => l.height);
  22       defaultOptions.quality = {
  23         default: availableQualities[0],
  24         options: availableQualities,
  25         forced: true,
  26         onChange: (e) => updateQuality(e),
  27       }
  28
  29       // Initialize new Plyr player with quality options
  30       const player = new Plyr(video, defaultOptions);
  31     });
  32     hls.attachMedia(video);
  33     window.hls = hls;
  34   } else {
  35     const player = new Plyr(video);
  36   }
  37
  38   function updateQuality(newQuality) {
  39     window.hls.levels.forEach((level, levelIndex) => {
  40       if (level.height === newQuality) {
  41         console.log("Found quality match with " + newQuality);
  42         window.hls.currentLevel = levelIndex;
  43       }
  44     });
  45   }
  46 </script>